From dea89010e99556f05d29091a0202383b4376e886 Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Tue, 18 Feb 2025 18:47:15 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=8B=89=E5=8F=96=E4=BB=A3=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/onlineShop/goodsGroupconfig.ts        |  64 +++++
 src/api/product/commonUnits.ts                |   1 +
 src/api/product/index.ts                      |  58 +++++
 src/api/product/productclassification.ts      |  10 +-
 src/api/product/specificationsconfig.ts       |   2 +
 src/components/CURD/PageContent.vue           |   9 +-
 src/components/CURD/PageModal.vue             |  73 +-----
 src/components/CURD/PageSearch.vue            |  62 +----
 src/components/CURD/usePage.ts                |   1 -
 src/components/mycomponents/myDialog.vue      |  46 ++++
 src/views/devices/config/search.ts            |  25 +-
 src/views/online-shop/goods-group.vue         | 245 +++++++++++++++++-
 src/views/online-shop/goodsGroupconfig/add.ts | 104 ++++++++
 .../online-shop/goodsGroupconfig/content.ts   |  74 ++++++
 .../online-shop/goodsGroupconfig/content2.ts  |  34 +++
 .../online-shop/goodsGroupconfig/edit.ts      | 135 ++++++++++
 .../online-shop/goodsGroupconfig/search.ts    | 101 ++++++++
 .../online-shop/goodsGroupconfig/search2.ts   |  41 +++
 .../goodsGroupconfig/selectGoodslist.vue      |  92 +++++++
 src/views/product/categoryconfig/content.ts   |   5 +-
 src/views/product/index.vue                   | 164 +++++++++++-
 src/views/product/indexconfig/add.ts          |   2 +-
 src/views/product/indexconfig/content.ts      |  37 ++-
 src/views/product/indexconfig/edit.ts         |   2 +-
 src/views/product/indexconfig/search.ts       | 104 ++++++--
 src/views/product/indexconfig/statistics.vue  | 100 +++++++
 26 files changed, 1429 insertions(+), 162 deletions(-)
 create mode 100644 src/api/onlineShop/goodsGroupconfig.ts
 create mode 100644 src/api/product/index.ts
 create mode 100644 src/components/mycomponents/myDialog.vue
 create mode 100644 src/views/online-shop/goodsGroupconfig/add.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/content.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/content2.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/edit.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/search.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/search2.ts
 create mode 100644 src/views/online-shop/goodsGroupconfig/selectGoodslist.vue
 create mode 100644 src/views/product/indexconfig/statistics.vue

diff --git a/src/api/onlineShop/goodsGroupconfig.ts b/src/api/onlineShop/goodsGroupconfig.ts
new file mode 100644
index 0000000..3c76bf6
--- /dev/null
+++ b/src/api/onlineShop/goodsGroupconfig.ts
@@ -0,0 +1,64 @@
+import request from "@/utils/request";
+const baseURL = "/product/admin/prod/group";
+// 商品管理-商品分类
+const AuthAPI = {
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
+  /** 分页*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 新增
+  addunit(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data: { ...data },
+    });
+  },
+  // 获取详情
+  getunitinfo(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
+  // 编辑确定
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+};
+
+
+
+
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;
\ No newline at end of file
diff --git a/src/api/product/commonUnits.ts b/src/api/product/commonUnits.ts
index 6e99e4d..755d9e0 100644
--- a/src/api/product/commonUnits.ts
+++ b/src/api/product/commonUnits.ts
@@ -1,6 +1,7 @@
 import request from "@/utils/request";
 const baseURL = "/product/admin/prod/unit";
 
+// 商品管理-常用单位
 
 const AuthAPI = {
   /** 分页*/
diff --git a/src/api/product/index.ts b/src/api/product/index.ts
new file mode 100644
index 0000000..42a00d8
--- /dev/null
+++ b/src/api/product/index.ts
@@ -0,0 +1,58 @@
+import request from "@/utils/request";
+const baseURL = "/product/admin/product";
+// 商品管理-商品列表
+
+const AuthAPI = {
+  /** 分页*/
+  getPage(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/page`,
+      method: "get",
+      params,
+    });
+  },
+  // 单位新增
+  addunit(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "post",
+      data,
+    });
+  },
+  // 获取详情
+  getunitinfo(id: number) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "get",
+    });
+  },
+  // 编辑确定
+  update(data: Object) {
+    return request<any, Responseres>({
+      url: `${baseURL}`,
+      method: "put",
+      data,
+    });
+  },
+  // 删除
+  deleteByIds(id: number | String) {
+    return request<any, Responseres>({
+      url: `${baseURL}/${id}`,
+      method: "delete",
+    });
+  },
+
+
+};
+
+
+
+
+export interface Responseres {
+  code?: number | null;
+  data?: any;
+  msg?: null | string;
+  [property: string]: any;
+}
+
+export default AuthAPI;
\ No newline at end of file
diff --git a/src/api/product/productclassification.ts b/src/api/product/productclassification.ts
index b7af4ae..c6b87d2 100644
--- a/src/api/product/productclassification.ts
+++ b/src/api/product/productclassification.ts
@@ -1,7 +1,15 @@
 import request from "@/utils/request";
 const baseURL = "/product/admin/prod/category";
-
+// 商品管理-商品分类
 const AuthAPI = {
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
   /** 分页*/
   getPage(params: any) {
     return request<any, Responseres>({
diff --git a/src/api/product/specificationsconfig.ts b/src/api/product/specificationsconfig.ts
index 2fcc48b..69358e8 100644
--- a/src/api/product/specificationsconfig.ts
+++ b/src/api/product/specificationsconfig.ts
@@ -1,5 +1,7 @@
 import request from "@/utils/request";
 const baseURL = "/product/admin/prod/spec";
+// 商品管理-商品规格
+
 const AuthAPI = {
   /** 列表*/
   getPage(params: any) {
diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 12193bd..d005bed 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -415,7 +415,10 @@ function handleSelectionChange(selection: any[]) {
   selectionData.value = selection;
   removeIds.value = selection.map((item) => item[pk]);
 }
-
+// 获取选中的表格数据
+function getselectTable() {
+  return selectionData.value;
+}
 // 刷新
 function handleRefresh(isRestart = false) {
   fetchPageData(lastFormData, isRestart);
@@ -560,6 +563,7 @@ function handleFileExceed(files: File[]) {
   file.uid = genFileId();
   uploadRef.value!.handleStart(file);
 }
+
 // 下载导入模板
 function handleDownloadTemplate() {
   const importTemplate = props.contentConfig.importTemplate;
@@ -725,6 +729,7 @@ function handleModify(field: string, value: boolean | string | number, row: Reco
   if (props.contentConfig.modifyAction) {
     props.contentConfig.modifyAction({
       [pk]: row[pk],
+      ...row,
       field: field,
       value: value,
     });
@@ -847,7 +852,7 @@ function saveXlsx(fileData: BlobPart, fileName: string) {
 }
 
 // 暴露的属性和方法
-defineExpose({ fetchPageData, exportPageData, getFilterParams });
+defineExpose({ fetchPageData, exportPageData, getFilterParams, getselectTable });
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/src/components/CURD/PageModal.vue b/src/components/CURD/PageModal.vue
index a6121a2..e17b46e 100644
--- a/src/components/CURD/PageModal.vue
+++ b/src/components/CURD/PageModal.vue
@@ -1,20 +1,9 @@
 <template>
   <!-- drawer -->
   <template v-if="modalConfig.component === 'drawer'">
-    <el-drawer
-      v-model="modalVisible"
-      :append-to-body="true"
-      v-bind="modalConfig.drawer"
-      @close="handleCloseModal"
-    >
+    <el-drawer v-model="modalVisible" :append-to-body="true" v-bind="modalConfig.drawer" @close="handleCloseModal">
       <!-- 表单 -->
-      <el-form
-        ref="formRef"
-        label-width="auto"
-        v-bind="modalConfig.form"
-        :model="formData"
-        :rules="formRules"
-      >
+      <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form" :model="formData" :rules="formRules">
         <el-row :gutter="20">
           <template v-for="item in formItems" :key="item.prop">
             <template v-if="item.type === 'title'">
@@ -26,12 +15,7 @@
                 <template v-if="item.tips" #label>
                   <span>
                     {{ item.label }}
-                    <el-tooltip
-                      placement="bottom"
-                      effect="light"
-                      :content="item.tips"
-                      :raw-content="true"
-                    >
+                    <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
                       <el-icon style="vertical-align: -0.15em" size="16">
                         <QuestionFilled />
                       </el-icon>
@@ -103,12 +87,7 @@
                 </template>
                 <!-- 自定义 -->
                 <template v-else-if="item.type === 'custom'">
-                  <slot
-                    :name="item.slotName ?? item.prop"
-                    :prop="item.prop"
-                    :formData="formData"
-                    :attrs="item.attrs"
-                  />
+                  <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData" :attrs="item.attrs" />
                 </template>
               </el-form-item>
             </el-col>
@@ -129,26 +108,13 @@
   </template>
   <!-- dialog -->
   <template v-else>
-    <el-dialog
-      v-model="modalVisible"
-      :align-center="true"
-      :append-to-body="true"
-      width="70vw"
-      v-bind="modalConfig.dialog"
-      style="padding-right: 0"
-      @close="handleCloseModal"
-    >
+    <el-dialog v-model="modalVisible" :align-center="true" :append-to-body="true" width="70vw"
+      v-bind="modalConfig.dialog" style="padding-right: 0" @close="handleCloseModal">
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
-          ref="formRef"
-          label-width="auto"
-          v-bind="modalConfig.form"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="formData"
-          :rules="formRules"
-        >
+        <el-form ref="formRef" label-width="auto" v-bind="modalConfig.form"
+          style="padding-right: var(--el-dialog-padding-primary)" :model="formData" :rules="formRules">
           <el-row :gutter="20">
             <template v-for="item in formItems" :key="item.prop">
               <template v-if="item.type === 'title'">
@@ -162,12 +128,7 @@
                   <template v-if="item.tips" #label>
                     <span>
                       {{ item.label }}
-                      <el-tooltip
-                        placement="bottom"
-                        effect="light"
-                        :content="item.tips"
-                        :raw-content="true"
-                      >
+                      <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
                         <el-icon style="vertical-align: -0.15em" size="16">
                           <QuestionFilled />
                         </el-icon>
@@ -176,11 +137,7 @@
                   </template>
                   <!-- Input 输入框 -->
                   <template v-if="item.type === 'input' || item.type === undefined">
-                    <el-input
-                      v-model="formData[item.prop]"
-                      v-bind="item.attrs"
-                      :disabled="item.disabled"
-                    />
+                    <el-input v-model="formData[item.prop]" v-bind="item.attrs" :disabled="item.disabled" />
                   </template>
                   <!-- textarea 输入框 -->
                   <template v-else-if="item.type === 'textarea'">
@@ -247,12 +204,8 @@
                   </template>
                   <!-- 自定义 -->
                   <template v-else-if="item.type === 'custom'">
-                    <slot
-                      :name="item.slotName ?? item.prop"
-                      :prop="item.prop"
-                      :formData="formData"
-                      :attrs="item.attrs"
-                    />
+                    <slot :name="item.slotName ?? item.prop" :prop="item.prop" :formData="formData"
+                      :attrs="item.attrs" />
                   </template>
                 </el-form-item>
               </el-col>
@@ -412,7 +365,7 @@ function handleDisabled(disable: boolean) {
 }
 
 // 暴露的属性和方法
-defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled });
+defineExpose({ setModalVisible, getFormData, setFormData, setFormItemData, handleDisabled, handleClose });
 </script>
 
 <style lang="scss" scoped>
diff --git a/src/components/CURD/PageSearch.vue b/src/components/CURD/PageSearch.vue
index 1f53cb2..ebc496b 100644
--- a/src/components/CURD/PageSearch.vue
+++ b/src/components/CURD/PageSearch.vue
@@ -1,27 +1,13 @@
 <template>
-  <el-card
-    v-show="visible"
-    v-hasPerm="[`${searchConfig.pageName}:query`]"
-    shadow="never"
-    class="mb-[10px]"
-  >
+  <el-card v-show="visible" v-hasPerm="[`${searchConfig.pageName}:query`]" shadow="never" class="mb-[10px]">
     <el-form ref="queryFormRef" :model="queryParams" :inline="inline">
       <template v-for="(item, index) in formItems" :key="item.prop">
-        <el-form-item
-          v-show="isExpand ? true : index < showNumber"
-          :label="item.label"
-          :prop="item.prop"
-        >
+        <el-form-item v-show="isExpand ? true : index < showNumber" :label="item.label" :prop="item.prop">
           <!-- Label -->
           <template v-if="item.tips" #label>
             <span>
               {{ item.label }}
-              <el-tooltip
-                placement="bottom"
-                effect="light"
-                :content="item.tips"
-                :raw-content="true"
-              >
+              <el-tooltip placement="bottom" effect="light" :content="item.tips" :raw-content="true">
                 <el-icon style="vertical-align: -0.15em" size="16">
                   <QuestionFilled />
                 </el-icon>
@@ -30,11 +16,7 @@
           </template>
           <!-- Input 输入框 -->
           <template v-if="item.type === 'input' || item.type === undefined">
-            <el-input
-              v-model="queryParams[item.prop]"
-              v-bind="item.attrs"
-              @keyup.enter="handleQuery"
-            />
+            <el-input v-model="queryParams[item.prop]" v-bind="item.attrs" @keyup.enter="handleQuery" />
           </template>
           <!-- radio-button radio按钮组 -->
           <template v-if="item.type === 'radio-button'">
@@ -47,30 +29,17 @@
           <!-- InputTag 标签输入框 -->
           <template v-if="item.type === 'input-tag'">
             <div class="flex-center">
-              <el-tag
-                v-for="tag in inputTagMap[item.prop].data"
-                :key="tag"
-                class="mr-2"
-                :closable="true"
-                v-bind="inputTagMap[item.prop].tagAttrs"
-                @close="handleCloseTag(item.prop, tag)"
-              >
+              <el-tag v-for="tag in inputTagMap[item.prop].data" :key="tag" class="mr-2" :closable="true"
+                v-bind="inputTagMap[item.prop].tagAttrs" @close="handleCloseTag(item.prop, tag)">
                 {{ tag }}
               </el-tag>
               <template v-if="inputTagMap[item.prop].inputVisible">
-                <el-input
-                  :ref="(el: HTMLElement) => (inputTagMap[item.prop].inputRef = el)"
-                  v-model="inputTagMap[item.prop].inputValue"
-                  v-bind="inputTagMap[item.prop].inputAttrs"
-                  @keyup.enter="handleInputConfirm(item.prop)"
-                  @blur="handleInputConfirm(item.prop)"
-                />
+                <el-input :ref="(el: HTMLElement) => (inputTagMap[item.prop].inputRef = el)"
+                  v-model="inputTagMap[item.prop].inputValue" v-bind="inputTagMap[item.prop].inputAttrs"
+                  @keyup.enter="handleInputConfirm(item.prop)" @blur="handleInputConfirm(item.prop)" />
               </template>
               <template v-else>
-                <el-button
-                  v-bind="inputTagMap[item.prop].buttonAttrs"
-                  @click="handleShowInput(item.prop)"
-                >
+                <el-button v-bind="inputTagMap[item.prop].buttonAttrs" @click="handleShowInput(item.prop)">
                   {{ inputTagMap[item.prop].buttonAttrs.btnText }}
                 </el-button>
               </template>
@@ -80,7 +49,7 @@
           <template v-else-if="item.type === 'select'">
             <el-select v-model="queryParams[item.prop]" v-bind="item.attrs">
               <template v-for="option in item.options" :key="option.value">
-                <el-option :label="option.label" :value="option.value" />
+                <el-option :label="option.label || option.name" :value="option.value || option.id" />
               </template>
             </el-select>
           </template>
@@ -98,13 +67,8 @@
         <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
         <el-button icon="refresh" @click="handleReset">重置</el-button>
         <!-- 展开/收起 -->
-        <el-link
-          v-if="isExpandable && formItems.length > showNumber"
-          class="ml-2"
-          type="primary"
-          :underline="false"
-          @click="isExpand = !isExpand"
-        >
+        <el-link v-if="isExpandable && formItems.length > showNumber" class="ml-2" type="primary" :underline="false"
+          @click="isExpand = !isExpand">
           <template v-if="isExpand">
             收起
             <el-icon>
diff --git a/src/components/CURD/usePage.ts b/src/components/CURD/usePage.ts
index d0fa009..b12fc26 100644
--- a/src/components/CURD/usePage.ts
+++ b/src/components/CURD/usePage.ts
@@ -6,7 +6,6 @@ function usePage() {
   const contentRef = ref<PageContentInstance>();
   const addModalRef = ref<PageModalInstance>();
   const editModalRef = ref<PageModalInstance>();
-
   // 搜索
   function handleQueryClick(queryParams: IObject) {
     const filterParams = contentRef.value?.getFilterParams();
diff --git a/src/components/mycomponents/myDialog.vue b/src/components/mycomponents/myDialog.vue
new file mode 100644
index 0000000..e9d9670
--- /dev/null
+++ b/src/components/mycomponents/myDialog.vue
@@ -0,0 +1,46 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="props.title" :width="props.width">
+    <slot></slot>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取消</el-button>
+        <el-button type="primary" @click="Confirm">
+          确定
+        </el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+import { ElMessageBox } from 'element-plus'
+
+let props = defineProps({
+  title: {
+    type: String,
+    default: 'Dialog'
+  },
+  width: {
+    type: String,
+    default: '30%'
+  }
+})
+const emit = defineEmits(['confirm'])
+const dialogVisible = ref(false)
+
+
+function open() {
+  dialogVisible.value = true
+}
+function Confirm() {
+  dialogVisible.value = false
+  emit('confirm')
+}
+defineExpose({ open })
+</script>
+<style scoped>
+.dialog-footer button:first-child {
+  margin-right: 10px;
+}
+</style>
diff --git a/src/views/devices/config/search.ts b/src/views/devices/config/search.ts
index 364c8cc..6c2931e 100644
--- a/src/views/devices/config/search.ts
+++ b/src/views/devices/config/search.ts
@@ -17,27 +17,22 @@ const searchConfig: ISearchConfig = {
       },
     },
     {
-      type: "tree-select",
-      label: "设备类型",
-      prop: "deptId",
+      type: "select",
+      label: "状态",
+      prop: "status",
       attrs: {
-        placeholder: "请选择设备类型",
-        data: [],
-        filterable: true,
-        "check-strictly": true,
-        "render-after-expand": false,
+        placeholder: "全部",
         clearable: true,
         style: {
-          width: "150px",
+          width: "100px",
         },
       },
-      async initFn(formItem) {
-        formItem.attrs.data = await DeptAPI.getOptions();
-        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
-        // this.attrs!.data = await DeptAPI.getOptions();
-      },
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
     },
-  
+
   ],
 };
 
diff --git a/src/views/online-shop/goods-group.vue b/src/views/online-shop/goods-group.vue
index 41a40c8..8f5959b 100644
--- a/src/views/online-shop/goods-group.vue
+++ b/src/views/online-shop/goods-group.vue
@@ -1 +1,244 @@
-<template></template>
\ No newline at end of file
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <template v-if="isA">
+      <!-- 搜索 -->
+
+
+      <!-- 列表 -->
+      <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
+        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #timemanagement="scope">
+          {{ scope.row.startTime }}-{{ scope.row.endTime }}
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        </template>
+        <template #addButton="scope">
+          <div>
+            <el-button type="primary" @click="addgoods">
+              <el-icon>
+                <Plus />
+              </el-icon>添加商品
+            </el-button>
+            <!-- 选责商品列表 -->
+            <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
+          </div>
+        </template>
+        <template #addmanagementtime="scope">
+          <template v-if="scope.formData.useTime == 1">
+            <el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
+              start-placeholder="开始时间" end-placeholder="结束时间" />
+          </template>
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+        <template #addButton="scope">
+          <div>
+            <el-button type="primary" @click="addgoods">
+              <el-icon>
+                <Plus />
+              </el-icon>添加商品
+            </el-button>
+            <!-- 选责商品列表 -->
+            <selectGoodslist @deleteItememit="deleteItem($event)" :list="selectData"></selectGoodslist>
+          </div>
+        </template>
+        <template #addmanagementtime="scope">
+          <template v-if="scope.formData.useTime == 1">
+            {{ scope.formData }}
+            <el-time-picker value-format="HH:mm:ss" v-model="scope.formData.saleTime" is-range range-separator="到"
+              start-placeholder="开始时间" end-placeholder="结束时间" />
+          </template>
+        </template>
+      </page-modal>
+    </template>
+    <template v-else>
+      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
+    <!-- 新增 -->
+    <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
+
+    </myDialog>
+    <!-- 新增添加商品 -->
+    <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
+      <page-search ref="searchRef" :search-config="searchConfig2" @query-click="handleQueryClick"
+        @reset-click="handleResetClick" />
+      <page-content ref="contentRefs" :content-config="contentConfig2" @add-click="handleAddClick"
+        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #timemanagement="scope">
+          {{ scope.row.startTime }}-{{ scope.row.endTime }}
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        </template>
+      </page-content>
+    </myDialog>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./goodsGroupconfig/add";
+import contentConfig from "./goodsGroupconfig/content";
+import contentConfig2 from "./goodsGroupconfig/content2";
+import editModalConfig from "./goodsGroupconfig/edit";
+import searchConfig from "./goodsGroupconfig/search";
+import searchConfig2 from "./goodsGroupconfig/search2";
+import myDialog from '@/components/mycomponents/myDialog.vue'
+import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue"
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleAddClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+// 新增
+async function handleAddClick() {
+  console.log(123)
+  // addModalRef.value?.setModalVisible();
+  selectData.value = []
+  // 加载上级规格下拉数据源 
+  // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // 加载角色下拉数据源
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+const myDialogRef = ref(null)
+const contentRefs = ref(null)
+// 选中的商品数据
+let selectData = ref([])
+// 添加商品
+function addgoods() {
+  myDialogRef.value.open()
+  const oldfun = addModalConfig.formAction
+  addModalConfig.formAction = (data) => {
+    oldfun({
+      ...data,
+      selectgoods: selectData.value
+    })
+    addModalRef.value.handleClose();
+    handleSubmitClick()
+  }
+}
+// 删除商品
+function deleteItem(data: any) {
+  selectData.value = data
+}
+// 添加商品的回调
+function subitgood() {
+  selectData.value = contentRefs.value.getselectTable()
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  // 加载部门下拉数据源
+  // editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // 根据id获取数据进行填充
+  const data = await UserAPI.getunitinfo(row.id);
+  let obj = { ...data }
+  selectData.value = data.productList
+  obj.selectgoods = data.productList
+  obj.saleTime = [data.saleStartTime, data.saleEndTime]
+  console.log(obj, 'dbug')
+  editModalRef.value?.setFormData(obj);
+  editModalRef.value?.setModalVisible();
+
+}
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    ElMessage.success("点击了自定义1按钮");
+  }
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+  // 重置密码
+  if (data.name === "reset_pwd") {
+    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    }).then(({ value }) => {
+      if (!value || value.length < 6) {
+        ElMessage.warning("密码至少需要6位字符，请重新输入");
+        return false;
+      }
+      // UserAPI.resetPassword(data.row.id, value).then(() => {
+      //   ElMessage.success("密码重置成功，新密码是：" + value);
+      // });
+    });
+  } else if (data.name === "detail") {
+    // 禁用表单编辑
+    editModalRef.value?.handleDisabled(true);
+    // 打开抽屉
+    editModalRef.value?.setModalVisible();
+    // 修改抽屉标题
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
+    // 加载部门下拉数据源
+    // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+    // 加载角色下拉数据源
+    // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+    // 根据id获取数据进行填充
+    // const formData = await UserAPI.getFormData(data.row.id);
+    // 设置表单数据
+    // editModalRef.value?.setFormData(formData);
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>
diff --git a/src/views/online-shop/goodsGroupconfig/add.ts b/src/views/online-shop/goodsGroupconfig/add.ts
new file mode 100644
index 0000000..08d7060
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/add.ts
@@ -0,0 +1,104 @@
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import type { IModalConfig } from "@/components/CURD/types";
+
+const modalConfig: IModalConfig<UserForm> = {
+  pageName: "sys:user",
+  dialog: {
+    title: "新增分组",
+    width: 800,
+    draggable: true,
+  },
+  form: {
+    labelWidth: 100,
+  },
+  formAction: function (data: any) {
+    if (data.selectgoods) {
+      let arr = []
+      data.selectgoods.forEach(element => {
+        arr.push(element.id)
+      });
+      data.productIds = arr
+    }
+    console.log("提交之前处理2", data);
+    return UserAPI.addunit(data)
+  },
+  beforeSubmit(data: any) {
+    if (data.saleTime) {
+      let a = data.saleTime[0]
+      let b = data.saleTime[1]
+      data.saleStartTime = a
+      data.saleEndTime = b
+    }
+  },
+  formItems: [
+    {
+      label: "分组名称",
+      prop: "name",
+      rules: [{ required: true, message: "分组名称不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入分组名称",
+      },
+    },
+    {
+      slotName: "addButton",
+      prop: "selectgoods",
+      attrs: {},
+      type: "custom",
+      label: "选择商品",
+    },
+
+    {
+      label: "分组状态",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    }, {
+      label: "售卖时间管控",
+      prop: "useTime",
+      type: "radio",
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 0,
+    },
+
+    {
+      label: "排列方式",
+      prop: "sortMode",
+      type: "radio",
+      options: [
+        { label: "默认", value: 0 },
+        { label: "价格由高到低", value: 1 },
+        { label: "销量由高到低", value: 2 },
+      ],
+      initialValue: 0,
+    },
+    {
+      label: "分组排序",
+      prop: "sort",
+      type: "input-number",
+      attrs: {
+        controlsPosition: "right"
+      },
+      initialValue: 1,
+    },
+    {
+      slotName: "addmanagementtime",
+      prop: "",
+      type: "custom",
+      label: "",
+    },
+  ],
+};
+export interface UserForm {
+
+}
+// 如果有异步数据会修改配置的，推荐用reactive包裹，而纯静态配置的可以直接导出
+export default reactive(modalConfig);
diff --git a/src/views/online-shop/goodsGroupconfig/content.ts b/src/views/online-shop/goodsGroupconfig/content.ts
new file mode 100644
index 0000000..70fcdd3
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/content.ts
@@ -0,0 +1,74 @@
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import RoleAPI from "@/api/system/role";
+import type { UserPageQuery } from "@/api/system/user";
+import type { IContentConfig } from "@/components/CURD/types";
+
+const contentConfig: IContentConfig<UserPageQuery> = {
+  pageName: "sys:user",
+  table: {
+    border: true,
+    highlightCurrentRow: true,
+  },
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 20,
+    pageSizes: [10, 20, 30, 50],
+  },
+  indexActionData: {},
+  indexAction: function (params) {
+    return UserAPI.getPage(params);
+  },
+  deleteAction: UserAPI.deleteByIds,
+  // importAction(file) {
+  //   return UserAPI.import(1, file);
+  // },
+  // exportAction: UserAPI.export,
+  // importTemplate: UserAPI.downloadTemplate,
+  modifyAction(data) {
+    // console.log("modifyAction:", data);
+  },
+  importsAction(data) {
+    // 模拟导入数据
+    console.log("importsAction", data);
+    return Promise.resolve();
+  },
+  exportsAction: async function (params) {
+    // 模拟获取到的是全量数据
+    const res = await UserAPI.getPage(params);
+    console.log("exportsAction", res.list);
+    return res.list;
+  },
+  pk: "id",
+  toolbar: [
+    "add",
+  ],
+  cols: [
+    { label: "排序", align: "center", prop: "sort", },
+    { label: "分组名称", align: "center", prop: "name", },
+    {
+      label: "售卖时间管控",
+      slotName: "timemanagement",
+      templet: "custom",
+      align: "center",
+    },
+    {
+      label: "状态",
+      align: "center",
+      prop: "useTime",
+      templet: "switch",
+      slotName: "status",
+    },
+    {
+      label: "操作",
+      align: "center",
+      fixed: "right",
+      width: 280,
+      templet: "tool",
+      operat: ["edit", "delete"],
+    },
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/online-shop/goodsGroupconfig/content2.ts b/src/views/online-shop/goodsGroupconfig/content2.ts
new file mode 100644
index 0000000..33d5bce
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/content2.ts
@@ -0,0 +1,34 @@
+import type { IContentConfig } from "@/components/CURD/types";
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
+  toolbar: [],
+
+  indexAction: function (params) {
+    return UserAPI.getPage(params);
+  },
+  modifyAction(data) {
+    // 模拟发起网络请求修改字段
+    // console.log("modifyAction:", data);
+    ElMessage.success(JSON.stringify(data));
+    return Promise.resolve(null);
+  },
+
+  cols: [
+    { type: "selection", width: 50, align: "center" },
+    { label: "商品信息", align: "center", prop: "name" },
+    { label: "规格", align: "center", prop: "specSnap", },
+    { label: "是否售罄", align: "center", prop: "isPauseSale", },
+    { label: "售价", align: "center", prop: "lowPrice", },
+    { label: "库存", align: "center", prop: "realSalesNumber", },
+    { label: "销量", align: "center", prop: "stockNumber", },
+    { label: "分类名称", align: "center", prop: "categoryName", },
+
+  ],
+};
+
+export default contentConfig;
diff --git a/src/views/online-shop/goodsGroupconfig/edit.ts b/src/views/online-shop/goodsGroupconfig/edit.ts
new file mode 100644
index 0000000..64a3150
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/edit.ts
@@ -0,0 +1,135 @@
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import type { IModalConfig } from "@/components/CURD/types";
+import { DeviceEnum } from "@/enums/DeviceEnum";
+import { useAppStore } from "@/store";
+
+const modalConfig: IModalConfig<UserForm> = {
+  pageName: "sys:user",
+  // component: "drawer",
+  dialog: {
+    title: "编辑单位",
+    width: 800,
+    draggable: true,
+  },
+
+  pk: "id",
+  formAction: function (data: any) {
+    if (data.selectgoods) {
+      let arr = []
+      data.selectgoods.forEach(element => {
+        arr.push(element.id)
+      });
+      data.productIds = arr
+    }
+    console.log("提交之前处理2", data);
+    // return UserAPI.update(data);
+
+  },
+  beforeSubmit(data: any) {
+    if (data.saleTime) {
+      let a = data.saleTime[0]
+      let b = data.saleTime[1]
+      data.saleStartTime = a
+      data.saleEndTime = b
+    }
+  },
+  formItems: [
+    {
+      label: "分组名称",
+      prop: "name",
+      rules: [{ required: true, message: "分组名称不能为空", trigger: "blur" }],
+      type: "input",
+      attrs: {
+        placeholder: "请输入分组名称",
+      },
+    },
+    {
+      slotName: "addButton",
+      prop: "selectgoods",
+      attrs: {},
+      type: "custom",
+      label: "选择商品",
+    },
+
+    {
+      label: "分组状态",
+      prop: "status",
+      type: "radio",
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 1,
+    }, {
+      label: "售卖时间管控",
+      prop: "useTime",
+      type: "radio",
+      options: [
+        { label: "启用", value: 1 },
+        { label: "禁用", value: 0 },
+      ],
+      initialValue: 0,
+    },
+
+    {
+      label: "排列方式",
+      prop: "sortMode",
+      type: "radio",
+      options: [
+        { label: "默认", value: '0' },
+        { label: "价格由高到低", value: '1' },
+        { label: "销量由高到低", value: '2' },
+      ],
+      initialValue: '0',
+    },
+    {
+      label: "分组排序",
+      prop: "sort",
+      type: "input-number",
+      attrs: {
+        controlsPosition: "right"
+      },
+    },
+    {
+      slotName: "addmanagementtime",
+      prop: "",
+      type: "custom",
+      label: " ",
+    },
+    {
+      prop: "saleTime",
+      label: "",
+      attrs: {
+      },
+      watch() {
+
+      }
+    },
+  ],
+};
+/** 用户表单类型 */
+interface UserForm {
+  /** 用户头像 */
+  avatar?: string;
+  /** 部门ID */
+  deptId?: number;
+  /** 邮箱 */
+  email?: string;
+  /** 性别 */
+  gender?: number;
+  /** 用户ID */
+  id?: number;
+  /** 手机号 */
+  mobile?: string;
+  /** 昵称 */
+  nickname?: string;
+  /** 角色ID集合 */
+  roleIds?: number[];
+  /** 用户状态(1:正常;0:禁用) */
+  status?: number;
+  /** 用户名 */
+  username?: string;
+}
+
+export default reactive(modalConfig);
diff --git a/src/views/online-shop/goodsGroupconfig/search.ts b/src/views/online-shop/goodsGroupconfig/search.ts
new file mode 100644
index 0000000..b8c8595
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/search.ts
@@ -0,0 +1,101 @@
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import DeptAPI from "@/api/product/specificationsconfig";
+
+import type { ISearchConfig } from "@/components/CURD/types";
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "商品名称",
+      prop: "name",
+      attrs: {
+        placeholder: "请输入商品名称",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "select",
+      label: "商品分类",
+      prop: "categoryId",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await UserAPI.getList();
+      },
+    },
+
+    {
+      type: "tree-select",
+      label: "商品规格",
+      prop: "specId",
+      attrs: {
+        placeholder: "请选择商品规格",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+        props: {
+          label: 'name', // 指定节点显示的文本字段为 name
+          value: 'id'    // 指定节点的值字段为 id
+        }
+      },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getPage();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
+    },
+    {
+      type: "date-picker",
+      label: "日期",
+      prop: "times",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        style: {
+          width: "240px",
+        },
+      }
+    },
+    {
+      type: "select",
+      label: "排序",
+      prop: "orderBy",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [{
+        label: "创建时间",
+        value: "create_time asc"
+      }, {
+        label: "数量由低到高",
+        value: "stock_number asc"
+      }],
+    },
+  ],
+};
+
+export default searchConfig;
diff --git a/src/views/online-shop/goodsGroupconfig/search2.ts b/src/views/online-shop/goodsGroupconfig/search2.ts
new file mode 100644
index 0000000..e9237eb
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/search2.ts
@@ -0,0 +1,41 @@
+import DeptAPI from "@/api/product/specificationsconfig";
+import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+
+import type { ISearchConfig } from "@/components/CURD/types";
+
+const searchConfig: ISearchConfig = {
+  pageName: "sys:user",
+  formItems: [
+    {
+      type: "input",
+      label: "商品名称",
+      prop: "name",
+      attrs: {
+        placeholder: "请输入商品名称",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+    },
+    {
+      type: "select",
+      label: "商品分类",
+      prop: "categoryId",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await UserAPI.getList();
+      },
+    },
+
+  ],
+};
+
+export default searchConfig;
diff --git a/src/views/online-shop/goodsGroupconfig/selectGoodslist.vue b/src/views/online-shop/goodsGroupconfig/selectGoodslist.vue
new file mode 100644
index 0000000..467c533
--- /dev/null
+++ b/src/views/online-shop/goodsGroupconfig/selectGoodslist.vue
@@ -0,0 +1,92 @@
+<template>
+  <div class="shop_list">
+    <div class="item_wrap" v-for="(item, index) in props.list" :key="item.id" @click="deleteItem(index)">
+      <div class="item" :data-index="index + 1">
+        <el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
+      </div>
+      <div class="name">{{ item.name }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => [],
+  },
+
+});
+const emit = defineEmits(['deleteItememit'])
+function deleteItem(index: number) {
+  props.list.splice(index, 1);
+  emit('deleteItememit', props.list)
+}
+</script>
+<style scoped lang="scss">
+.shop_list {
+  display: flex;
+  flex-wrap: wrap;
+
+  .item_wrap {
+    $size: 80px;
+
+    .item {
+      $radius: 4px;
+      width: $size;
+      height: $size;
+      border-radius: $radius;
+      overflow: hidden;
+      position: relative;
+      margin-right: 10px;
+      margin-top: 10px;
+
+      &:hover {
+        cursor: pointer;
+      }
+
+      &::after {
+        content: attr(data-index);
+        font-size: 12px;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        border-radius: 0 0 $radius 0;
+        align-items: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        top: 0;
+        left: 0;
+        z-index: 10;
+      }
+
+      &::before {
+        content: '删除';
+        font-size: 12px;
+        width: 100%;
+        height: 20px;
+        display: flex;
+        padding: 0 10px;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(0, 0, 0, 0.3);
+        backdrop-filter: blur(10px);
+        color: #fff;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        z-index: 10;
+        transition: all .1s ease-in-out;
+      }
+    }
+
+    .name {
+      width: $size;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/product/categoryconfig/content.ts b/src/views/product/categoryconfig/content.ts
index f5ec645..7cc602f 100644
--- a/src/views/product/categoryconfig/content.ts
+++ b/src/views/product/categoryconfig/content.ts
@@ -25,7 +25,10 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   //   return UserAPI.import(1, file);
   // },
   // exportAction: UserAPI.export,
-  modifyAction: UserAPI.update,
+  modifyAction: function (params) {
+    let obj = { sort: "1", ...params }
+    return UserAPI.update(obj);
+  },
 
   // importTemplate: UserAPI.downloadTemplate,
   // importsAction(data) {
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index af62d11..9f20cf7 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -1 +1,163 @@
-<template>123</template>
\ No newline at end of file
+<template>
+  <div class="app-container">
+    <!-- 列表 -->
+    <template v-if="isA">
+      <!-- 搜索 -->
+      <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
+        @reset-click="handleResetClick" />
+      <!-- 顶部数据 -->
+      <Statistics></Statistics>
+      <!-- 列表 -->
+      <page-content ref="contentRef" :content-config="contentConfig" @add-click="handleAddClick"
+        @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
+        @toolbar-click="handleToolbarClick" @operat-click="handleOperatClick" @filter-change="handleFilterChange">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+        <template #gender="scope">
+          <DictLabel v-model="scope.row[scope.prop]" code="gender" />
+        </template>
+        <template #mobile="scope">
+          <el-text>{{ scope.row[scope.prop] }}</el-text>
+          <copy-button v-if="scope.row[scope.prop]" :text="scope.row[scope.prop]" style="margin-left: 2px" />
+        </template>
+      </page-content>
+
+      <!-- 新增 -->
+      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" />
+        </template>
+      </page-modal>
+
+      <!-- 编辑 -->
+      <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
+        <template #gender="scope">
+          <Dict v-model="scope.formData[scope.prop]" code="gender" v-bind="scope.attrs" />
+        </template>
+      </page-modal>
+
+      <!-- 库存预警设置 -->
+      <MyDialog ref="myDialogRef" @confirm="confirm" title="修改库存预警">
+        <el-form :model="form">
+          <el-form-item label="库存预警" label-width="">
+            <el-input-number v-model="form.num" label="描述文字"></el-input-number>
+          </el-form-item>
+        </el-form>
+      </MyDialog>
+    </template>
+    <template v-else>
+      <page-content ref="contentRef" :content-config="contentConfig2" @operat-click="handleOperatClick">
+        <template #status="scope">
+          <el-tag :type="scope.row[scope.prop] == 1 ? 'success' : 'info'">
+            {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
+          </el-tag>
+        </template>
+      </page-content>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import UserAPI from "@/api/product/index";
+import type { IObject, IOperatData } from "@/components/CURD/types";
+import usePage from "@/components/CURD/usePage";
+import addModalConfig from "./indexconfig/add";
+import contentConfig from "./indexconfig/content";
+import contentConfig2 from "./indexconfig/content2";
+import editModalConfig from "./indexconfig/edit";
+import searchConfig from "./indexconfig/search";
+import MyDialog from "@/components/mycomponents/myDialog.vue";
+import Statistics from "./indexconfig/statistics.vue";
+
+const {
+  searchRef,
+  contentRef,
+  addModalRef,
+  editModalRef,
+  handleQueryClick,
+  handleResetClick,
+  // handleEditClick,
+  handleSubmitClick,
+  handleExportClick,
+  handleSearchClick,
+  handleFilterChange,
+} = usePage();
+
+const form = reactive({
+  num: '',
+})
+// 新增
+async function handleAddClick() {
+  addModalRef.value?.setModalVisible();
+  // 加载上级规格下拉数据源 
+  addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // 加载角色下拉数据源
+  // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+}
+// 编辑
+async function handleEditClick(row: IObject) {
+  editModalRef.value?.handleDisabled(false);
+  // 加载部门下拉数据源
+  editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+  // 加载角色下拉数据源
+  // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+  // 根据id获取数据进行填充
+  const data = await UserAPI.getunitinfo(row.id);
+  editModalRef.value?.setFormData(data);
+  editModalRef.value?.setModalVisible();
+
+}
+const myDialogRef = ref(null)
+// 其他工具栏
+function handleToolbarClick(name: string) {
+  console.log(name);
+  if (name === "custom1") {
+    // ElMessage.success("点击了自定义1按钮");
+    myDialogRef.value.open()
+  }
+}
+function confirm() {
+  console.log(form, 'debug')
+}
+// 其他操作列
+async function handleOperatClick(data: IOperatData) {
+  console.log(data);
+  // 重置密码
+  if (data.name === "reset_pwd") {
+    ElMessageBox.prompt("请输入用户「" + data.row.username + "」的新密码", "重置密码", {
+      confirmButtonText: "确定",
+      cancelButtonText: "取消",
+    }).then(({ value }) => {
+      if (!value || value.length < 6) {
+        ElMessage.warning("密码至少需要6位字符，请重新输入");
+        return false;
+      }
+      // UserAPI.resetPassword(data.row.id, value).then(() => {
+      //   ElMessage.success("密码重置成功，新密码是：" + value);
+      // });
+    });
+  } else if (data.name === "detail") {
+    // 禁用表单编辑
+    editModalRef.value?.handleDisabled(true);
+    // 打开抽屉
+    editModalRef.value?.setModalVisible();
+    // 修改抽屉标题
+    editModalConfig.drawer = { ...editModalConfig.drawer, title: "用户详情" };
+    // 加载部门下拉数据源
+    // editModalConfig.formItems[2]!.attrs!.data = await DeptAPI.getOptions();
+    // 加载角色下拉数据源
+    // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
+    // 根据id获取数据进行填充
+    // const formData = await UserAPI.getFormData(data.row.id);
+    // 设置表单数据
+    // editModalRef.value?.setFormData(formData);
+  }
+}
+
+// 切换示例
+const isA = ref(true);
+</script>
diff --git a/src/views/product/indexconfig/add.ts b/src/views/product/indexconfig/add.ts
index 5c50170..bc6ce31 100644
--- a/src/views/product/indexconfig/add.ts
+++ b/src/views/product/indexconfig/add.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";
 
 import type { IModalConfig } from "@/components/CURD/types";
 
diff --git a/src/views/product/indexconfig/content.ts b/src/views/product/indexconfig/content.ts
index 9eaa784..a7a44a3 100644
--- a/src/views/product/indexconfig/content.ts
+++ b/src/views/product/indexconfig/content.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";
 import RoleAPI from "@/api/system/role";
 import type { UserPageQuery } from "@/api/system/user";
 import type { IContentConfig } from "@/components/CURD/types";
@@ -15,9 +15,12 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     pageSize: 20,
     pageSizes: [10, 20, 30, 50],
   },
-  indexActionData: { name: "", orderBy: "name asc" },
+  indexActionData: {},
   indexAction: function (params) {
-    return UserAPI.getPage(params);
+    let obj = { ...params, ...params.times }
+    obj.createBeginTime = obj['0']
+    obj.createEndTime = obj['1']
+    return UserAPI.getPage(obj);
   },
   deleteAction: UserAPI.deleteByIds,
   // importAction(file) {
@@ -39,11 +42,35 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   pk: "id",
   toolbar: [
     "add",
+    //  {
+    //   icon: "edit",
+    //   text: "库存预警",
+    //   type: "info",
+    //   name: "custom1",
+    //   auth: "import",
+    // },
   ],
   cols: [
     // { type: "selection", width: 50, align: "center" },
-    { label: "单位名称", align: "center", prop: "name" },
-    { label: "排序", align: "center", prop: "id" },
+    { label: "封面图", align: "center", prop: "coverImg", templet: "image" },
+    { label: "分类名称", align: "center", prop: "categoryName", },
+    { label: "售价", align: "center", prop: "id" },
+    { label: "规格名称", align: "center", prop: "specName" },
+    { label: "库存", align: "center", prop: "stockNumber" },
+    { label: "耗材信息", align: "center", prop: "id" },
+    {
+      label: "上架",
+      align: "center",
+      prop: "isSale",
+      templet: "switch",
+      slotName: "status",
+    }, {
+      label: "是否启用库存",
+      align: "center",
+      prop: "isStock",
+      templet: "switch",
+      slotName: "status",
+    },
     {
       label: "操作",
       align: "center",
diff --git a/src/views/product/indexconfig/edit.ts b/src/views/product/indexconfig/edit.ts
index 7531cc8..032c0a8 100644
--- a/src/views/product/indexconfig/edit.ts
+++ b/src/views/product/indexconfig/edit.ts
@@ -1,4 +1,4 @@
-import UserAPI from "@/api/product/commonUnits";
+import UserAPI from "@/api/product/index";
 
 import type { IModalConfig } from "@/components/CURD/types";
 import { DeviceEnum } from "@/enums/DeviceEnum";
diff --git a/src/views/product/indexconfig/search.ts b/src/views/product/indexconfig/search.ts
index ccdd206..1737f91 100644
--- a/src/views/product/indexconfig/search.ts
+++ b/src/views/product/indexconfig/search.ts
@@ -1,4 +1,6 @@
-import DeptAPI from "@/api/system/dept";
+import UserAPI from "@/api/product/productclassification";
+import DeptAPI from "@/api/product/specificationsconfig";
+
 import type { ISearchConfig } from "@/components/CURD/types";
 
 const searchConfig: ISearchConfig = {
@@ -6,38 +8,92 @@ const searchConfig: ISearchConfig = {
   formItems: [
     {
       type: "input",
-      label: "单位名称",
+      label: "商品名称",
       prop: "name",
       attrs: {
-        placeholder: "请输入单位名称",
+        placeholder: "请输入商品名称",
         clearable: true,
         style: {
           width: "200px",
         },
       },
     },
-    // {
-    //   type: "tree-select",
-    //   label: "设备类型",
-    //   prop: "deptId",
-    //   attrs: {
-    //     placeholder: "请选择设备类型",
-    //     data: [],
-    //     filterable: true,
-    //     "check-strictly": true,
-    //     "render-after-expand": false,
-    //     clearable: true,
-    //     style: {
-    //       width: "150px",
-    //     },
-    //   },
-    //   async initFn(formItem) {
-    //     formItem.attrs.data = await DeptAPI.getOptions();
-    //     // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
-    //     // this.attrs!.data = await DeptAPI.getOptions();
-    //   },
-    // },
+    {
+      type: "select",
+      label: "商品分类",
+      prop: "categoryId",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [],
+      async initFn(formItem) {
+        formItem.options = await UserAPI.getList();
+      },
+    },
 
+    {
+      type: "tree-select",
+      label: "商品规格",
+      prop: "specId",
+      attrs: {
+        placeholder: "请选择商品规格",
+        data: [],
+        filterable: true,
+        "check-strictly": true,
+        "render-after-expand": false,
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+        props: {
+          label: 'name', // 指定节点显示的文本字段为 name
+          value: 'id'    // 指定节点的值字段为 id
+        }
+      },
+      async initFn(formItem) {
+        formItem.attrs.data = await DeptAPI.getPage();
+        // 注意:如果initFn函数不是箭头函数,this会指向此配置项对象,那么也就可以用this来替代形参formItem
+        // this.attrs!.data = await DeptAPI.getOptions();
+      },
+    },
+    {
+      type: "date-picker",
+      label: "日期",
+      prop: "times",
+      attrs: {
+        type: "daterange",
+        "range-separator": "~",
+        "start-placeholder": "开始时间",
+        "end-placeholder": "截止时间",
+        "value-format": "YYYY-MM-DD",
+        style: {
+          width: "240px",
+        },
+      }
+    },
+    {
+      type: "select",
+      label: "排序",
+      prop: "orderBy",
+      attrs: {
+        placeholder: "请选择商品分类",
+        clearable: true,
+        style: {
+          width: "200px",
+        },
+      },
+      options: [{
+        label: "创建时间",
+        value: "create_time asc"
+      }, {
+        label: "数量由低到高",
+        value: "stock_number asc"
+      }],
+    },
   ],
 };
 
diff --git a/src/views/product/indexconfig/statistics.vue b/src/views/product/indexconfig/statistics.vue
new file mode 100644
index 0000000..560b077
--- /dev/null
+++ b/src/views/product/indexconfig/statistics.vue
@@ -0,0 +1,100 @@
+<template>
+  <div class="statistics">
+    <div style="width:  200px;">
+      <el-icon class="iconStyle">
+        <PieChart />
+      </el-icon>
+      <span>商品种树</span>
+      <span>{{ datas.totalRow }}</span>
+    </div>
+    <div style="width:  300px;">
+      <el-icon class="iconStyle">
+        <SortUp />
+      </el-icon>
+      <div>
+        <div><span>增加数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动增加：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>退货：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div style="width:  400px;">
+      <el-icon class="iconStyle">
+        <SortDown />
+      </el-icon>
+      <div>
+        <div><span>减少数量：</span><span>0</span></div>
+        <div style="display: flex;">
+          <div>
+            <span>手动减少：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>销售量：</span><span>0</span>
+          </div>
+          <span style="margin: 0 20px;color: #ccc;">|</span>
+          <div>
+            <span>报损：</span><span>0</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import UserAPI from "@/api/product/index";
+import { onMounted, reactive } from "vue";
+onMounted(() => {
+  getPage();
+})
+let datas = reactive({
+  totalRow: 0
+})
+async function getPage() {
+  let res = await UserAPI.getPage();
+  datas.totalRow = res.totalRow
+}
+</script>
+
+
+<style scoped lang="scss">
+.statistics {
+  border: 1px solid #e4e7ed;
+  background-color: #fff;
+  border-radius: 4px;
+  margin-bottom: 10px;
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: space-around;
+
+  >div {
+    height: 80px;
+    background-color: #f4f9ff;
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+
+    padding: 20px;
+
+    .iconStyle {
+      background-color: #d4e9fe;
+      border-radius: 50%;
+      padding: 6px;
+      font-size: 36px;
+      color: #3f9eff;
+    }
+
+    span {
+      color: #666;
+      font-size: 14px;
+    }
+  }
+}
+</style>
\ No newline at end of file