feat: 商品列表添加完成一半

src/api/product/commonUnits.ts

@@ -12,6 +12,14 @@ const AuthAPI = {
       params,
     });
   },
+  // 列表
+  getList(params: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/list`,
+      method: "get",
+      params,
+    });
+  },
   // 单位新增
   addunit(data: any) {
     return request<any, Responseres>({

src/api/product/index.ts

@@ -41,7 +41,14 @@ const AuthAPI = {
       method: "delete",
     });
   },
-
+  // 上下架
+  onOff(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/on-off`,
+      method: "post",
+      data,
+    });
+  },
 
 };
 

src/components/CURD/PageContent.vue

@@ -8,58 +8,37 @@
           <template v-if="typeof item === 'string'">
             <!-- 新增 -->
             <template v-if="item === 'add'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="success" icon="plus"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="success"
-                icon="plus"
-                @click="handleToolbar(item)"
-              >
                 新增
               </el-button>
             </template>
             <!-- 删除 -->
             <template v-else-if="item === 'delete'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="danger" icon="delete"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                :disabled="removeIds.length === 0" @click="handleToolbar(item)">
-                type="danger"
-                icon="delete"
-                :disabled="removeIds.length === 0"
-                @click="handleToolbar(item)"
-              >
                 删除
               </el-button>
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'import'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="upload"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="default"
-                icon="upload"
-                @click="handleToolbar(item)"
-              >
                 导入
               </el-button>
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'export'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]" type="default" icon="download"
-                v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                @click="handleToolbar(item)">
-                type="default"
-                icon="download"
-                @click="handleToolbar(item)"
-              >
                 导出
               </el-button>
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
-            <el-button
+            <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon"
-              v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+              :type="item.type ?? 'default'" @click="handleToolbar(item.name)">
-              :icon="item.icon"
-              :type="item.type ?? 'default'"
-              @click="handleToolbar(item.name)"
-            >
               {{ item.text }}
             </el-button>
           </template>
@@ -88,68 +67,36 @@
             </template>
             <!-- 导出 -->
             <template v-else-if="item === 'exports'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:export`]" icon="download" circle title="导出"
-                v-hasPerm="[`${contentConfig.pageName}:export`]"
+                @click="handleToolbar(item)" />
-                icon="download"
-                circle
-                title="导出"
-                @click="handleToolbar(item)"
-              />
             </template>
             <!-- 导入 -->
             <template v-else-if="item === 'imports'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:import`]" icon="upload" circle title="导入"
-                v-hasPerm="[`${contentConfig.pageName}:import`]"
+                @click="handleToolbar(item)" />
-                icon="upload"
-                circle
-                title="导入"
-                @click="handleToolbar(item)"
-              />
             </template>
             <!-- 搜索 -->
             <template v-else-if="item === 'search'">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:query`]" icon="search" circle title="搜索"
-                v-hasPerm="[`${contentConfig.pageName}:query`]"
+                @click="handleToolbar(item)" />
-                icon="search"
-                circle
-                title="搜索"
-                @click="handleToolbar(item)"
-              />
             </template>
           </template>
           <!-- 其他 -->
           <template v-else-if="typeof item === 'object'">
             <template v-if="item.auth">
-              <el-button
+              <el-button v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]" :icon="item.icon" circle
-                v-hasPerm="[`${contentConfig.pageName}:${item.auth}`]"
+                :title="item.title" @click="handleToolbar(item.name)" />
-                :icon="item.icon"
-                circle
-                :title="item.title"
-                @click="handleToolbar(item.name)"
-              />
             </template>
             <template v-else>
-              <el-button
+              <el-button :icon="item.icon" circle :title="item.title" @click="handleToolbar(item.name)" />
-                :icon="item.icon"
-                circle
-                :title="item.title"
-                @click="handleToolbar(item.name)"
-              />
             </template>
           </template>
         </template>
       </div>
     </div>
     <!-- 列表 -->
-    <el-table
+    <el-table ref="tableRef" v-loading="loading" v-bind="contentConfig.table" :data="pageData" :row-key="pk"
-      ref="tableRef"
+      @selection-change="handleSelectionChange" @filter-change="handleFilterChange">
-      v-loading="loading"
-      v-bind="contentConfig.table"
-      :data="pageData"
-      :row-key="pk"
-      @selection-change="handleSelectionChange"
-      @filter-change="handleFilterChange"
-    >
       <template v-for="col in cols" :key="col">
         <el-table-column v-if="col.show" v-bind="col">
           <template #default="scope">
@@ -158,24 +105,15 @@
               <template v-if="col.prop">
                 <template v-if="Array.isArray(scope.row[col.prop])">
                   <template v-for="(item, index) in scope.row[col.prop]" :key="item">
-                    <el-image
+                    <el-image :src="item" :preview-src-list="scope.row[col.prop]" :initial-index="index"
-                      :src="item"
+                      :preview-teleported="true" :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40
-                      :preview-src-list="scope.row[col.prop]"
+                        }px`" />
-                      :initial-index="index"
-                      :preview-teleported="true"
-                      :style="`width: ${col.imageWidth ?? 40}px; height: ${
-                        col.imageHeight ?? 40
-                      }px`"
-                    />
                   </template>
                 </template>
                 <template v-else>
-                  <el-image
+                  <el-image :src="scope.row[col.prop]" :preview-src-list="[scope.row[col.prop]]"
-                    :src="scope.row[col.prop]"
-                    :preview-src-list="[scope.row[col.prop]]"
                     :preview-teleported="true"
-                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`"
+                    :style="`width: ${col.imageWidth ?? 40}px; height: ${col.imageHeight ?? 40}px`" />
-                  />
                 </template>
               </template>
             </template>
@@ -197,30 +135,20 @@
             <template v-else-if="col.templet === 'switch'">
               <template v-if="col.prop">
                 <!-- pageData.length>0: 解决el-switch组件会在表格初始化的时候触发一次change事件 -->
-                <el-switch
+                <el-switch v-model="scope.row[col.prop]" :active-value="col.activeValue ?? 1"
-                  v-model="scope.row[col.prop]"
+                  :inactive-value="col.inactiveValue ?? 0" :inline-prompt="true" :active-text="col.activeText ?? ''"
-                  :active-value="col.activeValue ?? 1"
+                  :inactive-text="col.inactiveText ?? ''" :validate-event="false"
-                  :inactive-value="col.inactiveValue ?? 0"
+                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)" @change="
-                  :inline-prompt="true"
-                  :active-text="col.activeText ?? ''"
-                  :inactive-text="col.inactiveText ?? ''"
-                  :validate-event="false"
-                  :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
-                  @change="
                     pageData.length > 0 && handleModify(col.prop, scope.row[col.prop], scope.row)
-                  "
+                    " />
-                />
               </template>
             </template>
             <!-- 生成输入框组件 -->
             <template v-else-if="col.templet === 'input'">
               <template v-if="col.prop">
-                <el-input
+                <el-input v-model="scope.row[col.prop]" :type="col.inputType ?? 'text'"
-                  v-model="scope.row[col.prop]"
-                  :type="col.inputType ?? 'text'"
                   :disabled="!hasAuth(`${contentConfig.pageName}:modify`)"
-                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)"
+                  @blur="handleModify(col.prop, scope.row[col.prop], scope.row)" />
-                />
               </template>
             </template>
             <!-- 格式化为价格 -->
@@ -252,7 +180,7 @@
                 {{
                   scope.row[col.prop]
                     ? useDateFormat(scope.row[col.prop], col.dateFormat ?? "YYYY-MM-DD HH:mm:ss")
-                        .value
+                      .value
                     : ""
                 }}
               </template>
@@ -263,21 +191,15 @@
                 <template v-if="typeof item === 'string'">
                   <!-- 编辑/删除 -->
                   <template v-if="item === 'edit' || item === 'delete'">
-                    <el-button
+                    <el-button v-hasPerm="[`${contentConfig.pageName}:${item}`]"
-                      v-hasPerm="[`${contentConfig.pageName}:${item}`]"
+                      :type="item === 'edit' ? 'primary' : 'danger'" :icon="item" size="small" link @click="
-                      :type="item === 'edit' ? 'primary' : 'danger'"
-                      :icon="item"
-                      size="small"
-                      link
-                      @click="
                         handleOperat({
                           name: item,
                           row: scope.row,
                           column: scope.column,
                           $index: scope.$index,
                         })
-                      "
+                        ">
-                    >
                       {{ item === "edit" ? "编辑" : "删除" }}
                     </el-button>
                   </template>
@@ -285,41 +207,28 @@
                 <!-- 其他 -->
                 <template v-else-if="typeof item === 'object'">
                   <el-dropdown>
-                    <el-button
+                    <el-button v-if="item.render === undefined || item.render(scope.row)" v-bind="item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
-                      v-if="item.render === undefined || item.render(scope.row)"
+                      " :icon="item.icon" :type="item.type ?? 'primary'" size="small" link @click="
-                      v-bind="
-                        item.auth ? { 'v-hasPerm': [`${contentConfig.pageName}:${item.auth}`] } : {}
-                      "
-                      :icon="item.icon"
-                      :type="item.type ?? 'primary'"
-                      size="small"
-                      link
-                      @click="
                         handleOperat({
                           name: item.name,
                           row: scope.row,
                           column: scope.column,
                           $index: scope.$index,
                         })
-                      "
+                        ">
-                    >
                       {{ item.text }}
                     </el-button>
                     <template #dropdown v-if="item.options && item.options.length > 0">
                       <el-dropdown-menu>
-                        <el-dropdown-item
+                        <el-dropdown-item @click="
-                          @click="
+                          handleOperat({
-                            handleOperat({
+                            name: item.name,
-                              name: item.name,
+                            row: scope.row,
-                              row: scope.row,
+                            column: scope.column,
-                              column: scope.column,
+                            $index: scope.$index,
-                              $index: scope.$index,
+                            command: opt.command ? opt.command : '',
-                              command: opt.command ? opt.command : '',
+                          })
-                            })
+                          " v-for="opt in item.options" :key="opt.value">
-                          "
-                          v-for="opt in item.options"
-                          :key="opt.value"
-                        >
                           {{ opt.label }}
                         </el-dropdown-item>
                       </el-dropdown-menu>
@@ -340,33 +249,18 @@
     <template v-if="showPagination">
       <el-scrollbar>
         <div class="mt-[12px]">
-          <el-pagination
+          <el-pagination v-bind="pagination" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
-            v-bind="pagination"
-            @size-change="handleSizeChange"
-            @current-change="handleCurrentChange"
-          />
         </div>
       </el-scrollbar>
     </template>
     <!-- 导出弹窗 -->
-    <el-dialog
+    <el-dialog v-model="exportsModalVisible" :align-center="true" title="导出数据" width="600px" style="padding-right: 0"
-      v-model="exportsModalVisible"
+      @close="handleCloseExportsModal">
-      :align-center="true"
-      title="导出数据"
-      width="600px"
-      style="padding-right: 0"
-      @close="handleCloseExportsModal"
-    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
+        <el-form ref="exportsFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          ref="exportsFormRef"
+          :model="exportsFormData" :rules="exportsFormRules">
-          label-width="auto"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="exportsFormData"
-          :rules="exportsFormRules"
-        >
           <el-form-item label="文件名" prop="filename">
             <el-input v-model="exportsFormData.filename" clearable />
           </el-form-item>
@@ -376,16 +270,10 @@
           <el-form-item label="数据源" prop="origin">
             <el-select v-model="exportsFormData.origin">
               <el-option label="当前数据 (当前页的数据)" :value="ExportsOriginEnum.CURRENT" />
-              <el-option
+              <el-option label="选中数据 (所有选中的数据)" :value="ExportsOriginEnum.SELECTED"
-                label="选中数据 (所有选中的数据)"
+                :disabled="selectionData.length <= 0" />
-                :value="ExportsOriginEnum.SELECTED"
+              <el-option label="全量数据 (所有分页的数据)" :value="ExportsOriginEnum.REMOTE"
-                :disabled="selectionData.length <= 0"
+                :disabled="contentConfig.exportsAction === undefined" />
-              />
-              <el-option
-                label="全量数据 (所有分页的数据)"
-                :value="ExportsOriginEnum.REMOTE"
-                :disabled="contentConfig.exportsAction === undefined"
-              />
             </el-select>
           </el-form-item>
           <el-form-item label="字段" prop="fields">
@@ -406,35 +294,17 @@
       </template>
     </el-dialog>
     <!-- 导入弹窗 -->
-    <el-dialog
+    <el-dialog v-model="importModalVisible" :align-center="true" title="导入数据" width="600px" style="padding-right: 0"
-      v-model="importModalVisible"
+      @close="handleCloseImportModal">
-      :align-center="true"
-      title="导入数据"
-      width="600px"
-      style="padding-right: 0"
-      @close="handleCloseImportModal"
-    >
       <!-- 滚动 -->
       <el-scrollbar max-height="60vh">
         <!-- 表单 -->
-        <el-form
+        <el-form ref="importFormRef" label-width="auto" style="padding-right: var(--el-dialog-padding-primary)"
-          ref="importFormRef"
+          :model="importFormData" :rules="importFormRules">
-          label-width="auto"
-          style="padding-right: var(--el-dialog-padding-primary)"
-          :model="importFormData"
-          :rules="importFormRules"
-        >
           <el-form-item label="文件名" prop="files">
-            <el-upload
+            <el-upload ref="uploadRef" v-model:file-list="importFormData.files" class="w-full"
-              ref="uploadRef"
-              v-model:file-list="importFormData.files"
-              class="w-full"
               accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel"
-              :drag="true"
+              :drag="true" :limit="1" :auto-upload="false" :on-exceed="handleFileExceed">
-              :limit="1"
-              :auto-upload="false"
-              :on-exceed="handleFileExceed"
-            >
               <el-icon class="el-icon--upload"><upload-filled /></el-icon>
               <div class="el-upload__text">
                 <span>将文件拖到此处，或</span>
@@ -443,13 +313,8 @@
               <template #tip>
                 <div class="el-upload__tip">
                   *.xlsx / *.xls
-                  <el-link
+                  <el-link v-if="contentConfig.importTemplate" type="primary" icon="download" :underline="false"
-                    v-if="contentConfig.importTemplate"
+                    @click="handleDownloadTemplate">
-                    type="primary"
-                    icon="download"
-                    :underline="false"
-                    @click="handleDownloadTemplate"
-                  >
                     下载模板
                   </el-link>
                 </div>
@@ -461,11 +326,7 @@
       <!-- 弹窗底部操作按钮 -->
       <template #footer>
         <div style="padding-right: var(--el-dialog-padding-primary)">
-          <el-button
+          <el-button type="primary" :disabled="importFormData.files.length === 0" @click="handleImportSubmit">
-            type="primary"
-            :disabled="importFormData.files.length === 0"
-            @click="handleImportSubmit"
-          >
             确 定
           </el-button>
           <el-button @click="handleCloseImportModal">取 消</el-button>
@@ -941,10 +802,10 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
     .indexAction(
       showPagination
         ? {
-            [request.pageName]: pagination.currentPage,
+          [request.pageName]: pagination.currentPage,
-            [request.limitName]: pagination.pageSize,
+          [request.limitName]: pagination.pageSize,
-            ...formData,
+          ...formData,
-          }
+        }
         : formData
     )
     .then((data) => {

src/router/index.ts

@@ -402,6 +402,17 @@ export const constantRoutes: RouteRecordRaw[] = [
           keepAlive: true,
         },
       },
+      {
+        path: "addgoods",
+        component: () => import("@/views/product/indexconfig/addgoods.vue"),
+        name: "addgoods",
+        meta: {
+          title: "新增商品",
+          affix: false,
+          keepAlive: true,
+          hidden: true
+        },
+      },
       {
         path: "unit",
         component: () => import("@/views/product/unit.vue"),

src/views/online-shop/goodsGroupconfig/content2.ts

@@ -1,5 +1,5 @@
 import type { IContentConfig } from "@/components/CURD/types";
-import UserAPI from "@/api/onlineShop/goodsGroupconfig";
+import UserAPI from "@/api/product/index";
 
 const contentConfig: IContentConfig = {
   pageName: "sys:user",

src/views/product/index.vue

@@ -62,6 +62,7 @@
 
 <script setup lang="ts">
 import UserAPI from "@/api/product/index";
+import { useRouter } from 'vue-router';
 import type { IObject, IOperatData } from "@/components/CURD/types";
 import usePage from "@/components/CURD/usePage";
 import addModalConfig from "./indexconfig/add";
@@ -85,30 +86,31 @@ const {
   handleSearchClick,
   handleFilterChange,
 } = usePage();
+const router = useRouter();
 
 const form = reactive({
   num: '',
 })
 // 新增
 async function handleAddClick() {
-  addModalRef.value?.setModalVisible();
+  router.push({ name: 'addgoods' });
+  // addModalRef.value?.setModalVisible();
   // 加载上级规格下拉数据源 
-  addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // 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);
+  console.log('handleEditClick')
+  // editModalRef.value?.handleDisabled(false);
   // 加载部门下拉数据源
-  editModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+  // 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);
+  // const data = await UserAPI.getunitinfo(row.id);
-  editModalRef.value?.setFormData(data);
+  // editModalRef.value?.setFormData(data);
-  editModalRef.value?.setModalVisible();
+  // editModalRef.value?.setModalVisible();
 
 }
 const myDialogRef = ref(null)

src/views/product/indexconfig/SpecificationAttribute.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-form ref="ruleFormRef" :model="ruleForm" label-width="150px" class="demo-ruleForm" status-icon>
+    <el-form-item label="规格属性">
+      <el-table :data="datas.skuList" border>
+        <el-table-column label="售价" prop="salePrice">
+          <template v-slot="scope">
+            <el-input-number size="mini" @change="priceFormat(scope.row, 'salePrice')"
+              @blur="priceFormat(scope.row, 'salePrice')" v-model="scope.row.salePrice"
+              controls-position="right"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="会员价" prop="memberPrice">
+          <template v-slot="scope">
+            <el-input-number @change="priceFormat(scope.row, 'memberPrice')"
+              @blur="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
+              controls-position="right"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="起售数量" prop="suit">
+          <template slot-scope="scope">
+            <el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="0"
+              v-model="scope.row.suit" controls-position="right" v-if="form.type == 'weigh'"></el-input-number>
+            <el-input-number @change="priceFormat(scope.row, 'suit')" @blur="priceFormat(scope.row, 'suit')" :min="1"
+              v-model="scope.row.suit" controls-position="right" v-else></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="分销金额" prop="firstShared">
+          <template v-slot="scope">
+            <el-input-number @change="priceFormat(scope.row, 'firstShared')"
+              @blur="priceFormat(scope.row, 'firstShared')" v-model="scope.row.firstShared"
+              controls-position="right"></el-input-number>
+          </template>
+        </el-table-column>
+      </el-table>
+    </el-form-item>
+  </el-form>
+</template>
+<script setup>
+import { ref } from 'vue'
+const ruleFormRef = ref(null)
+let datas = reactive({
+  skuList: [],
+
+})
+const ruleForm = ref({
+
+})
+function priceFormat(item, key) {
+  const messageheight = 48;
+  const offset = window.innerHeight / 2 - messageheight / 2 - 100;
+  nextTick(() => {
+    const min = 0;
+    const max = 100000000;
+    const newval = formatPrice(item[key], min, max, true);
+    console.log(newval);
+    if (typeof newval !== "number") {
+      item[key] = newval.value;
+      // this.$message({
+      //   offset,
+      //   message: `请输入${min}到${max}范围内的数字`,
+      // })
+    }
+  })
+
+}
+</script>

src/views/product/indexconfig/addgoods.vue

@@ -0,0 +1,356 @@
+<template>
+  <div class="addgoods">
+    <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm" status-icon>
+      <el-form-item label="商品名称" required>
+        <el-col :span="12">
+          <el-form-item prop="name">
+            <el-input v-model="ruleForm.name" placeholder="请输入商品名称" />
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="商品介绍">
+        <el-col :span="12">
+          <el-form-item>
+            <el-input v-model="ruleForm.shortTitle" type="textarea" placeholder="请输入商品介绍" />
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="单位" required>
+        <el-col :span="12">
+          <el-form-item prop="unitId">
+            <el-select v-model="ruleForm.unitId" placeholder="请选择单位">
+              <el-option :label="item.name" :value="item.id" v-for="item in datas.Company" :key="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="商品分类" required>
+        <el-col :span="12">
+          <el-form-item prop="region">
+            <el-select v-model="ruleForm.categoryId" placeholder="请选择商品分类">
+              <el-option :label="item.name" :value="item.id" v-for="item in datas.classification" :key="item.id" />
+            </el-select>
+          </el-form-item>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="商品图片" required prop="coverImg">
+        <SingleImageUpload v-model="ruleForm.coverImg" />
+      </el-form-item>
+      <el-form-item>
+        <div style="color: #999;">注：第一张图为商品封面图，图片尺寸为750×750</div>
+      </el-form-item>
+      <!-- <el-form-item label="显示/隐藏" required prop="type">
+        <el-checkbox-group v-model="ruleForm.showType">
+          <el-checkbox label="table">堂食</el-checkbox>
+          <el-checkbox label="dine">自取</el-checkbox>
+          <el-checkbox label="delivery">配送</el-checkbox>
+          <el-checkbox label="express">快递</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item> -->
+      <el-form-item label="商品类型">
+        <el-radio-group v-model="ruleForm.type">
+          <el-radio label="single">单规格商品</el-radio>
+          <el-radio label="sku">多规格商品</el-radio>
+          <el-radio label="package">套餐商品</el-radio>
+          <el-radio label="weight">称重商品</el-radio>
+          <el-radio label="coupon">团购券</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- <el-form-item label="规格类型">
+        <el-radio-group v-model="ruleForm.specId">
+          <el-radio label="normal">单规格</el-radio>
+          <el-radio label="sku">多规格</el-radio>
+        </el-radio-group>
+      </el-form-item> -->
+      <el-form-item label="套餐类型">
+        <el-radio-group v-model="ruleForm.groupType">
+          <el-radio label="0">固定套餐</el-radio>
+          <el-radio label="1">可选套餐</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <template v-if="ruleForm.groupType == 0">
+        <el-table border :data="item.goods" v-for="(item, index) in ruleForm.proGroupVo" :key="index">
+          <el-table-column label="名称" prop="proName"></el-table-column>
+          <el-table-column label="规格" prop="skuName"> </el-table-column>
+          <el-table-column label="价格" prop="price"></el-table-column>
+          <el-table-column label="数量" prop="number">
+            <template v-slot="scope">
+              <el-input-number v-model="scope.row.number" :min="0" />
+            </template>
+          </el-table-column>
+          <el-table-column width="150">
+            <template slot="header" slot-scope="scope">
+              <el-button type="primary"
+                @click="$refs.shopListRef.show([...ruleForm.proGroupVo[index].goods])">添加商品</el-button>
+            </template>
+            <template slot-scope="scope">
+              <el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
+                @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
+              <el-button type="text" @click="ruleForm.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </template>
+      <template v-if="ruleForm.groupType == 1">
+        <div class="group_wrap" v-for="(item, index) in form.proGroupVo" :key="index">
+          <el-form inline :model="item">
+            <el-form-item label="规格组名">
+              <el-input v-model="item.title" />
+            </el-form-item>
+            <el-form-item :label="`本组菜品${item.goods.length}选`">
+              <el-input v-model="item.number" />
+            </el-form-item>
+            <el-form-item>
+              <el-button @click="form.proGroupVo.splice(index, 1)">删除</el-button>
+            </el-form-item>
+          </el-form>
+          <div>
+            <el-table border :data="item.goods">
+              <el-table-column label="名称" prop="proName"></el-table-column>
+              <el-table-column label="规格" prop="skuName"></el-table-column>
+              <el-table-column label="价格" prop="price"></el-table-column>
+              <el-table-column label="数量" prop="number">
+                <template v-slot="scope">
+                  <el-input-number v-model="scope.row.number" :min="0" />
+                </template>
+              </el-table-column>
+              <el-table-column width="150">
+                <template slot="header" slot-scope="scope">
+                  <el-button type="primary"
+                    @click="$refs.shopListRef.show([...form.proGroupVo[index].goods]); addGroupIndex = index">添加商品</el-button>
+                </template>
+                <template slot-scope="scope">
+                  <el-button type="text" :disabled="scope.row.typeEnum != '多规格'"
+                    @click="showSelectSkuHandle(scope.row, scope.$index, index)">设置规格</el-button>
+                  <el-button type="text" @click="form.proGroupVo[index].goods.splice(scope.$index, 1)">删除</el-button>
+                </template>
+              </el-table-column>
+            </el-table>
+          </div>
+        </div>
+        <el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
+      </template>
+      <!-- 规格属性 -->
+      <SpecificationAttribute></SpecificationAttribute>
+      <el-form-item label="重量">
+        <el-col :span="12">
+          <div style="display: block;">
+            <el-input v-model="ruleForm.weight" placeholder="">
+              <template #append>千克</template>
+            </el-input>
+            <div style="color: #999;">用于快递或配送运费计重</div>
+          </div>
+        </el-col>
+      </el-form-item>
+      <el-form-item label="是否允许临时改价">
+        <el-radio-group v-model="ruleForm.isAllowTempModifyPrice">
+          <el-radio :label="1">允许</el-radio>
+          <el-radio :label="0">不允许</el-radio>
+        </el-radio-group>
+      </el-form-item>
+      <!-- <el-form-item label="每日销量上限">
+        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
+      </el-form-item>
+      <el-form-item label="每单限购">
+        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
+      </el-form-item>
+      <el-form-item label="每人限购">
+        <el-input-number v-model="ruleForm.dayLimit" :min="0" />
+      </el-form-item> -->
+      <el-form-item label="定时上下架">
+        <el-checkbox-group v-model="ruleForm.days">
+          <el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :label="item.value">
+            {{ item.label }}
+          </el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
+      <el-form-item>
+        <el-col :span="12">
+          <el-time-picker v-model="ruleForm.useTime" is-range range-separator="至" start-placeholder="开始时间"
+            end-placeholder="结束时间" :default-value="['00:00', '59:59']" value-format="HH:mm" format="HH:mm" />
+        </el-col>
+      </el-form-item>
+      <el-form-item label="上架">
+        <el-switch v-model="ruleForm.isSale" active-value="1" inactive-value="0" />
+      </el-form-item>
+      <el-form-item label="库存开关">
+        <div style="display: block;">
+          <el-switch v-model="ruleForm.isStock" active-value="1" inactive-value="0" />
+          <div style="color: #999;">注：关闭则不计算出入库数据</div>
+        </div>
+      </el-form-item>
+      <el-form-item label="设为推荐" prop="delivery">
+        <el-switch v-model="ruleForm.isHot" active-value="1" inactive-value="0" />
+      </el-form-item>
+      <el-form-item label="库存数量">
+        <el-input-number v-model="ruleForm.stockNumber" :min="0" />
+      </el-form-item>
+
+      <el-form-item label="打包费" prop="delivery">
+        <div style="display: block;">
+          <el-input-number v-model="ruleForm.packFee" controls-position="right"></el-input-number>
+          <div style="color: #999;">单份商品打包费。注：店铺开启外卖模式下该数据才生效</div>
+        </div>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" @click="submitForm(ruleFormRef)">
+          确定
+        </el-button>
+        <el-button @click="resetForm(ruleFormRef)">取消</el-button>
+      </el-form-item>
+    </el-form>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue'
+import type { FormInstance, FormRules } from 'element-plus'
+// 规格属性
+import SpecificationAttribute from './SpecificationAttribute.vue'
+import UserAPI from "@/api/product/productclassification";
+import UserAPI2 from "@/api/product/commonUnits";
+
+let datas = reactive({
+  cycle: [
+    { label: "周一", value: "Monday" },
+    { label: "周二", value: "Tuesday" },
+    { label: "周三", value: "Wednesday" },
+    { label: "周四", value: "Thursday" },
+    { label: "周五", value: "Friday" },
+    { label: "周六", value: "Saturday" },
+    { label: "周七", value: "Sunday" }
+  ],
+  Company: [],
+  classification: [],
+})
+
+interface RuleForm {
+  name: string,
+  shortTitle: string,
+  unitId: string,
+  categoryId: string,
+  coverImg: string,
+  images: string[],
+  type: string,
+  specId: string,
+  groupType: string,
+  proGroupVo: string[],
+  skuList: string[],
+  weight: Number,
+  isAllowTempModifyPrice: Number,
+  days: string[],
+  startTime: string,
+  endTime: string,
+  isSale: string,
+  isStock: string,
+  isHot: string,
+  stockNumber: Number,
+  packFee: Number,
+  sort: Number,
+}
+const ruleFormRef = ref<FormInstance>()
+const ruleForm = reactive<RuleForm>({
+  //商品名称
+  name: '',
+  //商品介绍
+  shortTitle: '',
+  // 单位id
+  unitId: '',
+  // 分类id
+  categoryId: '',
+  // 封面图url
+  coverImg: '',
+  // 详情图urls
+  images: [],
+  // 商品类型
+  type: 'single',
+  // 规格id
+  specId: 'normal',
+  // 套餐类型
+  groupType: '0',
+  // 套餐入参
+  proGroupVo: [],
+  // sku集合
+  skuList: [],
+  // 重量
+  weight: 0,
+  // 是否允许改价
+  isAllowTempModifyPrice: 1,
+  // 定时上下架周期
+  days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
+  useTime: ['00:00:00', '23:59:59'],
+  // 开始时间
+  startTime: '00:00:00',
+  // 结束时间
+  endTime: "23:59:59",
+  // 是否上架
+  isSale: "1",
+  // 是否开启库存
+  isStock: "0",
+  // 设为推荐
+  isHot: "1",
+  // 库存数量
+  stockNumber: 0,
+  // 打包费
+  packFee: 0,
+  // 排序值
+  sort: 1,
+})
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: '请输入商品名称', trigger: 'blur' },
+  ],
+  unitId: [
+    {
+      required: true,
+      message: '请选择单位',
+      trigger: 'change',
+    },
+  ],
+  categoryId: [
+    {
+      required: true,
+      message: '请选择商品分类',
+      trigger: 'change',
+    },
+  ],
+  coverImg: [
+    {
+      required: true,
+      message: '请选择图片',
+      trigger: 'change',
+    },
+  ],
+
+})
+onMounted(() => {
+  getList()
+})
+// 获取单位、分类数据
+async function getList() {
+  datas.Company = await UserAPI2.getList()
+  datas.classification = await UserAPI.getList()
+}
+const submitForm = async (formEl: FormInstance | undefined) => {
+  console.log(ruleForm, '提交数据')
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!')
+    } else {
+      console.log('error submit!', fields)
+    }
+  })
+}
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return
+  formEl.resetFields()
+}
+</script>
+<style scoped lang="scss">
+.addgoods {
+  padding: 20px;
+  background-color: #fff;
+}
+</style>

src/views/product/indexconfig/content.ts

@@ -2,12 +2,17 @@ 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";
+import { id } from "element-plus/es/locale";
 
 const contentConfig: IContentConfig<UserPageQuery> = {
   pageName: "sys:user",
   table: {
     border: true,
     highlightCurrentRow: true,
+    rowKey: 'id',
+    treeProps: {
+      children: 'skuList' // 指定子节点存储的字段为 customChildren
+    }
   },
   pagination: {
     background: true,
@@ -22,6 +27,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     obj.createEndTime = obj['1']
     return UserAPI.getPage(obj);
   },
+  modifyAction: function (data) {
+    let obj = {
+      type: data.isGrounding ? 'sku' : 'product',
+      id: data.id,
+      isSale: data.value
+    }
+    // return UserAPI.onOff(obj);
+  },
   deleteAction: UserAPI.deleteByIds,
   // importAction(file) {
   //   return UserAPI.import(1, file);
@@ -64,12 +77,6 @@ const contentConfig: IContentConfig<UserPageQuery> = {
       prop: "isSale",
       templet: "switch",
       slotName: "status",
-    }, {
-      label: "是否启用库存",
-      align: "center",
-      prop: "isStock",
-      templet: "switch",
-      slotName: "status",
     },
     {
       label: "操作",

src/views/product/indexconfig/edit.ts

@@ -14,6 +14,7 @@ const modalConfig: IModalConfig<UserForm> = {
   },
 
   pk: "id",
+
   formAction: function (data) {
     return UserAPI.update(data);
   },

src/views/product/indexconfig/statistics.vue

@@ -4,7 +4,7 @@
       <el-icon class="iconStyle">
         <PieChart />
       </el-icon>
-      <span>商品种树</span>
+      <span>商品种数</span>
       <span>{{ datas.totalRow }}</span>
     </div>
     <div style="width:  300px;">