Initial commit

src/views/shop/brand/components/brandEdit.vue

@@ -0,0 +1,201 @@
+<!-- 编辑弹窗 -->
+<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="brandName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入品牌名称"
+          v-model:value="form.brandName"
+        />
+      </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 { addBrand, updateBrand } from '@/api/shop/brand';
+  import { Brand } from '@/api/shop/brand/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?: Brand | 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<Brand>({
+    brandId: undefined,
+    brandName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    brandName: [
+      {
+        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 ? updateBrand : addBrand;
+        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/brand/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/brand/index.vue

@@ -0,0 +1,245 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="brandId"
+          :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>
+
+      <!-- 编辑弹窗 -->
+      <BrandEdit 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 BrandEdit from './components/brandEdit.vue';
+  import { pageBrand, removeBrand, removeBatchBrand } from '@/api/shop/brand';
+  import type { Brand, BrandParam } from '@/api/shop/brand/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Brand[]>([]);
+  // 当前编辑数据
+  const current = ref<Brand | 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 pageBrand({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'brandId',
+      key: 'brandId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '品牌名称',
+      dataIndex: 'brandName',
+      key: 'brandName',
+      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?: BrandParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Brand) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Brand) => {
+    const hide = message.loading('请求中..', 0);
+    removeBrand(row.brandId)
+      .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);
+        removeBatchBrand(selection.value.map((d) => d.brandId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Brand) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Brand'
+  };
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,361 @@
+<!-- 编辑弹窗 -->
+<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="adType">
+        <a-select
+          ref="select"
+          v-model:value="form.adType"
+          style="width: 120px"
+        >
+          <a-select-option value="图片广告">图片广告</a-select-option>
+          <a-select-option value="幻灯片">幻灯片</a-select-option>
+          <a-select-option value="视频广告">视频广告</a-select-option>
+        </a-select>
+      </a-form-item>
+      <template v-if="form.adType == '幻灯片'">
+        <a-form-item label="广告图片" name="images" extra="请上传广告图片,最多可上传9张图">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="9"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="9"-->
+<!--            :drag="true"-->
+<!--            :accept="'image/png,image/jpeg'"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '图片广告'">
+        <a-form-item label="广告图片" name="images" extra="请上传广告图片">
+          <SelectFile
+            :placeholder="`请选择图片`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="1"-->
+<!--            :accept="'image/png,image/jpeg'"-->
+<!--            :drag="true"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <template v-if="form.adType == '视频广告'">
+        <a-form-item label="上传视频" name="images" extra="请上传视频文件，仅支持mp4格式，大小200M以内">
+          <SelectFile
+            :placeholder="`请选择视频文件`"
+            :limit="1"
+            :data="images"
+            @done="chooseFile"
+            @del="onDeleteItem"
+          />
+<!--          <ele-image-upload-->
+<!--            v-model:value="images"-->
+<!--            :limit="1"-->
+<!--            :accept="'video/mp4'"-->
+<!--            :drag="true"-->
+<!--            :item-style="{ maxWidth: '160px', maxHeight: '160px' }"-->
+<!--            :upload-handler="uploadHandler"-->
+<!--            @upload="onUpload"-->
+<!--          />-->
+        </a-form-item>
+      </template>
+      <a-form-item label="广告位名称" name="name">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入广告位名称"
+          v-model:value="form.name"
+        />
+      </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="path">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入路由/链接地址"
+          v-model:value="form.path"
+        />
+      </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="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>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import {assignObject, isChinese} from 'ele-admin-pro';
+  import { addAd, updateAd } from '@/api/cms/ad';
+  import { Ad } from '@/api/cms/ad/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  import {FormInstance, RuleObject} from 'ant-design-vue/es/form';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { uploadFile } from '@/api/system/file';
+  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?: Ad | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+  // 是否显示最大化切换按钮
+  const maxable = ref(true);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<Ad>({
+    adId: undefined,
+    name: '',
+    adType: '图片广告',
+    images: '',
+    width: '',
+    height: '',
+    path: '',
+    type: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    name: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写广告位名称',
+        trigger: 'blur'
+      }
+    ],
+    adType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择广告类型',
+        trigger: 'blur'
+      }
+    ],
+    images: [
+      {
+        required: true,
+        type: 'string',
+        message: '请上传图片或视频',
+        trigger: 'blur',
+        validator: async (_rule: RuleObject, value: string) => {
+          if (images.value.length == 0) {
+            return Promise.reject('请上传图片或视频');
+          }
+          return Promise.resolve();
+        }
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 上传事件 */
+  const uploadHandler = (file: File) => {
+    const item: ItemType = {
+      file,
+      uid: (file as any).uid,
+      name: file.name
+    };
+    if (file.type.startsWith('video')) {
+      if (file.size / 1024 / 1024 > 200) {
+        message.error('大小不能超过 200MB');
+        return;
+      }
+    }
+    if (file.type.startsWith('image')) {
+      if (file.size / 1024 / 1024 > 5) {
+        message.error('大小不能超过 5MB');
+        return;
+      }
+    }
+
+    onUpload(item);
+  };
+
+  // 上传文件
+  const onUpload = (item: any) => {
+    const { file } = item;
+    uploadFile(file)
+      .then((data) => {
+        images.value.push({
+          uid: data.id,
+          url: file.type == 'video/mp4' ? 'https://oss.wsdns.cn/20240301/6e4e32cb808245d4be336b9486961145.png' : data.path,
+          status: 'done'
+        });
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  const chooseFile = (data: FileRecord) => {
+    images.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+    form.images = data.path;
+  }
+
+  const onDeleteItem = (index: number) => {
+    images.value.splice(index,1)
+    form.images = '';
+  }
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          images: JSON.stringify(images.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateAd : addAd;
+        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);
+          images.value = [];
+          if (props.data.images) {
+            const arr = JSON.parse(props.data.images);
+            arr.map((d) => {
+              images.value.push({
+                uid: d.uid,
+                url: d.url,
+                status: 'done'
+              });
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+<style lang="less">
+  .tab-pane {
+    min-height: 300px;
+  }
+  .ml-10 {
+    margin-left: 5px;
+  }
+  .upload-text {
+    margin-right: 70px;
+  }
+  .icon-bg {
+    width: 50px;
+    height: 50px;
+    display: block;
+    border-radius: 50px;
+    background: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20version%3D%221.1%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%221%22%20x1%3D%220%22%20x2%3D%221%22%20y1%3D%220%22%20y2%3D%220%22%20gradientTransform%3D%22matrix(6.123233995736766e-17%2C%201%2C%20-0.024693877551020406%2C%206.123233995736766e-17%2C%200.5%2C%200)%22%3E%3Cstop%20stop-color%3D%22%230a060d%22%20stop-opacity%3D%221%22%20offset%3D%220%22%3E%3C%2Fstop%3E%3Cstop%20stop-color%3D%22%23660061%22%20stop-opacity%3D%221%22%20offset%3D%220.95%22%3E%3C%2Fstop%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22url(%231)%22%3E%3C%2Frect%3E%3C%2Fsvg%3E');
+  }
+</style>

src/views/shop/goods/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/goods/index.vue

@@ -0,0 +1,256 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsId"
+          :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 === 'title'">
+              <a @click="openPreview(`/goods/detail/${record.goodsId}`)">{{ record.title }}</a>
+            </template>
+            <template v-if="column.key === 'image'">
+              <template
+                v-for="(img, index) in JSON.parse(record.image)"
+                :key="index"
+              >
+                <a-image v-if="index == 0" :src="img" :width="80" />
+              </template>
+            </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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsEdit 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 type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import GoodsEdit from './components/goodsEdit.vue';
+  import { pageGoods, removeGoods, removeBatchGoods } from '@/api/shop/goods';
+  import type { Goods, GoodsParam } from '@/api/shop/goods/model';
+  import {openPreview, openUrl} from '@/utils/common';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Goods[]>([]);
+  // 当前编辑数据
+  const current = ref<Goods | 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 pageGoods({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'goodsId'
+    },
+    {
+      title: '封面图',
+      dataIndex: 'image',
+      width: 120,
+      align: 'center',
+      key: 'image'
+    },
+    {
+      title: '商品名称',
+      dataIndex: 'title',
+      key: 'title'
+    },
+    {
+      title: '商品售价',
+      dataIndex: 'salePrice',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'salePrice'
+    },
+    {
+      title: '销量',
+      dataIndex: 'sales',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'sales'
+    },
+    {
+      title: '库存',
+      dataIndex: 'stock',
+      width: 120,
+      align: 'center',
+      sorter: true,
+      key: 'stock'
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Goods) => {
+    current.value = row ?? null;
+    openUrl(`/goods/add`);
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Goods) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoods(row.goodsId)
+      .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);
+        removeBatchGoods(selection.value.map((d) => d.goodsId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Goods) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openUrl(`/goods/add?goodsId=${record.goodsId}`);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Goods'
+  };
+</script>
+
+<style lang="less" scoped></style>

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

@@ -0,0 +1,300 @@
+<!-- 编辑弹窗 -->
+<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: 4, 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: 24, 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: 24, 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="是否展示">
+            <a-switch
+              checked-children="是"
+              un-checked-children="否"
+              :checked="form.status === 0"
+              @update:checked="updateHideValue"
+            />
+          </a-form-item>
+          <a-form-item label="分类图标" name="image" extra="尺寸180*180">
+            <SelectFile
+              :placeholder="`请选择图片`"
+              :limit="1"
+              :data="images"
+              @done="chooseFile"
+              @del="onDeleteItem"
+            />
+          </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 { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { GoodsCategory } from '@/api/shop/goodsCategory/model';
+  import {
+    addGoodsCategory,
+    updateGoodsCategory
+  } from '@/api/shop/goodsCategory';
+  import { ItemType } from 'ele-admin-pro/es/ele-image-upload/types';
+  import { FileRecord } from '@/api/system/file/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 已上传数据
+  const images = ref<ItemType[]>([]);
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: GoodsCategory | null;
+    // 上级分类id
+    parentId?: number;
+    // 全部分类数据
+    categoryList: GoodsCategory[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<GoodsCategory>({
+    categoryId: undefined,
+    title: '',
+    parentId: undefined,
+    image: '',
+    status: 0,
+    sortNumber: 100
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    title: [
+      {
+        required: true,
+        message: '请输入分类名称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    sortNumber: [
+      {
+        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 chooseFile = (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 save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const categoryForm = {
+          ...form,
+          // menuType 对应的值与后端不一致在前端处理
+          // menuType: form.menuType === 2 ? 1 : 0,
+          parentId: form.parentId || 0
+        };
+        const saveOrUpdate = isUpdate.value
+          ? updateGoodsCategory
+          : addGoodsCategory;
+        saveOrUpdate(categoryForm)
+          .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);
+  };
+
+  const updateHideValue = (value: boolean) => {
+    form.status = value ? 0 : 1;
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          assignFields({
+            ...props.data,
+            parentId:
+              props.data.parentId === 0 ? undefined : props.data.parentId
+          });
+          images.value = [];
+          if (props.data.image) {
+            images.value.push({
+              uid: `${props.data.categoryId}`,
+              url: props.data.image,
+              status: 'done'
+            });
+          }
+          isUpdate.value = true;
+        } else {
+          images.value = [];
+          form.parentId = props.parentId;
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  import * as icons from '@/layout/menu-icons';
+
+  export default {
+    components: icons,
+    data() {
+      return {
+        iconData: [
+          {
+            title: '已引入的图标',
+            icons: Object.keys(icons)
+          }
+        ]
+      };
+    }
+  };
+</script>

src/views/shop/goodsCategory/index.vue

@@ -0,0 +1,406 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="categoryId"
+        :columns="columns"
+        :datasource="datasource"
+        :parse-data="parseData"
+        :need-page="false"
+        :customRow="customRow"
+        :expand-icon-column-index="1"
+        :expanded-row-keys="expandedRowKeys"
+        :scroll="{ x: 1200 }"
+        cache-key="proGoodsCategoryTable"
+        @done="onDone"
+        @expand="onExpand"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-button type="primary" class="ele-btn-icon" @click="openEdit()">
+              <template #icon>
+                <plus-outlined />
+              </template>
+              <span>新建</span>
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="expandAll">
+              展开全部
+            </a-button>
+            <a-button type="dashed" class="ele-btn-icon" @click="foldAll">
+              折叠全部
+            </a-button>
+            <!-- 搜索表单 -->
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入搜索关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'path'">
+            <span class="ele-text-placeholder">{{ record.path }}</span>
+          </template>
+          <template v-if="column.key === 'component'">
+            <span class="ele-text-placeholder">{{ record.component }}</span>
+          </template>
+          <template v-if="column.key === 'type'">
+            <a-tag v-if="isExternalLink(record.path)" color="red">外链</a-tag>
+            <a-tag v-else-if="isExternalLink(record.component)" color="orange">
+              内链
+            </a-tag>
+            <a-tag v-else-if="isDirectory(record)" color="blue">目录</a-tag>
+            <a-tag v-else-if="record.type === 0">列表</a-tag>
+            <a-tag v-else-if="record.type === 1" color="purple">页面</a-tag>
+            <a-tag v-else-if="record.type === 2" color="orange">链接</a-tag>
+          </template>
+          <template v-else-if="column.key === 'title'">
+            <a-avatar
+              :size="26"
+              shape="square"
+              :src="`${record.image}`"
+              style="margin-right: 10px"
+              v-if="record.image"
+            />
+            <a @click="openPreview(`/goods/search?categoryId=${record.categoryId}`)">{{
+              record.title
+            }}</a>
+          </template>
+          <template v-if="column.key === 'showIndex'">
+            <a-space @click="onShowIndex(record)">
+              <span v-if="record.showIndex === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </template>
+          <template v-if="column.key === 'recommend'">
+            <a-space @click="onRecommend(record)">
+              <span v-if="record.recommend === 1" class="ele-text-success"
+                ><CheckOutlined
+              /></span>
+              <span v-else class="ele-text-placeholder"><CloseOutlined /></span>
+            </a-space>
+          </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="orange">隐藏</a-tag>
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(null, record.categoryId)">添加</a>
+              <a-divider type="vertical" />
+              <a @click="moveUp(record)">上移<ArrowUpOutlined /></a>
+              <a-divider type="vertical" />
+              <a @click="openEdit(record)">修改</a>
+              <a-divider type="vertical" />
+              <a-popconfirm
+                placement="topRight"
+                title="确定要删除此分类吗？"
+                @confirm="remove(record)"
+              >
+                <a class="ele-text-danger">删除</a>
+              </a-popconfirm>
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <category-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :parent-id="parentId"
+      :category-list="categoryData"
+      @done="reload"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import {
+    ArrowUpOutlined,
+    PlusOutlined,
+    CheckOutlined,
+    CloseOutlined
+  } from '@ant-design/icons-vue';
+  import type {
+    DatasourceFunction,
+    ColumnItem,
+    EleProTableDone
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import {
+    messageLoading,
+    toDateString,
+    isExternalLink,
+    toTreeData,
+    eachTreeData
+  } from 'ele-admin-pro/es';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import CategoryEdit from './components/category-edit.vue';
+  import {
+    listGoodsCategory,
+    removeGoodsCategory,
+    updateGoodsCategory
+  } from '@/api/shop/goodsCategory';
+  import type {
+    GoodsCategory,
+    GoodsCategoryParam
+  } from '@/api/shop/goodsCategory/model';
+  import { openNew, openPreview } from '@/utils/common';
+  import { getSiteInfo } from '@/api/layout';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'categoryId',
+      width: 80
+    },
+    {
+      title: '分类名称',
+      dataIndex: 'title',
+      key: 'title',
+      showSorterTooltip: false,
+      ellipsis: true
+    },
+    // {
+    //   title: '路由地址',
+    //   dataIndex: 'path',
+    //   key: 'path'
+    // },
+    // {
+    //   title: '组件路径',
+    //   dataIndex: 'component',
+    //   key: 'component'
+    // },
+    // {
+    //   title: '类型',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '首页显示',
+      dataIndex: 'showIndex',
+      key: 'showIndex',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '推荐',
+      dataIndex: 'recommend',
+      key: 'recommend',
+      align: 'center',
+      width: 120,
+      hideInTable: false
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+      width: 120,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['显示', '隐藏'][text]
+    },
+    {
+      title: '创建时间',
+      dataIndex: 'createTime',
+      showSorterTooltip: false,
+      ellipsis: true,
+      width: 180,
+      customRender: ({ text }) => toDateString(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 200,
+      align: 'center'
+    }
+  ]);
+
+  // 当前编辑数据
+  const current = ref<GoodsCategory | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 上级分类id
+  const parentId = ref<number>();
+  // 分类数据
+  const categoryData = ref<GoodsCategory[]>([]);
+  // 表格展开的行
+  const expandedRowKeys = ref<number[]>([]);
+  const searchText = ref('');
+  const tenantId = ref<number>();
+  const domain = ref<string>();
+
+  getSiteInfo().then((data) => {
+    tenantId.value = data.tenantId;
+    domain.value = data.domain;
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({ where }) => {
+    where.title = searchText.value;
+    return listGoodsCategory({ ...where });
+  };
+
+  const linkTo = (item: GoodsCategory) => {
+    if (item.children) {
+      return false;
+    }
+    const url = `http://${tenantId.value}.${domain.value}${item.path}`;
+    return openNew(url.replace(':id', String(item.categoryId)));
+  };
+
+  // 上移
+  const moveUp = (row?: GoodsCategory) => {
+    updateGoodsCategory({
+      categoryId: row?.categoryId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 数据转为树形结构 */
+  const parseData = (data: GoodsCategory[]) => {
+    return toTreeData({
+      data: data.map((d) => {
+        return { ...d, key: d.categoryId, value: d.categoryId };
+      }),
+      idField: 'categoryId',
+      parentIdField: 'parentId'
+    });
+  };
+
+  /* 表格渲染完成回调 */
+  const onDone: EleProTableDone<GoodsCategory> = ({ data }) => {
+    categoryData.value = data;
+  };
+
+  /* 刷新表格 */
+  const reload = (where?: GoodsCategoryParam) => {
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: GoodsCategory | null, id?: number) => {
+    current.value = row ?? null;
+    parentId.value = id;
+    showEdit.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: GoodsCategory) => {
+    if (row.children?.length) {
+      message.error('请先删除子节点');
+      return;
+    }
+    const hide = messageLoading('请求中..', 0);
+    removeGoodsCategory(row.categoryId)
+      .then((msg) => {
+        hide();
+        message.success(msg);
+        reload();
+      })
+      .catch((e) => {
+        hide();
+        message.error(e.message);
+      });
+  };
+
+  /* 展开全部 */
+  const expandAll = () => {
+    let keys: number[] = [];
+    eachTreeData(categoryData.value, (d) => {
+      if (d.children && d.children.length && d.categoryId) {
+        keys.push(d.categoryId);
+      }
+    });
+    expandedRowKeys.value = keys;
+  };
+
+  /* 折叠全部 */
+  const foldAll = () => {
+    expandedRowKeys.value = [];
+  };
+
+  /* 点击展开图标时触发 */
+  const onExpand = (expanded: boolean, record: GoodsCategory) => {
+    if (expanded) {
+      expandedRowKeys.value = [
+        ...expandedRowKeys.value,
+        record.categoryId as number
+      ];
+    } else {
+      expandedRowKeys.value = expandedRowKeys.value.filter(
+        (d) => d !== record.categoryId
+      );
+    }
+  };
+
+  /* 判断是否是目录 */
+  const isDirectory = (d: GoodsCategory) => {
+    return !!d.children?.length;
+  };
+
+  const onShowIndex = (row: GoodsCategory) => {
+    updateGoodsCategory({
+      ...row,
+      showIndex: row.showIndex == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  const onRecommend = (row: GoodsCategory) => {
+    updateGoodsCategory({
+      ...row,
+      recommend: row.recommend == 1 ? 0 : 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: GoodsCategory) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsCategory'
+  };
+</script>

src/views/shop/goodsCategory/preview/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <a-card :title="title" class="ele-body">
+    <a-list item-layout="vertical" :pagination="pagination" :data-source="list">
+      <template #renderItem="{ item }">
+        <a-list-item key="item.title">
+          <template #actions>
+            <span v-for="{ icon, text } in actions" :key="icon">
+              <component :is="icon" style="margin-right: 8px" />
+              {{ text }}
+            </span>
+          </template>
+          <template #extra>
+            <img
+              width="100"
+              height="100"
+              alt="logo"
+              v-if="item.image"
+              :src="item.image"
+            />
+          </template>
+          <a-list-item-meta :description="item.title">
+            <template #title>
+              <a @click="openNew('/cms/article/' + item.articleId)">{{
+                item.title
+              }}</a>
+            </template>
+          </a-list-item-meta>
+        </a-list-item>
+      </template>
+    </a-list>
+  </a-card>
+</template>
+
+<script lang="ts" setup>
+  import { ref, unref, watch } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { pageArticle } from '@/api/cms/article';
+  import { Article } from '@/api/cms/article/model';
+  import { getArticleCategory } from '@/api/cms/category';
+  import { ArticleCategory } from '@/api/cms/category/model';
+
+  import {
+    StarOutlined,
+    LikeOutlined,
+    MessageOutlined
+  } from '@ant-design/icons-vue';
+  import { openNew } from '@/utils/common';
+  const { currentRoute } = useRouter();
+  const title = ref<string>('');
+  const categoryId = ref(0);
+  const category = ref<ArticleCategory | any>();
+  const list = ref<Article[]>([]);
+  const spinning = ref(true);
+  const page = ref(1);
+
+  const pagination = {
+    onChange: (index: number) => {
+      page.value = index;
+      reload();
+    },
+    total: 10,
+    pageSize: 10
+  };
+
+  const actions: Record<string, any>[] = [
+    { icon: StarOutlined, text: '156' },
+    { icon: LikeOutlined, text: '156' },
+    { icon: MessageOutlined, text: '2' }
+  ];
+
+  /**
+   * 加载数据
+   */
+  const reload = () => {
+    // 加载文章分类
+    getArticleCategory(categoryId.value).then((data) => {
+      category.value = data;
+      // 修改页签标题
+      if (data.title) {
+        title.value = data.title;
+        setPageTabTitle(data.title);
+      }
+    });
+    // 加载文章列表
+    pageArticle({ categoryId: categoryId.value, page: page.value }).then(
+      (data) => {
+        if (data?.list) {
+          pagination.total = data.count;
+          list.value = data.list;
+        }
+        spinning.value = false;
+      }
+    );
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { params } = unref(route);
+      const { id } = params;
+      if (id) {
+        categoryId.value = Number(id);
+        reload();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'ArticleCategoryPreview'
+  };
+</script>
+<style>
+  body {
+    background: #f0f2f5;
+  }
+  .ele-body {
+    margin: 0 auto;
+    max-width: 1000px;
+  }
+</style>

src/views/shop/goodsSku/components/goodsSkuEdit.vue

@@ -0,0 +1,165 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :visible="visible"
+    :maskClosable="false"
+    :maxable="maxable"
+    :title="isUpdate ? '编辑商品sku列表' : '添加商品sku列表'"
+    :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="商品sku列表名称" name="goodsSkuName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入商品sku列表"
+          v-model:value="form.goodsSkuName"
+        />
+      </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="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="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>
+  </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 { addGoodsSku, updateGoodsSku } from '@/api/shop/goodsSku';
+  import { GoodsSku } from '@/api/shop/goodsSku/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  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;
+    // 修改回显的数据
+    data?: GoodsSku | 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 form = reactive<GoodsSku>({
+    goodsSkuId: undefined,
+    goodsSkuName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    goodsSkuName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商品sku列表名称',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  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 ? updateGoodsSku : addGoodsSku;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/goodsSku/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/goodsSku/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsSkuId"
+          :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 === '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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsSkuEdit 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 type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import GoodsSkuEdit from './components/goodsSkuEdit.vue';
+  import { pageGoodsSku, removeGoodsSku, removeBatchGoodsSku } from '@/api/shop/goodsSku';
+  import type { GoodsSku, GoodsSkuParam } from '@/api/shop/goodsSku/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<GoodsSku[]>([]);
+  // 当前编辑数据
+  const current = ref<GoodsSku | 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 pageGoodsSku({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'goodsSkuId'
+    },
+    {
+      title: '名称',
+      dataIndex: 'goodsSkuname',
+      key: 'goodsSkuname'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsSkuParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: GoodsSku) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: GoodsSku) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoodsSku(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);
+        removeBatchGoodsSku(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: GoodsSku) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsSku'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/goodsSpec/components/goodsSpecEdit.vue

@@ -0,0 +1,165 @@
+<!-- 编辑弹窗 -->
+<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="goodsSpecName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入商品多规格"
+          v-model:value="form.goodsSpecName"
+        />
+      </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="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="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>
+  </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 { addGoodsSpec, updateGoodsSpec } from '@/api/shop/goodsSpec';
+  import { GoodsSpec } from '@/api/shop/goodsSpec/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  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;
+    // 修改回显的数据
+    data?: GoodsSpec | 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 form = reactive<GoodsSpec>({
+    goodsSpecId: undefined,
+    goodsSpecName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    goodsSpecName: [
+      {
+        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;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateGoodsSpec : addGoodsSpec;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/goodsSpec/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/goodsSpec/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsSpecId"
+          :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 === '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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsSpecEdit 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 type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import GoodsSpecEdit from './components/goodsSpecEdit.vue';
+  import { pageGoodsSpec, removeGoodsSpec, removeBatchGoodsSpec } from '@/api/shop/goodsSpec';
+  import type { GoodsSpec, GoodsSpecParam } from '@/api/shop/goodsSpec/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<GoodsSpec[]>([]);
+  // 当前编辑数据
+  const current = ref<GoodsSpec | 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 pageGoodsSpec({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'goodsSpecId'
+    },
+    {
+      title: '名称',
+      dataIndex: 'goodsSpecname',
+      key: 'goodsSpecname'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsSpecParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: GoodsSpec) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: GoodsSpec) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoodsSpec(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);
+        removeBatchGoodsSpec(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: GoodsSpec) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsSpec'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/goodsSpecRel/components/goodsSpecRelEdit.vue

@@ -0,0 +1,165 @@
+<!-- 编辑弹窗 -->
+<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="goodsSpecRelName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入商品规格值"
+          v-model:value="form.goodsSpecRelName"
+        />
+      </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="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="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>
+  </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 { addGoodsSpecRel, updateGoodsSpecRel } from '@/api/shop/goodsSpecRel';
+  import { GoodsSpecRel } from '@/api/shop/goodsSpecRel/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  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;
+    // 修改回显的数据
+    data?: GoodsSpecRel | 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 form = reactive<GoodsSpecRel>({
+    goodsSpecRelId: undefined,
+    goodsSpecRelName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    goodsSpecRelName: [
+      {
+        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;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateGoodsSpecRel : addGoodsSpecRel;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/goodsSpecRel/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/goodsSpecRel/index.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="goodsSpecRelId"
+          :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 === '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>
+
+      <!-- 编辑弹窗 -->
+      <GoodsSpecRelEdit 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 type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import Search from './components/search.vue';
+  import GoodsSpecRelEdit from './components/goodsSpecRelEdit.vue';
+  import { pageGoodsSpecRel, removeGoodsSpecRel, removeBatchGoodsSpecRel } from '@/api/shop/goodsSpecRel';
+  import type { GoodsSpecRel, GoodsSpecRelParam } from '@/api/shop/goodsSpecRel/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<GoodsSpecRel[]>([]);
+  // 当前编辑数据
+  const current = ref<GoodsSpecRel | 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 pageGoodsSpecRel({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'goodsSpecRelId'
+    },
+    {
+      title: '名称',
+      dataIndex: 'goodsSpecRelname',
+      key: 'goodsSpecRelname'
+    },
+    {
+      title: '描述',
+      dataIndex: 'comments',
+      ellipsis: true
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      width: 120,
+      align: 'center',
+      key: 'status'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: GoodsSpecRelParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: GoodsSpecRel) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: GoodsSpecRel) => {
+    const hide = message.loading('请求中..', 0);
+    removeGoodsSpecRel(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);
+        removeBatchGoodsSpecRel(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: GoodsSpecRel) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'GoodsSpecRel'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/merchant/components/merchantEdit.vue

@@ -0,0 +1,474 @@
+<!-- 编辑弹窗 -->
+<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="image">
+        <SelectFile
+          :placeholder="`请选择图片`"
+          :limit="1"
+          :data="images"
+          @done="chooseImage"
+          @del="onDeleteItem"
+        />
+      </a-form-item>
+      <a-form-item label="商户名称" name="merchantName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="xxx店"
+          v-model:value="form.merchantName"
+        />
+      </a-form-item>
+      <a-form-item
+        label="商户手机号"
+        name="phone"
+        extra="手机号码将用做于商户端的登录账号请填写真实手机号码"
+      >
+        <a-input
+          allow-clear
+          :maxlength="11"
+          placeholder="请输入商户手机号"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="商户姓名" name="realName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入商户姓名"
+          v-model:value="form.realName"
+        />
+      </a-form-item>
+      <a-form-item label="店铺类型" name="shopType">
+        <SelectMerchantType
+          :placeholder="`请选择店铺类型`"
+          v-model:value="form.shopType"
+          @done="chooseShopType"
+        />
+      </a-form-item>
+      <a-form-item label="商户分类" name="category">
+        <industry-select
+          v-model:value="form.category"
+          valueField="label"
+          placeholder="请选择所属行业"
+          class="ele-fluid"
+          @change="onIndustry"
+        />
+      </a-form-item>
+      <a-form-item label="商户坐标" name="lngAndLat">
+        <div class="flex-sb">
+          <a-input
+            allow-clear
+            placeholder="请选择所在位置"
+            v-model:value="form.lngAndLat"
+            disabled
+          />
+          <a-button
+            class="ele-btn-icon"
+            style="margin-left: 10px"
+            @click="openMapPicker"
+          >
+            打开地图位置选择器
+          </a-button>
+        </div>
+      </a-form-item>
+      <a-form-item label="商户地址" name="address">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="请输入商户地址"
+          v-model:value="form.address"
+        />
+      </a-form-item>
+      <a-form-item label="手续费(%)" name="commission">
+        <a-input-number
+          :step="1"
+          :max="100"
+          :min="0.0"
+          :precision="2"
+          class="ele-fluid"
+          placeholder="请输入手续费"
+          v-model:value="form.commission"
+        />
+      </a-form-item>
+      <a-form-item label="关键字" name="keywords">
+        <a-select
+          v-model:value="form.keywords"
+          mode="tags"
+          placeholder="输入关键词后回车"
+        />
+      </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="ownStore">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.ownStore === 1"
+          @update:checked="updateOwnStore"
+        />
+      </a-form-item>
+      <a-form-item label="是否推荐" name="recommend">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.recommend === 1"
+          @update:checked="updateRecommend"
+        />
+      </a-form-item>
+      <a-form-item label="是否需要审核" name="goodsReview">
+        <a-switch
+          checked-children="是"
+          un-checked-children="否"
+          :checked="form.goodsReview === 1"
+          @update:checked="updateGoodsReview"
+        />
+      </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="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+    </a-form>
+  </ele-modal>
+  <!-- 地图位置选择弹窗 -->
+  <ele-map-picker
+    :need-city="true"
+    :dark-mode="darkMode"
+    v-model:visible="showMap"
+    :center="[108.374959, 22.767024]"
+    :search-type="1"
+    :zoom="12"
+    @done="onDone"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form, message } from 'ant-design-vue';
+  import { assignObject, uuid, phoneReg } from 'ele-admin-pro';
+  import { addMerchant, updateMerchant } from '@/api/shop/merchant';
+  import { Merchant } from '@/api/shop/merchant/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 { MerchantType } from '@/api/shop/merchantType/model';
+  import { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
+  import { listRoles } from '@/api/system/role';
+  import { getTenantId } from '@/utils/domain';
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive, darkMode } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Merchant | 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 showMap = ref(false);
+
+  // 用户信息
+  const form = reactive<Merchant>({
+    merchantId: undefined,
+    merchantName: undefined,
+    image: undefined,
+    phone: undefined,
+    realName: undefined,
+    shopType: undefined,
+    category: undefined,
+    province: '',
+    city: '',
+    region: '',
+    address: '',
+    lngAndLat: '',
+    commission: 0,
+    keywords: undefined,
+    files: undefined,
+    ownStore: undefined,
+    recommend: undefined,
+    goodsReview: 1,
+    comments: '',
+    adminUrl: '',
+    status: 0,
+    sortNumber: 100,
+    roleId: undefined,
+    roleName: '',
+    tenantId: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户名称',
+        trigger: 'blur'
+      }
+    ],
+    category: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户分类',
+        trigger: 'blur'
+      }
+    ],
+    lngAndLat: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户坐标',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户姓名',
+        trigger: 'blur'
+      }
+    ],
+    shopType: [
+      {
+        required: true,
+        type: 'string',
+        message: '请选择店铺类型',
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        message: '请输入手机号',
+        trigger: 'blur'
+      },
+      {
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string'
+      }
+    ]
+  });
+
+  const chooseShopType = (data: MerchantType) => {
+    form.shopType = data.name;
+  };
+
+  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 chooseFiles = (data: FileRecord) => {
+    files.value.push({
+      uid: data.id,
+      url: data.path,
+      status: 'done'
+    });
+  };
+
+  /* 打开位置选择 */
+  const openMapPicker = () => {
+    showMap.value = true;
+  };
+
+  /* 地图选择后回调 */
+  const onDone = (location: CenterPoint) => {
+    // city.value = [
+    //   `${location.city?.province}`,
+    //   `${location.city?.city}`,
+    //   `${location.city?.district}`
+    // ];
+    form.province = `${location.city?.province}`;
+    form.city = `${location.city?.city}`;
+    form.region = `${location.city?.district}`;
+    form.address = `${location.address}`;
+    form.lngAndLat = `${location.lng},${location.lat}`;
+    showMap.value = false;
+  };
+
+  const onDeleteFiles = (index: number) => {
+    files.value.splice(index, 1);
+  };
+
+  const updateOwnStore = (value: boolean) => {
+    form.ownStore = value ? 1 : 0;
+  };
+
+  const updateRecommend = (value: boolean) => {
+    form.recommend = value ? 1 : 0;
+  };
+
+  const updateGoodsReview = (value: boolean) => {
+    form.goodsReview = value ? 1 : 0;
+  };
+
+  const onIndustry = (item: any) => {
+    form.category = item[0] + '/' + item[1];
+  };
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          keywords: JSON.stringify(form.keywords),
+          files: JSON.stringify(files.value)
+        };
+        const saveOrUpdate = isUpdate.value ? updateMerchant : addMerchant;
+        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 = [];
+        if (props.data) {
+          isUpdate.value = true;
+          assignObject(form, props.data);
+          if (props.data.image) {
+            images.value.push({
+              uid: uuid(),
+              url: props.data.image,
+              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'
+              });
+            });
+          }
+          if (props.data.keywords) {
+            form.keywords = JSON.parse(props.data.keywords);
+          }
+        } else {
+          isUpdate.value = false;
+        }
+        // 获取商户管理员的roleId
+        listRoles({ roleCode: 'merchant' }).then((res) => {
+          form.roleId = res[0].roleId;
+          form.roleName = res[0].roleName;
+          form.tenantId = Number(localStorage.getItem('TenantId'));
+        });
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>
+
+<style lang="less" scoped>
+  .flex-sb {
+    display: flex;
+    justify-content: space-between;
+  }
+</style>

src/views/shop/merchant/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/merchant/index.vue

@@ -0,0 +1,259 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="merchantId"
+          :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="openNew(record.adminUrl)">商家后台</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>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <MerchantEdit 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 MerchantEdit from './components/merchantEdit.vue';
+  import { pageMerchant, removeMerchant, removeBatchMerchant } from '@/api/shop/merchant';
+  import type { Merchant, MerchantParam } from '@/api/shop/merchant/model';
+  import {openNew, openPreview} from "@/utils/common";
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Merchant[]>([]);
+  // 当前编辑数据
+  const current = ref<Merchant | 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 pageMerchant({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'merchantId',
+      key: 'merchantId',
+      width: 90,
+    },
+    {
+      title: '商户名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      align: 'center',
+    },
+    {
+      title: '商户图标',
+      dataIndex: 'image',
+      key: 'image',
+      align: 'center',
+    },
+    {
+      title: '商户姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center',
+    },
+    {
+      title: '商户手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '店铺类型',
+      dataIndex: 'shopType',
+      key: 'shopType',
+      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?: MerchantParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Merchant) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Merchant) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchant(row.merchantId)
+      .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);
+        removeBatchMerchant(selection.value.map((d) => d.merchantId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Merchant) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Merchant'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/merchantAccount/components/merchantAccountEdit.vue

@@ -0,0 +1,249 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="600"
+    :visible="visible"
+    :maskClosable="false"
+    :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="merchantId">
+        <SelectMerchant
+          :placeholder="`选择商户`"
+          class="input-item"
+          v-model:value="form.merchantName"
+          @done="chooseMerchantId"
+        />
+      </a-form-item>
+      <a-form-item label="选择角色" name="roleId">
+        <SelectRole
+          :placeholder="`选择角色`"
+          class="input-item"
+          :type="`merchant`"
+          v-model:value="form.roleName"
+          @done="chooseRoleId"
+        />
+      </a-form-item>
+      <a-form-item label="账号" name="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入手机号码"
+          maxlength="11"
+          :disabled="isUpdate"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="密码" name="password" v-if="!isUpdate">
+        <a-input
+          allow-clear
+          placeholder="请输入登录密码"
+          :disabled="isUpdate"
+          v-model:value="form.password"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="realName">
+        <a-input
+          allow-clear
+          placeholder="请输入真实姓名"
+          v-model:value="form.realName"
+        />
+      </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 { addMerchantAccount, updateMerchantAccount } from '@/api/shop/merchantAccount';
+  import { MerchantAccount } from '@/api/shop/merchantAccount/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 {DictData} from "@/api/system/dict-data/model";
+  import {Merchant} from "@/api/shop/merchant/model";
+  import {Role} from "@/api/system/role/model";
+
+  // 是否是修改
+  const isUpdate = ref(false);
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: MerchantAccount | 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<MerchantAccount>({
+    id: undefined,
+    phone: undefined,
+    realName: undefined,
+    merchantId: undefined,
+    merchantName: '',
+    userId: undefined,
+    roleId: undefined,
+    roleName: '',
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantAccountName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写商户账号名称',
+        trigger: 'blur'
+      }
+    ],
+    merchantId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择商户',
+        trigger: 'blur'
+      }
+    ],
+    roleId: [
+      {
+        required: true,
+        type: 'number',
+        message: '请选择角色',
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写手机号码',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        message: '请输入登录密码',
+        trigger: 'blur'
+      }
+    ],
+    realName: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写真实姓名',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  /* 搜索 */
+  const chooseMerchantId = (item: Merchant) => {
+    form.merchantName = item.merchantName;
+    form.merchantId = item.merchantId;
+  };
+
+  const chooseRoleId = (item: Role) => {
+    form.roleId = item.roleId;
+    form.roleName = item.roleName;
+  }
+
+  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 ? updateMerchantAccount : addMerchantAccount;
+        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 {
+          resetFields();
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/merchantAccount/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/merchantAccount/index.vue

@@ -0,0 +1,230 @@
+<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>
+
+      <!-- 编辑弹窗 -->
+      <MerchantAccountEdit 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 MerchantAccountEdit from './components/merchantAccountEdit.vue';
+  import { pageMerchantAccount, removeMerchantAccount, removeBatchMerchantAccount } from '@/api/shop/merchantAccount';
+  import type { MerchantAccount, MerchantAccountParam } from '@/api/shop/merchantAccount/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MerchantAccount[]>([]);
+  // 当前编辑数据
+  const current = ref<MerchantAccount | 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 pageMerchantAccount({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'id',
+      key: 'id',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '账号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '真实姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center',
+    },
+    {
+      title: '角色',
+      dataIndex: 'roleName',
+      key: 'roleName',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MerchantAccountParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MerchantAccount) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MerchantAccount) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchantAccount(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);
+        removeBatchMerchantAccount(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: MerchantAccount) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MerchantAccount'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/merchantApply/components/merchantApplyEdit.vue

@@ -0,0 +1,288 @@
+<!-- 编辑弹窗 -->
+<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="merchantName">
+        <a-input
+          allow-clear
+          placeholder="请输入商户名称"
+          v-model:value="form.merchantName"
+        />
+      </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="phone">
+        <a-input
+          allow-clear
+          placeholder="请输入商户手机号"
+          v-model:value="form.phone"
+        />
+      </a-form-item>
+      <a-form-item label="商户姓名" name="realName">
+        <a-input
+          allow-clear
+          placeholder="请输入商户姓名"
+          v-model:value="form.realName"
+        />
+      </a-form-item>
+      <a-form-item label="店铺类型" name="shopType">
+        <a-input
+          allow-clear
+          placeholder="请输入店铺类型"
+          v-model:value="form.shopType"
+        />
+      </a-form-item>
+      <a-form-item label="商户分类" name="category">
+        <a-input
+          allow-clear
+          placeholder="请输入商户分类"
+          v-model:value="form.category"
+        />
+      </a-form-item>
+      <a-form-item label="手续费" name="commission">
+        <a-input
+          allow-clear
+          placeholder="请输入手续费"
+          v-model:value="form.commission"
+        />
+      </a-form-item>
+      <a-form-item label="关键字" name="keywords">
+        <a-input
+          allow-clear
+          placeholder="请输入关键字"
+          v-model:value="form.keywords"
+        />
+      </a-form-item>
+      <a-form-item label="资质图片" name="files">
+        <a-input
+          allow-clear
+          placeholder="请输入资质图片"
+          v-model:value="form.files"
+        />
+      </a-form-item>
+      <a-form-item label="是否自营" name="ownStore">
+        <a-input
+          allow-clear
+          placeholder="请输入是否自营"
+          v-model:value="form.ownStore"
+        />
+      </a-form-item>
+      <a-form-item label="是否推荐" name="recommend">
+        <a-input
+          allow-clear
+          placeholder="请输入是否推荐"
+          v-model:value="form.recommend"
+        />
+      </a-form-item>
+      <a-form-item label="是否需要审核" name="goodsReview">
+        <a-input
+          allow-clear
+          placeholder="请输入是否需要审核"
+          v-model:value="form.goodsReview"
+        />
+      </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 { addMerchantApply, updateMerchantApply } from '@/api/shop/merchantApply';
+  import { MerchantApply } from '@/api/shop/merchantApply/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?: MerchantApply | 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<MerchantApply>({
+    applyId: undefined,
+    merchantName: undefined,
+    image: undefined,
+    phone: undefined,
+    realName: undefined,
+    shopType: undefined,
+    category: undefined,
+    commission: undefined,
+    keywords: undefined,
+    files: undefined,
+    ownStore: undefined,
+    recommend: undefined,
+    goodsReview: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    merchantApplyId: undefined,
+    merchantApplyName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantApplyName: [
+      {
+        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 ? updateMerchantApply : addMerchantApply;
+        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/merchantApply/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/merchantApply/index.vue

@@ -0,0 +1,235 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="merchantApplyId"
+          :columns="columns"
+          :datasource="datasource"
+          :customRow="customRow"
+          tool-class="ele-toolbar-form"
+          class="sys-org-table"
+        >
+          <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="orange">待处理</a-tag>
+              <a-tag v-if="record.status === 1" color="green">已通过</a-tag>
+            </template>
+            <template v-if="column.key === 'action'">
+              <a-space>
+                <a-button :size="`small`" @click="openEdit(record)">详情</a-button>
+                <a-button :size="`small`"
+                  title="确定要删除此记录吗？"
+                  :disabled="record.status === 1"
+                  @confirm="remove(record)"
+                >
+                  <a class="ele-text-danger">删除</a>
+                </a-button>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <MerchantApplyEdit 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 MerchantApplyEdit from './components/merchantApplyEdit.vue';
+  import { pageMerchantApply, removeMerchantApply, removeBatchMerchantApply } from '@/api/shop/merchantApply';
+  import type { MerchantApply, MerchantApplyParam } from '@/api/shop/merchantApply/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MerchantApply[]>([]);
+  // 当前编辑数据
+  const current = ref<MerchantApply | 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 pageMerchantApply({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'applyId',
+      key: 'applyId',
+      width: 90,
+    },
+    {
+      title: '商户名称',
+      dataIndex: 'merchantName',
+      key: 'merchantName',
+      align: 'center',
+    },
+    {
+      title: '商户姓名',
+      dataIndex: 'realName',
+      key: 'realName',
+      align: 'center',
+    },
+    {
+      title: '商户手机号',
+      dataIndex: 'phone',
+      key: 'phone',
+      align: 'center',
+    },
+    {
+      title: '申请时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      sorter: true,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:MM:ss')
+    },
+    {
+      title: '店铺类型',
+      dataIndex: 'shopType',
+      key: 'shopType',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: MerchantApplyParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MerchantApply) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MerchantApply) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchantApply(row.merchantApplyId)
+      .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);
+        removeBatchMerchantApply(selection.value.map((d) => d.merchantApplyId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: MerchantApply) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MerchantApply'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/merchantType/components/merchantTypeEdit.vue

@@ -0,0 +1,197 @@
+<!-- 编辑弹窗 -->
+<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
+          :maxlength="100"
+          placeholder="请输入店铺类型"
+          v-model:value="form.name"
+        />
+      </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 { addMerchantType, updateMerchantType } from '@/api/shop/merchantType';
+  import { MerchantType } from '@/api/shop/merchantType/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?: MerchantType | 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<MerchantType>({
+    id: undefined,
+    name: undefined,
+    comments: undefined,
+    status: undefined,
+    sortNumber: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    merchantTypeId: undefined,
+    merchantTypeName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    merchantTypeName: [
+      {
+        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 ? updateMerchantType : addMerchantType;
+        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/merchantType/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/merchantType/index.vue

@@ -0,0 +1,239 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="merchantTypeId"
+          :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>
+
+      <!-- 编辑弹窗 -->
+      <MerchantTypeEdit 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 MerchantTypeEdit from './components/merchantTypeEdit.vue';
+  import { pageMerchantType, removeMerchantType, removeBatchMerchantType } from '@/api/shop/merchantType';
+  import type { MerchantType, MerchantTypeParam } from '@/api/shop/merchantType/model';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<MerchantType[]>([]);
+  // 当前编辑数据
+  const current = ref<MerchantType | 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 pageMerchantType({
+      ...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: '店铺入驻条件',
+      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?: MerchantTypeParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: MerchantType) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: MerchantType) => {
+    const hide = message.loading('请求中..', 0);
+    removeMerchantType(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);
+        removeBatchMerchantType(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: MerchantType) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'MerchantType'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/order/components/orderEdit.vue

@@ -0,0 +1,396 @@
+<!-- 编辑弹窗 -->
+<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="orderNo">
+        <a-input
+          allow-clear
+          placeholder="请输入订单号"
+          v-model:value="form.orderNo"
+        />
+      </a-form-item>
+      <a-form-item label="类型" name="type">
+        <a-input
+          allow-clear
+          placeholder="请输入类型"
+          v-model:value="form.type"
+        />
+      </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="payPrice">
+        <a-input
+          allow-clear
+          placeholder="请输入实际付款金额(包含运费)"
+          v-model:value="form.payPrice"
+        />
+      </a-form-item>
+      <a-form-item label="套餐ID" name="planId">
+        <a-input
+          allow-clear
+          placeholder="请输入套餐ID"
+          v-model:value="form.planId"
+        />
+      </a-form-item>
+      <a-form-item label="卡ID" name="priceId">
+        <a-input
+          allow-clear
+          placeholder="请输入卡ID"
+          v-model:value="form.priceId"
+        />
+      </a-form-item>
+      <a-form-item label="获得的会员等级" name="gradeId">
+        <a-input
+          allow-clear
+          placeholder="请输入获得的会员等级"
+          v-model:value="form.gradeId"
+        />
+      </a-form-item>
+      <a-form-item label="卡名称" name="priceName">
+        <a-input
+          allow-clear
+          placeholder="请输入卡名称"
+          v-model:value="form.priceName"
+        />
+      </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="持有者ID" name="memberId">
+        <a-input
+          allow-clear
+          placeholder="请输入持有者ID"
+          v-model:value="form.memberId"
+        />
+      </a-form-item>
+      <a-form-item label="真实姓名" name="realName">
+        <a-input
+          allow-clear
+          placeholder="请输入真实姓名"
+          v-model:value="form.realName"
+        />
+      </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="payTime">
+        <a-input
+          allow-clear
+          placeholder="请输入付款时间"
+          v-model:value="form.payTime"
+        />
+      </a-form-item>
+      <a-form-item label="支付流水号" name="transactionId">
+        <a-input
+          allow-clear
+          placeholder="请输入支付流水号"
+          v-model:value="form.transactionId"
+        />
+      </a-form-item>
+      <a-form-item label="付款状态(10未付款 20已付款)" name="payStatus">
+        <a-input
+          allow-clear
+          placeholder="请输入付款状态(10未付款 20已付款)"
+          v-model:value="form.payStatus"
+        />
+      </a-form-item>
+      <a-form-item label="到期时间" name="expirationTime">
+        <a-input
+          allow-clear
+          placeholder="请输入到期时间"
+          v-model:value="form.expirationTime"
+        />
+      </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="region">
+        <a-input
+          allow-clear
+          placeholder="请输入所在辖区"
+          v-model:value="form.region"
+        />
+      </a-form-item>
+      <a-form-item label="所在地区" name="area">
+        <a-input
+          allow-clear
+          placeholder="请输入所在地区"
+          v-model:value="form.area"
+        />
+      </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="refundImage">
+        <a-input
+          allow-clear
+          placeholder="请输入退款凭证"
+          v-model:value="form.refundImage"
+        />
+      </a-form-item>
+      <a-form-item label="退款理由" name="refundContent">
+        <a-input
+          allow-clear
+          placeholder="请输入退款理由"
+          v-model:value="form.refundContent"
+        />
+      </a-form-item>
+      <a-form-item label="订单是否已结算(0未结算 1已结算)" name="isSettled">
+        <a-input
+          allow-clear
+          placeholder="请输入订单是否已结算(0未结算 1已结算)"
+          v-model:value="form.isSettled"
+        />
+      </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="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="请输入描述"
+          v-model:value="form.comments"
+        />
+      </a-form-item>
+      <a-form-item label="状态, 0正常, 1冻结" 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="修改时间" 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 { addOrder, updateOrder } from '@/api/shop/order';
+  import { Order } from '@/api/shop/order/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?: Order | 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<Order>({
+    orderId: undefined,
+    orderNo: undefined,
+    type: undefined,
+    money: undefined,
+    payPrice: undefined,
+    planId: undefined,
+    priceId: undefined,
+    gradeId: undefined,
+    priceName: undefined,
+    userId: undefined,
+    memberId: undefined,
+    realName: undefined,
+    phone: undefined,
+    payTime: undefined,
+    transactionId: undefined,
+    payStatus: undefined,
+    expirationTime: undefined,
+    province: undefined,
+    city: undefined,
+    region: undefined,
+    area: undefined,
+    address: undefined,
+    refundImage: undefined,
+    refundContent: undefined,
+    isSettled: undefined,
+    sortNumber: undefined,
+    comments: undefined,
+    status: undefined,
+    deleted: undefined,
+    tenantId: undefined,
+    createTime: undefined,
+    updateTime: undefined,
+    orderId: undefined,
+    orderName: '',
+    status: 0,
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    orderName: [
+      {
+        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 ? 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);
+          });
+      })
+      .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/order/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/order/index.vue

@@ -0,0 +1,283 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="orderId"
+          :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 === 'userId'">
+              {{ record.nickname }}
+            </template>
+            <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>
+                <template v-if="hasRole('superAdmin') || hasRole('admin')">
+                  <a-divider type="vertical" />
+                  <a-popconfirm
+                    title="确定要删除此记录吗？"
+                    @confirm="remove(record)"
+                  >
+                    <a class="ele-text-danger">删除</a>
+                  </a-popconfirm>
+                </template>
+              </a-space>
+            </template>
+          </template>
+        </ele-pro-table>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <OrderEdit 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 OrderEdit from './components/orderEdit.vue';
+  import { pageOrder, removeOrder, removeBatchOrder } from '@/api/shop/order';
+  import type { Order, OrderParam } from '@/api/shop/order/model';
+  import {hasRole} from "@/utils/permission";
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Order[]>([]);
+  // 当前编辑数据
+  const current = ref<Order | 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 pageOrder({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'orderId',
+      key: 'orderId',
+      align: 'center',
+      width: 90,
+    },
+    {
+      title: '订单号',
+      dataIndex: 'orderNo',
+      key: 'orderNo',
+      align: 'center',
+    },
+    // {
+    //   title: '类型',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   customRender: ({ text }) => ['实物商品', '虚拟商品'][text]
+    // },
+    {
+      title: '用户昵称',
+      dataIndex: 'userId',
+      key: 'userId',
+      align: 'center',
+    },
+    {
+      title: '实付金额',
+      dataIndex: 'payPrice',
+      key: 'payPrice',
+      align: 'center',
+    },
+    {
+      title: '支付方式',
+      dataIndex: 'payMethod',
+      key: 'payMethod',
+      align: 'center',
+    },
+    {
+      title: '付款时间',
+      dataIndex: 'payTime',
+      key: 'payTime',
+      align: 'center',
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd')
+    },
+    {
+      title: '付款状态',
+      dataIndex: 'payStatus',
+      key: 'payStatus',
+      align: 'center'
+    },
+    {
+      title: '排序',
+      dataIndex: 'sortNumber',
+      key: 'sortNumber',
+      align: 'center',
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments',
+      align: 'center',
+    },
+    {
+      title: '状态',
+      dataIndex: 'status',
+      key: 'status',
+      align: 'center',
+    },
+    {
+      title: '下单时间',
+      dataIndex: 'createTime',
+      key: 'createTime',
+      align: 'center',
+      width: 180,
+      ellipsis: true,
+      customRender: ({ text }) => toDateString(text, 'yyyy-MM-dd HH:MM:ss')
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: OrderParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Order) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Order) => {
+    const hide = message.loading('请求中..', 0);
+    removeOrder(row.orderId)
+      .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);
+        removeBatchOrder(selection.value.map((d) => d.orderId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Order) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Order'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/spec/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/spec/components/specEdit.vue

@@ -0,0 +1,163 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="500"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑商品规格' : '添加商品规格'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="规格名称" name="specName">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="机型"
+          v-model:value="form.specName"
+          @pressEnter="save"
+        />
+      </a-form-item>
+      <a-form-item label="排序号" name="sortNumber" v-if="isUpdate">
+        <a-input-number
+          :min="0"
+          :max="9999"
+          class="ele-fluid"
+          placeholder="请输入排序号"
+          v-model:value="form.sortNumber"
+        />
+      </a-form-item>
+      <a-form-item label="描述" name="comments">
+        <a-textarea
+          :rows="4"
+          :maxlength="200"
+          placeholder="iphone15"
+          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>
+  </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 { addSpec, updateSpec } from '@/api/shop/spec';
+  import { Spec } from '@/api/shop/spec/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  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;
+    // 修改回显的数据
+    data?: Spec | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<Spec>({
+    specId: undefined,
+    specName: '',
+    comments: '',
+    sortNumber: 100,
+    status: 0
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    specName: [
+      {
+        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;
+        const formData = {
+          ...form
+        };
+        const saveOrUpdate = isUpdate.value ? updateSpec : addSpec;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/spec/index.vue

@@ -0,0 +1,250 @@
+<template>
+  <div class="page">
+    <div class="ele-body">
+      <a-card :bordered="false" :body-style="{ padding: '16px' }">
+        <ele-pro-table
+          ref="tableRef"
+          row-key="specId"
+          :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 === '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="openSpecValue(record)">规格值</a>
+                <a-divider type="vertical" />
+                <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>
+      </a-card>
+
+      <!-- 编辑弹窗 -->
+      <SpecEdit v-model:visible="showEdit" :data="current" @done="reload" />
+
+      <!-- 规则值弹窗 -->
+      <SpecValueEdit
+        v-model:visible="showSpecValueEdit"
+        :data="current"
+        @done="reload"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref } from 'vue';
+  import { message, Modal } from 'ant-design-vue';
+  import {
+    ArrowUpOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { 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 SpecEdit from './components/specEdit.vue';
+  import {
+    pageSpec,
+    removeSpec,
+    removeBatchSpec,
+    updateSpec
+  } from '@/api/shop/spec';
+  import type { Spec, SpecParam } from '@/api/shop/spec/model';
+  import SpecValueEdit from '../specValue/index.vue';
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+
+  // 表格选中数据
+  const selection = ref<Spec[]>([]);
+  // 当前编辑数据
+  const current = ref<Spec | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示规格值弹窗
+  const showSpecValueEdit = 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 pageSpec({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      width: 90,
+      dataIndex: 'specId'
+    },
+    {
+      title: '规格名称',
+      dataIndex: 'specName',
+      width: 240,
+      key: 'specName'
+    },
+    {
+      title: '备注',
+      dataIndex: 'comments',
+      key: 'comments'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 280,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: SpecParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: Spec) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  const openSpecValue = (row?: Spec) => {
+    current.value = row ?? null;
+    showSpecValueEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: Spec) => {
+    const hide = message.loading('请求中..', 0);
+    removeSpec(row.specId)
+      .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);
+        removeBatchSpec(selection.value.map((d) => d.specId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上移
+  const moveUp = (row?: Spec) => {
+    updateSpec({
+      specId: row?.specId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 查询 */
+  const query = () => {
+    loading.value = true;
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: Spec) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openSpecValue(record);
+      }
+    };
+  };
+
+  query();
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'Spec'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/specValue/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/specValue/components/specValueEdit.vue

@@ -0,0 +1,141 @@
+<!-- 编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="500"
+    :visible="visible"
+    :maskClosable="false"
+    :title="isUpdate ? '编辑规格值' : '添加规格值'"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    @ok="save"
+  >
+    <a-form
+      ref="formRef"
+      :model="form"
+      :rules="rules"
+      :label-col="styleResponsive ? { md: 5, sm: 5, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 18, sm: 19, xs: 24 } : { flex: '1' }
+      "
+    >
+      <a-form-item label="规格值名称" name="specValue">
+        <a-input
+          allow-clear
+          :maxlength="100"
+          placeholder="红色"
+          v-model:value="form.specValue"
+          @pressEnter="save"
+        />
+      </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 { addSpecValue, updateSpecValue } from '@/api/shop/specValue';
+  import { SpecValue } from '@/api/shop/specValue/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { storeToRefs } from 'pinia';
+  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;
+    specId?: number;
+    // 修改回显的数据
+    data?: SpecValue | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 提交状态
+  const loading = ref(false);
+  // 表格选中数据
+  const formRef = ref<FormInstance | null>(null);
+
+  // 用户信息
+  const form = reactive<SpecValue>({
+    specValueId: undefined,
+    specValue: '',
+    comments: '',
+    sortNumber: 100
+  });
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  // 表单验证规则
+  const rules = reactive({
+    specValue: [
+      {
+        required: true,
+        type: 'string',
+        message: '请填写规格值,如红色、L码、远峰蓝、原色钛金属等',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const { resetFields } = useForm(form, rules);
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const formData = {
+          ...form,
+          specId: props.specId
+        };
+        const saveOrUpdate = isUpdate.value ? updateSpecValue : addSpecValue;
+        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);
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+      }
+    },
+    { immediate: true }
+  );
+</script>

src/views/shop/specValue/index.vue

@@ -0,0 +1,253 @@
+<template>
+  <a-drawer
+    :width="800"
+    :visible="visible"
+    :title="data?.name"
+    :body-style="{ paddingBottom: '28px' }"
+    @update:visible="updateVisible"
+    :confirm-loading="loading"
+    :footer="null"
+  >
+    <ele-pro-table
+      ref="tableRef"
+      row-key="specValueId"
+      :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 === '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="moveUp(record)">上移<ArrowUpOutlined /></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>
+    <!-- 编辑弹窗 -->
+    <SpecValueEdit
+      v-model:visible="showEdit"
+      :specId="specId"
+      :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 SpecValueEdit from './components/specValueEdit.vue';
+  import {
+    pageSpecValue,
+    removeSpecValue,
+    removeBatchSpecValue,
+    updateSpecValue
+  } from '@/api/shop/specValue';
+  import type { SpecValue, SpecValueParam } from '@/api/shop/specValue/model';
+  import { Spec } from '@/api/shop/spec/model';
+  import { FormInstance } from 'ant-design-vue/es/form';
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: Spec | null;
+  }>();
+
+  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<SpecValue[]>([]);
+  // 当前编辑数据
+  const current = ref<SpecValue | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示批量移动弹窗
+  const showMove = ref(false);
+  // 加载状态
+  const loading = ref(true);
+  const specId = ref(0);
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    if (filters) {
+      where.status = filters.status;
+    }
+    where.specId = props.data?.specId;
+    return pageSpecValue({
+      ...where,
+      ...orders,
+      page,
+      limit
+    });
+  };
+
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: '名称',
+      dataIndex: 'specValue',
+      key: 'specValue'
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 180,
+      fixed: 'right',
+      align: 'center',
+      hideInSetting: true
+    }
+  ]);
+
+  /* 搜索 */
+  const reload = (where?: SpecValueParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where: where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: SpecValue) => {
+    current.value = row ?? null;
+    if (props.data?.specId) {
+      specId.value = props.data?.specId;
+    }
+    showEdit.value = true;
+  };
+
+  /* 打开批量移动弹窗 */
+  const openMove = () => {
+    showMove.value = true;
+  };
+
+  /* 删除单个 */
+  const remove = (row: SpecValue) => {
+    const hide = message.loading('请求中..', 0);
+    removeSpecValue(row.specValueId)
+      .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);
+        removeBatchSpecValue(selection.value.map((d) => d.specValueId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  // 上移
+  const moveUp = (row?: SpecValue) => {
+    updateSpecValue({
+      specValueId: row?.specValueId,
+      sortNumber: Number(row?.sortNumber) - 1
+    }).then((msg) => {
+      message.success(msg);
+      reload();
+    });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: SpecValue) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+
+  watch(
+    () => props.data?.specId,
+    (specId) => {
+      if (specId) {
+        reload();
+      }
+    }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SpecValue'
+  };
+</script>
+
+<style lang="less" scoped></style>

src/views/shop/user/components/org-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 { Organization } from '@/api/system/organization/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value?: number): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      // 选中的数据(v-modal)
+      value?: number;
+      // 提示信息
+      placeholder?: string;
+      // 机构数据
+      data: Organization[];
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  /* 更新选中数据 */
+  const updateValue = (value?: number) => {
+    emit('update:value', value);
+  };
+</script>

src/views/shop/user/components/role-select.vue

@@ -0,0 +1,71 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    allow-clear
+    mode="multiple"
+    :value="roleIds"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  >
+    <a-select-option
+      v-for="item in data"
+      :key="item.roleId"
+      :value="item.roleId"
+    >
+      {{ item.roleName }}
+    </a-select-option>
+  </a-select>
+</template>
+
+<script lang="ts" setup>
+  import { ref, computed } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { listRoles } from '@/api/system/role';
+  import type { Role } from '@/api/system/role/model';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: Role[]): void;
+    (e: 'blur'): void;
+  }>();
+
+  const props = withDefaults(
+    defineProps<{
+      // 选中的角色
+      value?: Role[];
+      //
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择角色'
+    }
+  );
+
+  // 选中的角色id
+  const roleIds = computed(() => props.value?.map((d) => d.roleId as number));
+
+  // 角色数据
+  const data = ref<Role[]>([]);
+
+  /* 更新选中数据 */
+  const updateValue = (value: number[]) => {
+    emit(
+      'update:value',
+      value.map((v) => ({ roleId: v }))
+    );
+  };
+
+  /* 获取角色数据 */
+  listRoles()
+    .then((list) => {
+      data.value = list;
+    })
+    .catch((e) => {
+      message.error(e.message);
+    });
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/shop/user/components/sex-select.vue

@@ -0,0 +1,45 @@
+<!-- 角色选择下拉框 -->
+<template>
+  <a-select
+    show-search
+    optionFilterProp="label"
+    :options="data"
+    allow-clear
+    :value="value"
+    :placeholder="placeholder"
+    @update:value="updateValue"
+    @blur="onBlur"
+  />
+</template>
+
+<script lang="ts" setup>
+  import { getDictionaryOptions } from '@/utils/common';
+
+  const emit = defineEmits<{
+    (e: 'update:value', value: string): void;
+    (e: 'blur'): void;
+  }>();
+
+  withDefaults(
+    defineProps<{
+      value?: string;
+      placeholder?: string;
+    }>(),
+    {
+      placeholder: '请选择性别'
+    }
+  );
+
+  // 字典数据
+  const data = getDictionaryOptions('sex');
+
+  /* 更新选中数据 */
+  const updateValue = (value: string) => {
+    emit('update:value', value);
+  };
+
+  /* 失去焦点 */
+  const onBlur = () => {
+    emit('blur');
+  };
+</script>

src/views/shop/user/components/user-edit.vue

@@ -0,0 +1,313 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <ele-modal
+    :width="800"
+    :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: 5, sm: 4, xs: 24 } : { flex: '90px' }"
+      :wrapper-col="
+        styleResponsive ? { md: 17, 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="手机号" v-if="isUpdate" name="mobile">
+            <a-input
+              allow-clear
+              :maxlength="11"
+              placeholder="请输入手机号"
+              v-model:value="form.mobile"
+              :disabled="isUpdate"
+            />
+          </a-form-item>
+          <a-form-item label="昵称" name="nickname">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入昵称"
+              v-model:value="form.nickname"
+            />
+          </a-form-item>
+          <a-form-item label="真实姓名" name="realName">
+            <a-input
+              allow-clear
+              :maxlength="20"
+              placeholder="请输入真实姓名"
+              v-model:value="form.realName"
+            />
+          </a-form-item>
+          <a-form-item label="性别" name="sex">
+            <span v-if="form.sex == 1">男</span>
+            <span v-else-if="form.sex == 2">女</span>
+            <span v-else>未知</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="会员等级">
+            <SelectGrade
+              :placeholder="`请选择会员等级`"
+              v-model:value="form.gradeName"
+              :disabled="isUpdate"
+              @done="chooseGradeId"
+            />
+          </a-form-item>
+          <a-form-item label="邮箱" name="email">
+            <a-input
+              allow-clear
+              :maxlength="100"
+              placeholder="请输入邮箱"
+              v-model:value="form.email"
+            />
+          </a-form-item>
+          <a-form-item label="出生日期">
+            <a-date-picker
+              class="ele-fluid"
+              value-format="YYYY-MM-DD"
+              placeholder="请选择出生日期"
+              v-model:value="form.birthday"
+            />
+          </a-form-item>
+          <a-form-item v-if="!isUpdate" label="登录密码" name="password">
+            <a-input-password
+              :maxlength="20"
+              v-model:value="form.password"
+              placeholder="请输入登录密码"
+            />
+          </a-form-item>
+          <a-form-item label="个人简介">
+            <a-textarea
+              :rows="4"
+              :maxlength="200"
+              placeholder="请输入个人简介"
+              v-model:value="form.introduction"
+            />
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import type { FormInstance, Rule } from 'ant-design-vue/es/form';
+  import { emailReg, phoneReg } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import RoleSelect from './role-select.vue';
+  import SexSelect from './sex-select.vue';
+  import { addUser, updateUser, checkExistence } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  import OrgSelect from './org-select.vue';
+  // import { getDictionaryOptions } from '@/utils/common';
+  import { Organization } from '@/api/system/organization/model';
+  import { Grade } from '@/api/user/grade/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  // 获取字典数据
+  // const userTypeData = getDictionaryOptions('userType');
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+    // 全部机构
+    organizationList: Organization[];
+  }>();
+
+  //
+  const formRef = ref<FormInstance | null>(null);
+
+  // 是否是修改
+  const isUpdate = ref(false);
+
+  // 提交状态
+  const loading = ref(false);
+
+  // 表单数据
+  const { form, resetFields, assignFields } = useFormData<User>({
+    type: undefined,
+    userId: undefined,
+    username: '',
+    nickname: '',
+    realName: '',
+    companyName: '',
+    sex: undefined,
+    roles: [],
+    email: '',
+    phone: '',
+    mobile: '',
+    password: '',
+    introduction: '',
+    organizationId: undefined,
+    birthday: '',
+    idCard: '',
+    comments: '',
+    gradeName: '',
+    gradeId: undefined
+  });
+
+  // 表单验证规则
+  const rules = reactive<Record<string, Rule[]>>({
+    username: [
+      {
+        required: true,
+        type: 'string',
+        validator: (_rule: Rule, value: string) => {
+          return new Promise<void>((resolve, reject) => {
+            if (!value) {
+              return reject('请输入用户账号');
+            }
+            checkExistence('username', value, props.data?.userId)
+              .then(() => {
+                reject('账号已经存在');
+              })
+              .catch(() => {
+                resolve();
+              });
+          });
+        },
+        trigger: 'blur'
+      }
+    ],
+    nickname: [
+      {
+        required: true,
+        message: '请输入昵称',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    // realName: [
+    //   {
+    //     required: true,
+    //     message: '请输入真实姓名',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    // sex: [
+    //   {
+    //     required: true,
+    //     message: '请选择性别',
+    //     type: 'string',
+    //     trigger: 'blur'
+    //   }
+    // ],
+    roles: [
+      {
+        required: true,
+        message: '请选择角色',
+        type: 'array',
+        trigger: 'blur'
+      }
+    ],
+    email: [
+      {
+        pattern: emailReg,
+        message: '邮箱格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ],
+    password: [
+      {
+        required: true,
+        type: 'string',
+        validator: async (_rule: Rule, value: string) => {
+          if (isUpdate.value || /^[\S]{5,18}$/.test(value)) {
+            return Promise.resolve();
+          }
+          return Promise.reject('密码必须为5-18位非空白字符');
+        },
+        trigger: 'blur'
+      }
+    ],
+    phone: [
+      {
+        required: true,
+        pattern: phoneReg,
+        message: '手机号格式不正确',
+        type: 'string',
+        trigger: 'blur'
+      }
+    ]
+  });
+
+  const chooseGradeId = (data: Grade) => {
+    form.gradeName = data.name;
+    form.gradeId = data.gradeId;
+  };
+
+  /* 保存编辑 */
+  const save = () => {
+    if (!formRef.value) {
+      return;
+    }
+    formRef.value
+      .validate()
+      .then(() => {
+        loading.value = true;
+        const saveOrUpdate = isUpdate.value ? updateUser : addUser;
+        saveOrUpdate(form)
+          .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) {
+          assignFields({
+            ...props.data,
+            password: ''
+          });
+          isUpdate.value = true;
+        } else {
+          isUpdate.value = false;
+        }
+      } else {
+        resetFields();
+        formRef.value?.clearValidate();
+      }
+    }
+  );
+</script>

src/views/shop/user/components/user-import.vue

@@ -0,0 +1,88 @@
+<!-- 用户导入弹窗 -->
+<template>
+  <ele-modal
+    :width="520"
+    :footer="null"
+    title="导入用户"
+    :visible="visible"
+    @update:visible="updateVisible"
+  >
+    <a-spin :spinning="loading">
+      <a-upload-dragger
+        accept=".xls,.xlsx"
+        :show-upload-list="false"
+        :customRequest="doUpload"
+        style="padding: 24px 0; margin-bottom: 16px"
+      >
+        <p class="ant-upload-drag-icon">
+          <cloud-upload-outlined />
+        </p>
+        <p class="ant-upload-hint">将文件拖到此处，或点击上传</p>
+      </a-upload-dragger>
+    </a-spin>
+    <div class="ele-text-center">
+      <span>只能上传xls、xlsx文件，</span>
+      <a
+        href="https://cdn.eleadmin.com/20200610/用户导入模板.xlsx"
+        download="用户导入模板.xlsx"
+      >
+        下载模板
+      </a>
+    </div>
+  </ele-modal>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue';
+  import { message } from 'ant-design-vue/es';
+  import { CloudUploadOutlined } from '@ant-design/icons-vue';
+  import { importUsers } from '@/api/system/user';
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  defineProps<{
+    // 是否打开弹窗
+    visible: boolean;
+  }>();
+
+  // 导入请求状态
+  const loading = ref(false);
+
+  /* 上传 */
+  const doUpload = ({ file }) => {
+    if (
+      ![
+        'application/vnd.ms-excel',
+        'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'
+      ].includes(file.type)
+    ) {
+      message.error('只能选择 excel 文件');
+      return false;
+    }
+    if (file.size / 1024 / 1024 > 10) {
+      message.error('大小不能超过 10MB');
+      return false;
+    }
+    loading.value = true;
+    importUsers(file)
+      .then((msg) => {
+        loading.value = false;
+        message.success(msg);
+        updateVisible(false);
+        emit('done');
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+    return false;
+  };
+
+  /* 更新 visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+</script>

src/views/shop/user/components/user-info.vue

@@ -0,0 +1,143 @@
+<!-- 用户编辑弹窗 -->
+<template>
+  <a-drawer
+    :width="680"
+    :visible="visible"
+    :confirm-loading="loading"
+    :title="'基本信息'"
+    :body-style="{ paddingBottom: '8px' }"
+    @update:visible="updateVisible"
+    :footer="null"
+  >
+    <a-form
+      :label-col="{ md: { span: 6 }, sm: { span: 24 } }"
+      :wrapper-col="{ md: { span: 19 }, sm: { span: 24 } }"
+    >
+      <a-row :gutter="16">
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="账号">
+            <span class="ele-text">{{ user.username }}</span>
+          </a-form-item>
+          <a-form-item label="昵称">
+            <span class="ele-text">{{ user.nickname }}</span>
+          </a-form-item>
+          <a-form-item label="性别">
+            <span class="ele-text">{{ user.sexName }}</span>
+          </a-form-item>
+          <a-form-item label="手机号">
+            <span class="ele-text">{{ user.phone }}</span>
+          </a-form-item>
+          <a-form-item label="角色">
+            <a-tag v-for="item in user.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </a-form-item>
+          <a-form-item label="状态">
+            <a-badge
+              v-if="typeof user.status === 'number'"
+              :status="(['processing', 'error'][user.status] as any)"
+              :text="['正常', '冻结'][user.status]"
+            />
+          </a-form-item>
+          <a-form-item label="地址">
+            <span class="ele-text">{{ user.address }}</span>
+          </a-form-item>
+        </a-col>
+        <a-col
+          v-bind="styleResponsive ? { md: 12, sm: 24, xs: 24 } : { span: 12 }"
+        >
+          <a-form-item label="可用余额">
+            <span class="ele-text-success">￥{{ formatNumber(user.balance) }}</span>
+          </a-form-item>
+          <a-form-item label="可用积分">
+            <span class="ele-text">{{ user.points }}</span>
+          </a-form-item>
+          <a-form-item label="实际消费">
+            <span class="ele-text">{{ user.payMoney }}</span>
+          </a-form-item>
+          <a-form-item label="机构/部门">
+            <span class="ele-text">{{ user.organizationName }}</span>
+          </a-form-item>
+          <a-form-item label="头像">
+            <a-image :src="user.avatar" :width="36" />
+          </a-form-item>
+          <a-form-item label="生日">
+            <span class="ele-text">{{ user.birthday }}</span>
+          </a-form-item>
+          <a-form-item label="创建时间">
+            <span class="ele-text">{{ user.createTime }}</span>
+          </a-form-item>
+        </a-col>
+      </a-row>
+    </a-form>
+  </a-drawer>
+</template>
+
+<script lang="ts" setup>
+  import { ref, reactive, watch } from 'vue';
+  import { Form } from 'ant-design-vue';
+  import { assignObject } from 'ele-admin-pro';
+  import type { User } from '@/api/system/user/model';
+  import { useThemeStore } from '@/store/modules/theme';
+  import { formatNumber } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+
+  const useForm = Form.useForm;
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+  const props = defineProps<{
+    // 弹窗是否打开
+    visible: boolean;
+    // 修改回显的数据
+    data?: User | null;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'done'): void;
+    (e: 'update:visible', visible: boolean): void;
+  }>();
+
+  // 用户信息
+  const user = reactive<User>({
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    avatar: '',
+    balance: undefined,
+    points: 0,
+    payMoney: 0,
+    birthday: '',
+    address: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  const { resetFields } = useForm(user);
+
+  /* 更新visible */
+  const updateVisible = (value: boolean) => {
+    emit('update:visible', value);
+  };
+
+  watch(
+    () => props.visible,
+    (visible) => {
+      if (visible) {
+        if (props.data) {
+          loading.value = false;
+          assignObject(user, props.data);
+        }
+      } else {
+        resetFields();
+      }
+    }
+  );
+</script>

src/views/shop/user/components/user-search.vue

@@ -0,0 +1,111 @@
+<!-- 搜索表单 -->
+<template>
+  <a-form
+    :label-col="
+      styleResponsive ? { xl: 7, lg: 5, md: 7, sm: 4 } : { flex: '90px' }
+    "
+    :wrapper-col="
+      styleResponsive ? { xl: 17, lg: 19, md: 17, sm: 20 } : { flex: '1' }
+    "
+  >
+    <a-row :gutter="8">
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="用户账号">
+          <a-input
+            v-model:value.trim="form.username"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="昵称">
+          <a-input
+            v-model:value.trim="form.nickname"
+            placeholder="请输入"
+            allow-clear
+          />
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item label="性别">
+          <a-select v-model:value="form.sex" placeholder="请选择" allow-clear>
+            <a-select-option value="1">男</a-select-option>
+            <a-select-option value="2">女</a-select-option>
+          </a-select>
+        </a-form-item>
+      </a-col>
+      <a-col
+        v-bind="
+          styleResponsive
+            ? { xl: 6, lg: 12, md: 12, sm: 24, xs: 24 }
+            : { span: 6 }
+        "
+      >
+        <a-form-item class="ele-text-right" :wrapper-col="{ span: 24 }">
+          <a-space>
+            <a-button type="primary" @click="search">查询</a-button>
+            <a-button @click="reset">重置</a-button>
+          </a-space>
+        </a-form-item>
+      </a-col>
+    </a-row>
+  </a-form>
+</template>
+
+<script lang="ts" setup>
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import type { UserParam } from '@/api/system/user/model';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const props = defineProps<{
+    // 默认搜索条件
+    where?: UserParam;
+  }>();
+
+  const emit = defineEmits<{
+    (e: 'search', where?: UserParam): void;
+  }>();
+
+  // 表单数据
+  const { form, resetFields } = useFormData<UserParam>({
+    username: '',
+    nickname: '',
+    sex: undefined,
+    ...props.where
+  });
+
+  /* 搜索 */
+  const search = () => {
+    emit('search', form);
+  };
+
+  /*  重置 */
+  const reset = () => {
+    resetFields();
+    search();
+  };
+</script>

src/views/shop/user/details/index.vue

@@ -0,0 +1,130 @@
+<template>
+  <div class="ele-body">
+    <a-card title="基本信息" :bordered="false">
+      <a-form
+        class="ele-form-detail"
+        :label-col="
+          styleResponsive ? { md: 2, sm: 4, xs: 6 } : { flex: '90px' }
+        "
+        :wrapper-col="
+          styleResponsive ? { md: 22, sm: 20, xs: 18 } : { flex: '1' }
+        "
+      >
+        <a-form-item label="账号">
+          <div class="ele-text-secondary">{{ form.username }}</div>
+        </a-form-item>
+        <a-form-item label="昵称">
+          <div class="ele-text-secondary">{{ form.nickname }}</div>
+        </a-form-item>
+        <a-form-item label="性别">
+          <div class="ele-text-secondary">{{ form.sexName }}</div>
+        </a-form-item>
+        <a-form-item label="手机号">
+          <div class="ele-text-secondary">{{ form.phone }}</div>
+        </a-form-item>
+        <a-form-item label="真实姓名">
+          <div class="ele-text-secondary">{{ form.realName }}</div>
+        </a-form-item>
+        <a-form-item label="别名">
+          <div class="ele-text-secondary">{{ form.alias }}</div>
+        </a-form-item>
+        <a-form-item label="角色">
+          <a-tag v-for="item in form.roles" :key="item.roleId" color="blue">
+            {{ item.roleName }}
+          </a-tag>
+        </a-form-item>
+        <a-form-item label="创建时间">
+          <div class="ele-text-secondary">{{ form.createTime }}</div>
+        </a-form-item>
+        <a-form-item label="状态">
+          <a-badge
+            v-if="typeof form.status === 'number'"
+            :status="(['processing', 'error'][form.status] as any)"
+            :text="['正常', '冻结'][form.status]"
+          />
+        </a-form-item>
+      </a-form>
+    </a-card>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref, watch, unref } from 'vue';
+  import { useRouter } from 'vue-router';
+  import { message } from 'ant-design-vue/es';
+  import { toDateString } from 'ele-admin-pro/es';
+  import { storeToRefs } from 'pinia';
+  import { useThemeStore } from '@/store/modules/theme';
+  import useFormData from '@/utils/use-form-data';
+  import { setPageTabTitle } from '@/utils/page-tab-util';
+  import { getUser } from '@/api/system/user';
+  import type { User } from '@/api/system/user/model';
+  const ROUTE_PATH = '/system/user/details';
+
+  // 是否开启响应式布局
+  const themeStore = useThemeStore();
+  const { styleResponsive } = storeToRefs(themeStore);
+
+  const { currentRoute } = useRouter();
+
+  // 用户信息
+  const { form, assignFields } = useFormData<User>({
+    userId: undefined,
+    alias: '',
+    realName: '',
+    username: '',
+    nickname: '',
+    sexName: '',
+    phone: '',
+    roles: [],
+    createTime: undefined,
+    status: undefined
+  });
+
+  // 请求状态
+  const loading = ref(true);
+
+  /*  */
+  const query = () => {
+    const { query } = unref(currentRoute);
+    const id = query.id;
+    if (!id || form.userId === Number(id)) {
+      return;
+    }
+    loading.value = true;
+    getUser(Number(id))
+      .then((data) => {
+        loading.value = false;
+        assignFields({
+          ...data,
+          createTime: toDateString(data.createTime)
+        });
+        // 修改页签标题
+        if (unref(currentRoute).path === ROUTE_PATH) {
+          setPageTabTitle(data.nickname + '的信息');
+        }
+      })
+      .catch((e) => {
+        loading.value = false;
+        message.error(e.message);
+      });
+  };
+
+  watch(
+    currentRoute,
+    (route) => {
+      const { path } = unref(route);
+      if (path !== ROUTE_PATH) {
+        return;
+      }
+      query();
+    },
+    { immediate: true }
+  );
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUserDetails'
+  };
+</script>

src/views/shop/user/index.vue

@@ -0,0 +1,502 @@
+<template>
+  <div class="ele-body">
+    <a-card :bordered="false">
+      <!-- 表格 -->
+      <ele-pro-table
+        ref="tableRef"
+        row-key="userId"
+        :columns="columns"
+        :datasource="datasource"
+        :scroll="{ x: 1300 }"
+        :where="defaultWhere"
+        :customRow="customRow"
+        cache-key="proSystemUserTable"
+      >
+        <template #toolbar>
+          <a-space>
+            <a-input-search
+              allow-clear
+              v-model:value="searchText"
+              placeholder="请输入关键词"
+              @search="reload"
+              @pressEnter="reload"
+            />
+          </a-space>
+        </template>
+        <template #bodyCell="{ column, record }">
+          <template v-if="column.key === 'nickname'">
+            <div class="user-box">
+              <a-avatar
+                :size="30"
+                :src="`${record.avatar}`"
+                style="margin-right: 4px"
+              >
+                <template #icon>
+                  <UserOutlined />
+                </template>
+              </a-avatar>
+              <div class="user-info" @click="openEdit(record)">
+                <span>{{ record.nickname }}</span>
+                <!--                <span class="ele-text-placeholder">{{ record.nickname }}</span>-->
+              </div>
+            </div>
+          </template>
+          <template v-if="column.key === 'mobile'">
+            <span>{{ record.mobile }}</span>
+          </template>
+          <template v-else-if="column.key === 'roles'">
+            <a-tag v-for="item in record.roles" :key="item.roleId" color="blue">
+              {{ item.roleName }}
+            </a-tag>
+          </template>
+          <template v-if="column.key === 'balance'">
+            <span class="ele-text-success">
+              ￥{{ formatNumber(record.balance) }}
+            </span>
+          </template>
+          <template v-if="column.key === 'expendMoney'">
+            <span class="ele-text-warning">
+              ￥{{ formatNumber(record.expendMoney) }}
+            </span>
+          </template>
+          <template v-else-if="column.key === 'status'">
+            <a-switch
+              :checked="record.status === 0"
+              @change="(checked: boolean) => editStatus(checked, record)"
+            />
+          </template>
+          <template v-else-if="column.key === 'action'">
+            <a-space>
+              <a @click="openEdit(record)">详情</a>
+<!--              <a-divider type="vertical" />-->
+              <!--              <a-popconfirm-->
+              <!--                placement="topRight"-->
+              <!--                title="确定要删除此用户吗？"-->
+              <!--                @confirm="remove(record)"-->
+              <!--              >-->
+              <!--                <a class="ele-text-danger">删除</a>-->
+              <!--              </a-popconfirm>-->
+            </a-space>
+          </template>
+        </template>
+      </ele-pro-table>
+    </a-card>
+    <!-- 编辑弹窗 -->
+    <user-edit
+      v-model:visible="showEdit"
+      :data="current"
+      :organization-list="data"
+      @done="reload"
+    />
+    <!-- 用户详情 -->
+    <user-info v-model:visible="showInfo" :data="current" @done="reload" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { createVNode, ref, reactive } from 'vue';
+  import { message, Modal } from 'ant-design-vue/es';
+  import {
+    PlusOutlined,
+    DeleteOutlined,
+    UploadOutlined,
+    EditOutlined,
+    UserOutlined,
+    ExclamationCircleOutlined
+  } from '@ant-design/icons-vue';
+  import type { EleProTable } from 'ele-admin-pro/es';
+  import type {
+    DatasourceFunction,
+    ColumnItem
+  } from 'ele-admin-pro/es/ele-pro-table/types';
+  import { messageLoading, formatNumber } from 'ele-admin-pro/es';
+  import { timeAgo } from 'ele-admin-pro';
+  import UserEdit from './components/user-edit.vue';
+  import UserImport from './components/user-import.vue';
+  import UserInfo from './components/user-info.vue';
+  import {
+    pageUsers,
+    removeUser,
+    removeUsers,
+    updateUserStatus,
+    updateUserPassword
+  } from '@/api/system/user';
+  import type { User, UserParam } from '@/api/system/user/model';
+  import { toTreeData, uuid } from 'ele-admin-pro';
+  import { listRoles } from '@/api/system/role';
+  import { listOrganizations } from '@/api/system/organization';
+  import { Organization } from '@/api/system/organization/model';
+  import { hasRole } from '@/utils/permission';
+
+  // 加载状态
+  const loading = ref(true);
+  // 树形数据
+  const data = ref<Organization[]>([]);
+  // 树展开的key
+  const expandedRowKeys = ref<number[]>([]);
+  // 树选中的key
+  const selectedRowKeys = ref<number[]>([]);
+  // 表格选中数据
+  const selection = ref<User[]>([]);
+  // 当前编辑数据
+  const current = ref<User | null>(null);
+  // 是否显示编辑弹窗
+  const showEdit = ref(false);
+  // 是否显示用户详情
+  const showInfo = ref(false);
+  // 是否显示用户导入弹窗
+  const showImport = ref(false);
+  const userType = ref<number>();
+  const searchText = ref('');
+
+  // 加载角色
+  const roles = ref<any[]>([]);
+  const filters = () => {
+    listRoles().then((result) => {
+      result.map((d) => {
+        roles.value.push({
+          text: d.roleName,
+          value: d.roleId
+        });
+      });
+    });
+  };
+  filters();
+  // 加载机构
+  listOrganizations()
+    .then((list) => {
+      loading.value = false;
+      const eks: number[] = [];
+      list.forEach((d) => {
+        d.key = d.organizationId;
+        d.value = d.organizationId;
+        d.title = d.organizationName;
+        if (typeof d.key === 'number') {
+          eks.push(d.key);
+        }
+      });
+      expandedRowKeys.value = eks;
+      data.value = toTreeData({
+        data: list,
+        idField: 'organizationId',
+        parentIdField: 'parentId'
+      });
+      if (list.length) {
+        if (typeof list[0].key === 'number') {
+          selectedRowKeys.value = [list[0].key];
+        }
+        // current.value = list[0];
+      } else {
+        selectedRowKeys.value = [];
+        // current.value = null;
+      }
+    })
+    .catch((e) => {
+      loading.value = false;
+      message.error(e.message);
+    });
+
+  // 表格实例
+  const tableRef = ref<InstanceType<typeof EleProTable> | null>(null);
+  // 表格列配置
+  const columns = ref<ColumnItem[]>([
+    {
+      title: 'ID',
+      dataIndex: 'userId',
+      width: 80,
+      showSorterTooltip: false
+    },
+    {
+      title: '昵称',
+      key: 'nickname',
+      dataIndex: 'nickname',
+      width: 240,
+      showSorterTooltip: false
+    },
+    {
+      title: '手机号码',
+      dataIndex: 'mobile',
+      key: 'mobile',
+      showSorterTooltip: false
+    },
+    // {
+    //   title: '客户分组',
+    //   dataIndex: 'type',
+    //   key: 'type',
+    //   align: 'center',
+    //   width: 120
+    // },
+    {
+      title: '性别',
+      dataIndex: 'sexName',
+      align: 'center',
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱',
+      dataIndex: 'email',
+      hideInTable: true,
+      width: 180,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用余额',
+      dataIndex: 'balance',
+      key: 'balance',
+      align: 'center',
+      width: 180,
+      sorter: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '实际消费金额',
+      dataIndex: 'expendMoney',
+      key: 'expendMoney',
+      sorter: true,
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '可用积分',
+      dataIndex: 'points',
+      hideInTable: true,
+      sorter: true
+    },
+    {
+      title: '注册来源',
+      key: 'platform',
+      align: 'center',
+      dataIndex: 'platform',
+      hideInTable: true,
+      customRender: ({ text }) => ['未知', '网站', '小程序', 'APP'][text]
+    },
+    {
+      title: '证件号码',
+      dataIndex: 'idCard',
+      hideInTable: true
+    },
+    {
+      title: '出生日期',
+      dataIndex: 'birthday',
+      key: 'birthday',
+      hideInTable: true
+    },
+    {
+      title: '省份',
+      dataIndex: 'province',
+      key: 'province',
+      hideInTable: true
+    },
+    {
+      title: '城市',
+      dataIndex: 'city',
+      key: 'city',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '地区',
+      dataIndex: 'region',
+      key: 'region',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '个人简介',
+      dataIndex: 'introduction',
+      key: 'introduction',
+      hideInTable: true,
+      showSorterTooltip: false
+    },
+    {
+      title: '邮箱认证',
+      dataIndex: 'emailVerified',
+      hideInTable: true,
+      showSorterTooltip: false,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '实名认证',
+      dataIndex: 'certification',
+      sorter: true,
+      hideInTable: true,
+      customRender: ({ text }) => ['未认证', '已认证'][text]
+    },
+    {
+      title: '注册时间',
+      dataIndex: 'createTime',
+      sorter: true,
+      align: 'center',
+      width: 200,
+      showSorterTooltip: false,
+      ellipsis: true,
+      customRender: ({ text }) => timeAgo(text)
+    },
+    {
+      title: '操作',
+      key: 'action',
+      width: 120,
+      fixed: 'right',
+      align: 'center'
+    }
+  ]);
+
+  // 默认搜索条件
+  const defaultWhere = reactive({
+    username: '',
+    nickname: ''
+  });
+
+  // 表格数据源
+  const datasource: DatasourceFunction = ({
+    page,
+    limit,
+    where,
+    orders,
+    filters
+  }) => {
+    where = {};
+    where.roleId = filters.roles;
+    where.keywords = searchText.value;
+    return pageUsers({ page, limit, ...where, ...orders });
+  };
+
+  /* 搜索 */
+  const reload = (where?: UserParam) => {
+    selection.value = [];
+    tableRef?.value?.reload({ where });
+  };
+
+  /* 打开编辑弹窗 */
+  const openEdit = (row?: User) => {
+    current.value = row ?? null;
+    showEdit.value = true;
+  };
+
+  /* 打开用户详情弹窗 */
+  const openInfo = (row?: User) => {
+    current.value = row ?? null;
+    showInfo.value = true;
+  };
+
+  /* 打开编辑弹窗 */
+  const openImport = () => {
+    showImport.value = true;
+  };
+
+  const handleTabs = (e) => {
+    userType.value = Number(e.target.value);
+    reload();
+  };
+
+  /* 删除单个 */
+  const remove = (row: User) => {
+    const hide = messageLoading('请求中..', 0);
+    removeUser(row.userId)
+      .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 = messageLoading('请求中..', 0);
+        removeUsers(selection.value.map((d) => d.userId))
+          .then((msg) => {
+            hide();
+            message.success(msg);
+            reload();
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 重置用户密码 */
+  const resetPsw = (row: User) => {
+    Modal.confirm({
+      title: '提示',
+      content: '确定要重置此用户的密码吗?',
+      icon: createVNode(ExclamationCircleOutlined),
+      maskClosable: true,
+      onOk: () => {
+        const hide = message.loading('请求中..', 0);
+        const password = uuid(8);
+        updateUserPassword(row.userId, password)
+          .then((msg) => {
+            hide();
+            message.success(msg + '，新密码：' + password);
+          })
+          .catch((e) => {
+            hide();
+            message.error(e.message);
+          });
+      }
+    });
+  };
+
+  /* 修改用户状态 */
+  const editStatus = (checked: boolean, row: User) => {
+    const status = checked ? 0 : 1;
+    updateUserStatus(row.userId, status)
+      .then((msg) => {
+        row.status = status;
+        message.success(msg);
+      })
+      .catch((e) => {
+        message.error(e.message);
+      });
+  };
+
+  /* 自定义行属性 */
+  const customRow = (record: User) => {
+    return {
+      // 行点击事件
+      onClick: () => {
+        // console.log(record);
+      },
+      // 行双击事件
+      onDblclick: () => {
+        openEdit(record);
+      }
+    };
+  };
+</script>
+
+<script lang="ts">
+  export default {
+    name: 'SystemUser'
+  };
+</script>
+
+<style lang="less" scoped>
+  .user-box {
+    display: flex;
+    align-items: center;
+    .user-info {
+      display: flex;
+      flex-direction: column;
+      align-items: start;
+    }
+  }
+</style>