From 43ae9f371d6cfa915ca2de7f76cc60ed930f4b17 Mon Sep 17 00:00:00 2001
From: duan <1004387497@qq.com>
Date: Fri, 21 Feb 2025 14:41:43 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=95=86=E5=93=81=E8=A7=84=E6=A0=BC?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/settings.json                         |   3 +
 src/api/product/specificationsconfig.ts       |   8 +
 src/components/CURD/PageContent.vue           |   3 +
 src/components/CURD/usePage.ts                |  10 +
 src/components/Upload/MultiImageUpload.vue    |  38 +-
 src/components/mycomponents/shopList.vue      |  55 +++
 .../mycomponents/shopListconfig/content2.ts   |  40 ++
 .../mycomponents/shopListconfig/search.ts     |  41 ++
 src/views/online-shop/goods-group.vue         |   8 +-
 .../online-shop/goodsGroupconfig/content2.ts  |   7 +-
 src/views/product/index.vue                   |  11 +
 .../indexconfig/SpecificationAttribute.vue    | 178 ++++++--
 src/views/product/indexconfig/addgoods.vue    | 418 +++++++++++++++---
 src/views/product/indexconfig/content.ts      |   9 +-
 src/views/product/specifications.vue          | 247 ++++++++++-
 .../product/specificationsconfig/content.ts   |  13 +-
 .../product/specificationsconfig/edit.ts      |   5 +-
 17 files changed, 954 insertions(+), 140 deletions(-)
 create mode 100644 src/components/mycomponents/shopList.vue
 create mode 100644 src/components/mycomponents/shopListconfig/content2.ts
 create mode 100644 src/components/mycomponents/shopListconfig/search.ts

diff --git a/.vscode/settings.json b/.vscode/settings.json
index abfc93e..01df9ae 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -80,5 +80,8 @@
   "scss.lint.unknownAtRules": "ignore",
   "[typescript]": {
     "editor.defaultFormatter": "vscode.typescript-language-features"
+  },
+  "[html]": {
+    "editor.defaultFormatter": "vscode.html-language-features"
   }
 }
diff --git a/src/api/product/specificationsconfig.ts b/src/api/product/specificationsconfig.ts
index 69358e8..0c03923 100644
--- a/src/api/product/specificationsconfig.ts
+++ b/src/api/product/specificationsconfig.ts
@@ -3,6 +3,14 @@ const baseURL = "/product/admin/prod/spec";
 // 商品管理-商品规格
 
 const AuthAPI = {
+  // 新快捷新增
+  quickAdd(data: any) {
+    return request<any, Responseres>({
+      url: `${baseURL}/quickAdd`,
+      method: "post",
+      data,
+    });
+  },
   /** 列表*/
   getPage(params: any) {
     return request<any, Responseres>({
diff --git a/src/components/CURD/PageContent.vue b/src/components/CURD/PageContent.vue
index 61125a8..8f17387 100644
--- a/src/components/CURD/PageContent.vue
+++ b/src/components/CURD/PageContent.vue
@@ -798,6 +798,8 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
   if (isRestart) {
     pagination.currentPage = 1;
   }
+  console.log(props, 'debug1')
+  console.log(props.contentConfig, 'debug2')
   props.contentConfig
     .indexAction(
       showPagination
@@ -809,6 +811,7 @@ function fetchPageData(formData: IObject = {}, isRestart = false) {
         : formData
     )
     .then((data) => {
+
       if (showPagination) {
         if (props.contentConfig.parseData) {
           data = props.contentConfig.parseData(data);
diff --git a/src/components/CURD/usePage.ts b/src/components/CURD/usePage.ts
index b12fc26..584f1f9 100644
--- a/src/components/CURD/usePage.ts
+++ b/src/components/CURD/usePage.ts
@@ -3,7 +3,9 @@ import type { IObject, PageContentInstance, PageModalInstance, PageSearchInstanc
 
 function usePage() {
   const searchRef = ref<PageSearchInstance>();
+  const searchRefs = ref<PageSearchInstance>();
   const contentRef = ref<PageContentInstance>();
+  const contentRefs = ref<PageContentInstance>();
   const addModalRef = ref<PageModalInstance>();
   const editModalRef = ref<PageModalInstance>();
   // 搜索
@@ -11,6 +13,11 @@ function usePage() {
     const filterParams = contentRef.value?.getFilterParams();
     contentRef.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
   }
+  // 搜索2
+  function searchs(queryParams: IObject) {
+    const filterParams = contentRefs.value?.getFilterParams();
+    contentRefs.value?.fetchPageData({ ...queryParams, ...filterParams }, true);
+  }
   // 重置
   function handleResetClick(queryParams: IObject) {
     const filterParams = contentRef.value?.getFilterParams();
@@ -50,10 +57,13 @@ function usePage() {
 
   return {
     searchRef,
+    searchRefs,
     contentRef,
+    contentRefs,
     addModalRef,
     editModalRef,
     handleQueryClick,
+    searchs,
     handleResetClick,
     handleAddClick,
     handleEditClick,
diff --git a/src/components/Upload/MultiImageUpload.vue b/src/components/Upload/MultiImageUpload.vue
index 6dc39b3..5efac6e 100644
--- a/src/components/Upload/MultiImageUpload.vue
+++ b/src/components/Upload/MultiImageUpload.vue
@@ -1,18 +1,11 @@
 <!-- 图片上传组件 -->
 <template>
-  <el-upload
-    v-model:file-list="fileList"
-    list-type="picture-card"
-    :before-upload="handleBeforeUpload"
-    :http-request="handleUpload"
-    :on-success="handleSuccess"
-    :on-error="handleError"
-    :on-exceed="handleExceed"
-    :accept="props.accept"
-    :limit="props.limit"
-    multiple
-  >
-    <el-icon><Plus /></el-icon>
+  <el-upload v-model:file-list="fileList" list-type="picture-card" :before-upload="handleBeforeUpload"
+    :http-request="handleUpload" :on-success="handleSuccess" :on-error="handleError" :on-exceed="handleExceed"
+    :accept="props.accept" :limit="props.limit" multiple>
+    <el-icon>
+      <Plus />
+    </el-icon>
     <template #file="{ file }">
       <div style="width: 100%">
         <img class="el-upload-list__item-thumbnail" :src="file.url" />
@@ -23,24 +16,21 @@
           </span>
           <!-- 删除 -->
           <span @click="handleRemove(file.url!)">
-            <el-icon><Delete /></el-icon>
+            <el-icon>
+              <Delete />
+            </el-icon>
           </span>
         </span>
       </div>
     </template>
   </el-upload>
 
-  <el-image-viewer
-    v-if="previewVisible"
-    :zoom-rate="1.2"
-    :initial-index="previewImageIndex"
-    :url-list="modelValue"
-    @close="handlePreviewClose"
-  />
+  <el-image-viewer v-if="previewVisible" :zoom-rate="1.2" :initial-index="previewImageIndex" :url-list="modelValue"
+    @close="handlePreviewClose" />
 </template>
 <script setup lang="ts">
 import { UploadRawFile, UploadRequestOptions, UploadUserFile } from "element-plus";
-import FileAPI, { FileInfo } from "@/api/file";
+import FileAPI, { FileInfo } from "@/api/account/common";
 
 const props = defineProps({
   /**
@@ -180,9 +170,9 @@ const handleSuccess = (fileInfo: FileInfo, uploadFile: UploadUserFile) => {
   ElMessage.success("上传成功");
   const index = fileList.value.findIndex((file) => file.uid === uploadFile.uid);
   if (index !== -1) {
-    fileList.value[index].url = fileInfo.url;
+    fileList.value[index].url = fileInfo;
     fileList.value[index].status = "success";
-    modelValue.value[index] = fileInfo.url;
+    modelValue.value[index] = fileInfo;
   }
 };
 
diff --git a/src/components/mycomponents/shopList.vue b/src/components/mycomponents/shopList.vue
new file mode 100644
index 0000000..514aa2a
--- /dev/null
+++ b/src/components/mycomponents/shopList.vue
@@ -0,0 +1,55 @@
+<template>
+    <!-- 新增添加商品 -->
+    <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
+        <page-search ref="searchRef" :search-config="searchConfig" @query-click="handleQueryClick"
+            @reset-click="handleResetClick" />
+        <page-content ref="contentRef" :content-config="contentConfig" @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>
+</template>
+<script setup lang="ts">
+import myDialog from '@/components/mycomponents/myDialog.vue'
+import usePage from "@/components/CURD/usePage";
+import searchConfig from "./shopListconfig/search"
+import contentConfig from "./shopListconfig/content2";
+
+const {
+    searchRef,
+    contentRef,
+    addModalRef,
+    editModalRef,
+    handleQueryClick,
+    handleResetClick,
+    // handleAddClick,
+    // handleEditClick,
+    handleSubmitClick,
+    handleExportClick,
+    handleSearchClick,
+    handleFilterChange,
+} = usePage();
+let myDialogRef: any = ref(null)
+function opens() {
+    myDialogRef.value.open()
+}
+// 添加商品的回调
+function subitgood() {
+    // selectData.value = contentRefs.value.getselectTable()
+    // myDialogRef.value.close()
+}
+defineExpose({ opens })
+</script>
\ No newline at end of file
diff --git a/src/components/mycomponents/shopListconfig/content2.ts b/src/components/mycomponents/shopListconfig/content2.ts
new file mode 100644
index 0000000..9b2d6f8
--- /dev/null
+++ b/src/components/mycomponents/shopListconfig/content2.ts
@@ -0,0 +1,40 @@
+import type { IContentConfig } from "@/components/CURD/types";
+import UserAPI from "@/api/product/index";
+
+const contentConfig: IContentConfig = {
+  pageName: "sys:user",
+  table: {
+    showOverflowTooltip: true,
+  },
+  toolbar: [],
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
+  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: "coverImg", templet: "image" },
+    { 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/components/mycomponents/shopListconfig/search.ts b/src/components/mycomponents/shopListconfig/search.ts
new file mode 100644
index 0000000..e9237eb
--- /dev/null
+++ b/src/components/mycomponents/shopListconfig/search.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/goods-group.vue b/src/views/online-shop/goods-group.vue
index 3de1555..f015e15 100644
--- a/src/views/online-shop/goods-group.vue
+++ b/src/views/online-shop/goods-group.vue
@@ -86,7 +86,7 @@
     </template>
     <!-- 新增添加商品 -->
     <myDialog title="选择商品" width="50%" ref="myDialogRef" @Confirm="subitgood">
-      <page-search ref="searchRef" :search-config="searchConfig2" @query-click="handleQueryClick"
+      <page-search ref="searchRefs" :search-config="searchConfig2" @query-click="searchs"
         @reset-click="handleResetClick" />
       <page-content ref="contentRefs" :content-config="contentConfig2" @add-click="handleAddClick"
         @edit-click="handleEditClick" @export-click="handleExportClick" @search-click="handleSearchClick"
@@ -168,10 +168,13 @@ import myDialog from '@/components/mycomponents/myDialog.vue'
 import selectGoodslist from "./goodsGroupconfig/selectGoodslist.vue"
 const {
   searchRef,
+  searchRefs,
   contentRef,
+  contentRefs,
   addModalRef,
   editModalRef,
   handleQueryClick,
+  searchs,
   handleResetClick,
   // handleAddClick,
   // handleEditClick,
@@ -181,6 +184,7 @@ const {
   handleFilterChange,
 } = usePage();
 
+
 // 新增
 async function handleAddClick() {
   addModalRef.value?.setModalVisible();
@@ -191,7 +195,6 @@ async function handleAddClick() {
   // addModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
 }
 const myDialogRef = ref(null)
-const contentRefs = ref(null)
 const myDialogRefAdd = ref(null)
 const elFormref = ref(null)
 let title = ref("新增分组")
@@ -205,6 +208,7 @@ let forms = reactive({
   sort: 1,
   time: ""
 })
+
 // 添加商品
 function addgoods() {
   myDialogRef.value.open()
diff --git a/src/views/online-shop/goodsGroupconfig/content2.ts b/src/views/online-shop/goodsGroupconfig/content2.ts
index 8d7866c..27479f1 100644
--- a/src/views/online-shop/goodsGroupconfig/content2.ts
+++ b/src/views/online-shop/goodsGroupconfig/content2.ts
@@ -7,7 +7,12 @@ const contentConfig: IContentConfig = {
     showOverflowTooltip: true,
   },
   toolbar: [],
-
+  pagination: {
+    background: true,
+    layout: "prev,pager,next,jumper,total,sizes",
+    pageSize: 10,
+    pageSizes: [10, 20, 30, 50],
+  },
   indexAction: function (params) {
     return UserAPI.getPage(params);
   },
diff --git a/src/views/product/index.vue b/src/views/product/index.vue
index 1a2bbe9..0937896 100644
--- a/src/views/product/index.vue
+++ b/src/views/product/index.vue
@@ -16,6 +16,9 @@
             {{ scope.row[scope.prop] == 1 ? "启用" : "禁用" }}
           </el-tag>
         </template>
+        <template #type="scope">
+          {{ typeFilter(scope.row[scope.prop]) }}
+        </template>
         <template #gender="scope">
           <DictLabel v-model="scope.row[scope.prop]" code="gender" />
         </template>
@@ -125,6 +128,14 @@ function handleToolbarClick(name: string) {
 function confirm() {
   console.log(form, 'debug')
 }
+// 商品规格
+function typeFilter(item: any) {
+  if (item == 'single') { return '单规格' }
+  else if (item == 'sku') { return '多规格' }
+  else if (item == 'package') { return '套餐商品' }
+  else if (item == 'weight') { return '称重商品' }
+  else if (item == 'coupon') { return '团购券' }
+}
 // 其他操作列
 async function handleOperatClick(data: IOperatData) {
   console.log(data);
diff --git a/src/views/product/indexconfig/SpecificationAttribute.vue b/src/views/product/indexconfig/SpecificationAttribute.vue
index 99642f1..ce825b3 100644
--- a/src/views/product/indexconfig/SpecificationAttribute.vue
+++ b/src/views/product/indexconfig/SpecificationAttribute.vue
@@ -1,50 +1,149 @@
 <template>
-  <el-form ref="ruleFormRef" :model="ruleForm" label-width="150px" class="demo-ruleForm" status-icon>
+  <el-form ref="ruleFormRef" label-width="150px" class="demo-ruleForm" status-icon>
     <el-form-item label="规格属性">
-      <el-table :data="datas.skuList" border>
-        <el-table-column label="售价" prop="salePrice">
+      <el-table :data="skuList" border>
+        <el-table-column :label="item.label" :prop="item.value" v-for="(item, index) in props.specTableHeaders"
+          :key="index">
+        </el-table-column>
+        <el-table-column prop="originPrice">
+          <template #header>
+            <span>原价</span>
+            <el-icon style="margin-left: 10px;" color="#409EFC" class="no-inherit" @click="batchNumber('originPrice')">
+              <EditPen />
+            </el-icon>
+          </template>
           <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>
+            <el-input-number @change="priceFormat(scope.row, 'originPrice')" v-model="scope.row.originPrice"
+              @blur="priceFormat(scope.row, 'originPrice')" controls-position="right"></el-input-number>
           </template>
         </el-table-column>
-        <el-table-column label="会员价" prop="memberPrice">
+        <el-table-column prop="costPrice">
+          <template #header>
+            <span>成本价</span>
+            <el-icon style="margin-left: 10px;" color="#409EFC" class="no-inherit" @click="batchNumber('costPrice')">
+              <EditPen />
+            </el-icon>
+          </template>
           <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>
+            <el-input-number @change="priceFormat(scope.row, 'costPrice')" v-model="scope.row.costPrice"
+              @blur="priceFormat(scope.row, 'costPrice')" 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>
+        <el-table-column prop="salePrice">
+          <template #header>
+            <span>售价</span>
+            <el-icon style="margin-left: 10px;" color="#409EFC" class="no-inherit" @click="batchNumber('salePrice')">
+              <EditPen />
+            </el-icon>
+          </template>
+          <template v-slot="scope">
+            <el-input-number size="default" v-model="scope.row.salePrice" @change="priceFormat(scope.row, 'salePrice')"
+              @blur="priceFormat(scope.row, 'salePrice')" controls-position="right"></el-input-number>
           </template>
         </el-table-column>
-        <el-table-column label="分销金额" prop="firstShared">
+        <el-table-column prop="memberPrice">
+          <template #header>
+            <span>会员价</span>
+            <el-icon style="margin-left: 10px;" color="#409EFC" class="no-inherit" @click="batchNumber('memberPrice')">
+              <EditPen />
+            </el-icon>
+          </template>
           <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>
+            <el-input-number @change="priceFormat(scope.row, 'memberPrice')" v-model="scope.row.memberPrice"
+              @blur="priceFormat(scope.row, 'memberPrice')" controls-position="right"></el-input-number>
+          </template>
+        </el-table-column>
+        <el-table-column label="起售数量" prop="suitNum">
+          <template #header>
+            <span>起售数量</span>
+            <el-icon style="margin-left: 10px;" color="#409EFC" class="no-inherit" @click="batchNumber('suitNum')">
+              <EditPen />
+            </el-icon>
+          </template>
+          <template v-slot="scope">
+            <el-input-number @change="priceFormat(scope.row, 'suitNum')" v-model="scope.row.suitNum"
+              @blur="priceFormat(scope.row, 'suitNum')" :min="0" controls-position="right"
+              v-if="props.info.type == 'weigh'"></el-input-number>
+            <el-input-number @change="priceFormat(scope.row, 'suitNum')" v-model="scope.row.suitNum"
+              @blur="priceFormat(scope.row, 'suitNum')" :min="1" controls-position="right" v-else></el-input-number>
           </template>
         </el-table-column>
       </el-table>
     </el-form-item>
   </el-form>
+  <el-dialog title="批量修改" width="400px" v-model="showBatchModal">
+    <el-form :model="batchNumberForm">
+      <el-form-item>
+        <el-input-number @change="priceFormat(batchNumberForm, 'batchNumber')"
+          @blur="priceFormat(batchNumberForm, 'batchNumber')" v-model="batchNumberForm.batchNumber"
+          controls-position="right" style="width: 100%"></el-input-number>
+      </el-form-item>
+    </el-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false">取 消</el-button>
+        <el-button type="primary" @click="batchNumberFormConfirm">
+          确 定
+        </el-button>
+      </span>
+    </template>
+
+  </el-dialog>
 </template>
 <script setup>
 import { ref } from 'vue'
 const ruleFormRef = ref(null)
-let datas = reactive({
-  skuList: [],
-
+let batchNumberKey = ref(null)
+let batchNumberForm = reactive({
+  batchNumber: 0,
 })
-const ruleForm = ref({
-
+let skuList = ref([])
+let showBatchModal = ref(false)
+const props = defineProps({
+  info: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  list: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  specTableHeaders: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
 })
+
+onMounted(() => {
+  skuList.value = props.list
+})
+watch(() => props.list, (newval) => {
+  skuList.value = newval
+}, { deep: true })
+// 批量修改规格
+function batchNumber(key) {
+  batchNumberKey.value = key;
+  showBatchModal.value = true;
+}
+// 确认批量修改规格
+function batchNumberFormConfirm() {
+  skuList.value.map((item, index) => {
+    let newitem = { ...item };
+    newitem[batchNumberKey.value] = batchNumberForm.batchNumber;
+    skuList.value[index] = { ...newitem }
+  });
+  showBatchModal.value = false;
+  batchNumberForm.batchNumber = 0;
+}
+function getdata() {
+  return skuList.value
+}
 function priceFormat(item, key) {
   const messageheight = 48;
   const offset = window.innerHeight / 2 - messageheight / 2 - 100;
@@ -52,15 +151,34 @@ function priceFormat(item, key) {
     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}范围内的数字`,
-      // })
+      ElMessage.warning(`请输入${min}到${max}范围内的数字`)
     }
   })
 
 }
+//  格式化价格函数，将价格限定在指定的最小值和最大值范围内，并保留两位小数。
+const formatPrice = (price, min = -Infinity, max = 100000000, returnIsArea = false) => {
+  if (price === undefined || price === null || price === '') {
+    return 0
+  }
+  // 将价格转换为浮点数并保留两位小数
+  const newval = parseFloat((Math.floor(price * 100) / 100).toFixed(2))
+  // 如果价格大于最大值，返回最大值
+  if (newval > max) {
+    return returnIsArea ? { value: max, error: true } : max
+  }
+  // 如果价格小于最小值，返回最小值
+  if (newval < min) {
+    return returnIsArea ? { value: min, error: true } : min
+  }
+  // 如果价格小于最小值，返回最小值
+  if (newval < min) {
+    return min
+  }
+  // 返回格式化后的价格
+  return newval
+}
+defineExpose({ getdata }) 
 </script>
\ No newline at end of file
diff --git a/src/views/product/indexconfig/addgoods.vue b/src/views/product/indexconfig/addgoods.vue
index bcd9992..1bc5881 100644
--- a/src/views/product/indexconfig/addgoods.vue
+++ b/src/views/product/indexconfig/addgoods.vue
@@ -33,8 +33,8 @@
           </el-form-item>
         </el-col>
       </el-form-item>
-      <el-form-item label="商品图片" required prop="coverImg">
-        <SingleImageUpload v-model="ruleForm.coverImg" />
+      <el-form-item label="商品图片" required prop="images">
+        <MultiImageUpload v-model="ruleForm.images" />
       </el-form-item>
       <el-form-item>
         <div style="color: #999;">注：第一张图为商品封面图，图片尺寸为750×750</div>
@@ -48,12 +48,12 @@
         </el-checkbox-group>
       </el-form-item> -->
       <el-form-item label="商品类型">
-        <el-radio-group v-model="ruleForm.type">
+        <el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(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 label="coupon">团购券</el-radio> -->
         </el-radio-group>
       </el-form-item>
       <!-- <el-form-item label="规格类型">
@@ -62,52 +62,24 @@
           <el-radio label="sku">多规格</el-radio>
         </el-radio-group>
       </el-form-item> -->
-      <el-form-item label="套餐类型">
+      <!-- <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-form-item> -->
+      <el-form-item label="套餐商品" v-if="ruleForm.type == 'package'">
+        <div style="display: block;width: 100%;">
+          <div class="head-container">
+            <el-radio-group v-model="ruleForm.groupType" @change="typeChange">
+              <el-radio-button label="0">固定套餐</el-radio-button>
+              <el-radio-button label="1">可选套餐</el-radio-button>
+            </el-radio-group>
+          </div>
+          <div 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="skuName"> </el-table-column>
               <el-table-column label="价格" prop="price"></el-table-column>
               <el-table-column label="数量" prop="number">
                 <template v-slot="scope">
@@ -115,23 +87,85 @@
                 </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 #header>
+                  <el-button type="primary" @click="addgoods">添加商品</el-button>
                 </template>
-                <template slot-scope="scope">
+                <!-- <template slot="header" v-slot="scope"> -->
+                <!-- <el-button type="primary" @click="">添加商品</el-button> -->
+                <!-- </template> -->
+                <!-- <template v-slot="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>
+                </template> -->
               </el-table-column>
             </el-table>
           </div>
         </div>
-        <el-button type="primary" @click="$refs.shopListRef.show(); addGroupIndex = false">添加套餐组</el-button>
-      </template>
+        <!-- 
+<div 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>
+</div> -->
+      </el-form-item>
+      <el-form-item label="选择规格" v-if="ruleForm.type == 'sku'">
+        <el-select v-model="ruleForm.specId" placeholder="请选择规格" style="width: 500px" @change="selectSpecHandle">
+          <el-option :label="item.name" :value="item.id" v-for="item in datas.specificationsconfig"
+            :key="item.id"></el-option>
+        </el-select>
+      </el-form-item>
+
+      <el-form-item :label="item.name" v-if="datas.selectSpeclist.length" v-for="item in datas.selectSpeclist"
+        :key="item.name">
+        <el-checkbox-group v-model="item.selectSpecResult" @change="selectSpecResultChange">
+          <el-checkbox :value="item.name" v-for="(item, index) in item.children" :key="index">{{ item.name
+          }}</el-checkbox>
+        </el-checkbox-group>
+      </el-form-item>
       <!-- 规格属性 -->
-      <SpecificationAttribute></SpecificationAttribute>
+      <!-- 单规格、称重 -->
+      <SpecificationAttribute v-if="ruleForm.type != 'sku'" :info="ruleForm" :list="list"
+        ref="specificationAttributeRef">
+      </SpecificationAttribute>
+
+      <SpecificationAttribute v-if="ruleForm.type == 'sku' && list.length" :specTableHeaders="datas.specTableHeaders"
+        :info="ruleForm" :list="list" ref="specificationAttributeRef"></SpecificationAttribute>
+
       <el-form-item label="重量">
         <el-col :span="12">
           <div style="display: block;">
@@ -159,7 +193,7 @@
       </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">
+          <el-checkbox v-for="(item, index) in datas.cycle" :key="item.value" :value="item.value">
             {{ item.label }}
           </el-checkbox>
         </el-checkbox-group>
@@ -199,6 +233,8 @@
         <el-button @click="resetForm(ruleFormRef)">取消</el-button>
       </el-form-item>
     </el-form>
+    <!-- 选择商品 -->
+    <shopList ref="shopListRef" @success="selectShopRes" />
   </div>
 </template>
 
@@ -209,7 +245,23 @@ import type { FormInstance, FormRules } from 'element-plus'
 import SpecificationAttribute from './SpecificationAttribute.vue'
 import UserAPI from "@/api/product/productclassification";
 import UserAPI2 from "@/api/product/commonUnits";
+import UserAPI3 from "@/api/product/index";
+import UserAPI4 from "@/api/product/specificationsconfig";
+import shopList from "@/components/mycomponents/shopList.vue";
 
+import { useRouter } from 'vue-router';
+
+const router = useRouter();
+let list = ref<any[]>([{
+  "originPrice": 0,
+  "costPrice": 0,
+  "salePrice": 0,
+  "memberPrice": 0,
+  "suitNum": 1,
+  "coverImg": "",
+  "weight": 0,
+  "barCode": "88888888888888888888"
+}]);
 let datas = reactive({
   cycle: [
     { label: "周一", value: "Monday" },
@@ -222,8 +274,23 @@ let datas = reactive({
   ],
   Company: [],
   classification: [],
-})
+  // 商品规格
+  specificationsconfig: [],
+  selectSpeclist: [],
+  defaultSku: {
+    "originPrice": 0,
+    "costPrice": 0,
+    "salePrice": 0,
+    "memberPrice": 0,
+    "suitNum": 1,
+    "coverImg": "",
+    "weight": 0,
+    "barCode": "88888888888888888888"
+  },
+  specTableHeaders: [],
 
+})
+let shopListRef = ref(null)
 interface RuleForm {
   name: string,
   shortTitle: string,
@@ -239,6 +306,7 @@ interface RuleForm {
   weight: Number,
   isAllowTempModifyPrice: Number,
   days: string[],
+  useTime: string[],
   startTime: string,
   endTime: string,
   isSale: string,
@@ -248,6 +316,46 @@ interface RuleForm {
   packFee: Number,
   sort: Number,
 }
+// 添加商品
+function addgoods() {
+  shopListRef.value.opens()
+}
+// 分组选择商品
+function selectShopRes(res) {
+
+  // let newres = res.map(item => {
+  //   item.proId = item.id
+  //   item.proName = item.name
+  //   item.price = item.lowPrice
+  //   item.skuId = ''
+  //   item.skuName = ''
+  //   item.number = 1
+  //   return item
+  // })
+  // if (this.form.groupType == 0) {
+  //   let obj = {
+  //     title: '',
+  //     count: newres.length,
+  //     number: '',
+  //     goods: newres
+  //   }
+  //   this.form.proGroupVo = [{ ...obj }]
+  // } else {
+  //   if (this.addGroupIndex !== false) {
+  //     this.form.proGroupVo[this.addGroupIndex].count = newres.length
+  //     this.form.proGroupVo[this.addGroupIndex].goods = newres
+  //   } else {
+  //     let arr = [...this.form.proGroupVo]
+  //     arr.push({
+  //       title: '',
+  //       count: newres.length,
+  //       number: '',
+  //       goods: newres
+  //     })
+  //     this.form.proGroupVo = [...arr]
+  //   }
+  // }
+}
 const ruleFormRef = ref<FormInstance>()
 const ruleForm = reactive<RuleForm>({
   //商品名称
@@ -265,11 +373,16 @@ const ruleForm = reactive<RuleForm>({
   // 商品类型
   type: 'single',
   // 规格id
-  specId: 'normal',
+  specId: '',
   // 套餐类型
   groupType: '0',
   // 套餐入参
-  proGroupVo: [],
+  proGroupVo: [{
+    title: '',
+    count: '',
+    number: '',
+    goods: []
+  }],
   // sku集合
   skuList: [],
   // 重量
@@ -280,13 +393,13 @@ const ruleForm = reactive<RuleForm>({
   days: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday', 'Sunday'],
   useTime: ['00:00:00', '23:59:59'],
   // 开始时间
-  startTime: '00:00:00',
+  startTime: '',
   // 结束时间
-  endTime: "23:59:59",
+  endTime: "",
   // 是否上架
   isSale: "1",
   // 是否开启库存
-  isStock: "0",
+  isStock: "1",
   // 设为推荐
   isHot: "1",
   // 库存数量
@@ -314,7 +427,7 @@ const rules = reactive<FormRules<RuleForm>>({
       trigger: 'change',
     },
   ],
-  coverImg: [
+  images: [
     {
       required: true,
       message: '请选择图片',
@@ -331,18 +444,187 @@ 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!')
+// 选择规格属性
+function selectSpecResultChange() {
+  createSkuHeader();
+  createSkuBody();
+}
+// 生成多规格表头
+function createSkuHeader() {
+  const headers = [];
+
+  for (let item of datas.selectSpeclist) {
+    if (item.selectSpecResult.length) {
+      headers.push({
+        label: item.name,
+        value: item.name,
+      });
+    }
+  }
+  datas.specTableHeaders = headers;
+}
+
+// 生成多规格表体
+function createSkuBody() {
+  let bodys = [];
+  for (let item of datas.selectSpeclist) {
+    if (item.selectSpecResult.length) {
+      let arr = [];
+      for (let val of item.selectSpecResult) {
+        arr.push({
+          [item.name]: val,
+        });
+      }
+      bodys.push(arr);
+    }
+  }
+  let arr = cartesian(bodys);
+  const m = {
+    coverImg: "",
+    ...datas.defaultSku,
+  };
+  let newarr = [];
+  for (let item of arr) {
+    if (Array.isArray(item)) {
+      let obj = {};
+      let specSnap = [];
+      for (let v of item) {
+        for (let key in v) {
+          obj[`${key}`] = v[key];
+          specSnap.push(v[key]);
+
+        }
+      }
+      let specSnapStr = specSnap.join(",");
+      newarr.push({
+        specSnap: specSnapStr,
+        specInfo: specSnapStr,
+        ...m,
+        ...obj,
+        // barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`,
+      });
     } else {
+      let specSnap = [];
+      for (let key in item) {
+        specSnap.push(item[key]);
+      }
+      let specSnapStr = specSnap.join(",");
+      newarr.push({
+        specSnap: specSnapStr,
+        specInfo: specSnapStr,
+        ...m,
+        ...item,
+        // barCode: `${dayjs().valueOf()}${RandomNumBoth(1, 9999)}`,
+      });
+    }
+  }
+  console.log(newarr, '提交')
+  list.value = newarr;
+}
+// 切换类型
+function changeTypeEnum(item) {
+  // single-单规格商品 sku-多规格商品 package-套餐商品 weight-称重商品 coupon-团购券
+  list.value = []
+  if (item == 'sku') {
+    tbProductSpecGet();
+  } else {
+    ruleForm.specId = ""
+    datas.selectSpeclist = []
+    list.value = [datas.defaultSku]
+  }
+}
+// 笛卡尔积算法
+function cartesian(arr) {
+  if (arr.length < 2) return arr[0] || [];
+  return [].reduce.call(arr, (col, set) => {
+    let res = [];
+    col.forEach((c) => {
+      set.forEach((s) => {
+        let t = [].concat(Array.isArray(c) ? c : [c]);
+        t.push(s);
+        res.push(t);
+      });
+    });
+    return res;
+  });
+}
+// 套餐类型切换
+function typeChange() {
+  ruleForm.typeEnum = 'normal'
+  if (ruleForm.groupType == 0) {
+    // this.$set(this.form.proGroupVo, 0, {
+    //   title: '',
+    //   count: '',
+    //   number: 1,
+    //   goods: []
+    // })
+  } else {
+    // this.form.proGroupVo = []
+  }
+  // this.changeTypeEnum()
+}
+// 获取规格列表
+async function tbProductSpecGet() {
+  datas.specificationsconfig = await UserAPI4.getPage()
+}
+// 选择规格
+function selectSpecHandle(e) {
+  const selectSpec = JSON.parse(JSON.stringify(datas.specificationsconfig.find((item) => item.id == e).children));
+  for (let item in selectSpec) {
+    selectSpec[item].selectSpecResult = [];
+  }
+  datas.selectSpeclist = selectSpec;
+  // this.form.skuList = [ ];
+}
+const specificationAttributeRef = ref(null)
+const submitForm = async (formEl: FormInstance | undefined) => {
+
+  if (!formEl) return
+  await formEl.validate(async (valid, fields) => {
+    if (valid) {
+      // 第一张图片作为封面图
+      ruleForm.coverImg = ruleForm.images[0]
+      // 规格id修改
+      ruleForm.specId = specIdFunction(ruleForm.type)
+      // 修改时间
+      ruleForm.startTime = ruleForm.useTime[0]
+      ruleForm.endTime = ruleForm.useTime[1]
+      // 拿到sku数据
+      ruleForm.skuList = specificationAttributeRef.value.getdata()
+      // 多规格 selectSpecInfo 添加
+      if (ruleForm.type == 'sku') {
+        let obj = {}
+        datas.selectSpeclist.forEach((item: any) => {
+          obj[item.name] = item.selectSpecResult
+        })
+        ruleForm.selectSpecInfo = obj
+      }
+      console.log(ruleForm, '提交数据')
+      let res = await UserAPI3.addunit(ruleForm)
+      if (res.code == 200) {
+        ElMessage.success("添加成功");
+        router.push({ name: 'productIndex' });
+      }
+    } else {
+      ElMessage.error("请填写完整信息");
       console.log('error submit!', fields)
     }
   })
 }
-
+// 规格id过滤
+const specIdFunction = (type: string) => {
+  if (type === 'single') {
+    return null
+  } else if (type === '2') {
+    return 2
+  } else if (type === '3') {
+    return 3
+  } else if (type === '4') {
+    return 4
+  } else if (type === '5') {
+    return 5
+  }
+}
 const resetForm = (formEl: FormInstance | undefined) => {
   if (!formEl) return
   formEl.resetFields()
diff --git a/src/views/product/indexconfig/content.ts b/src/views/product/indexconfig/content.ts
index 94eff20..d3f6b00 100644
--- a/src/views/product/indexconfig/content.ts
+++ b/src/views/product/indexconfig/content.ts
@@ -66,9 +66,14 @@ const contentConfig: IContentConfig<UserPageQuery> = {
   cols: [
     // { type: "selection", width: 50, align: "center" },
     { label: "封面图", align: "center", prop: "coverImg", templet: "image" },
-    { label: "分类名称", align: "center", prop: "categoryName", },
+    { label: "商品名称", align: "center", prop: "name", },
     { label: "售价", align: "center", prop: "id" },
-    { label: "规格名称", align: "center", prop: "specName" },
+    {
+      label: "商品规格", align: "center", prop: "type", templet: "custom",
+      slotName: "type",
+
+    },
+
     { label: "库存", align: "center", prop: "stockNumber" },
     { label: "耗材信息", align: "center", prop: "id" },
     {
diff --git a/src/views/product/specifications.vue b/src/views/product/specifications.vue
index 55f40b7..249977f 100644
--- a/src/views/product/specifications.vue
+++ b/src/views/product/specifications.vue
@@ -22,15 +22,71 @@
           <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>
+        <template #operates="scope">
+          <el-button type="text" size="small" v-if="scope.row.level < 3"
+            @click="addlowerLevel(scope.row)">添加下一级</el-button>
+          <el-button type="text" size="small" @click="handleEditClick(scope.row)">编辑</el-button>
+          <el-button type="text" size="small" @click="deleteClick(scope.row)">删除</el-button>
+        </template>
       </page-content>
-
+      <!-- 添加下一级-编辑 -->
+      <myDialog title="添加模板" width="50%" ref="myDialogRefs" @Confirm="subitgoods">
+        <el-form ref="forms" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
+          <el-form-item label="规格名称" prop="name">
+            <el-input v-model="datas.contentForm.name" placeholder="请输入下一级名称"></el-input>
+          </el-form-item>
+        </el-form>
+      </myDialog>
       <!-- 新增 -->
-      <page-modal ref="addModalRef" :modal-config="addModalConfig" @submit-click="handleSubmitClick">
+      <!-- <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> -->
+      <myDialog title="新增模板" width="50%" ref="myDialogRef" @Confirm="subitgood">
+        <el-form ref="form" :model="datas.contentForm" :rules="datas.rules" label-width="80px" label-position="left">
+          <el-form-item label="名称" prop="name">
+            <el-input v-model="datas.contentForm.name" placeholder="模板名称，如：衣服"></el-input>
+          </el-form-item>
+          <el-form-item :label="item.name" v-for="(item, index) in datas.contentForm.children" :key="index">
+            <div class="tag_wrap">
+              <el-tag v-for="(val, i) in item.children" :key="i" closable size="medium" :disable-transitions="true"
+                @close="handleClose(index, i)">
+                {{ val.name }}
+              </el-tag>
+              <el-input class="input-new-tag" v-show="item.inputVisible" v-model="item.inputValue" ref="saveTagInput"
+                size="small" placeholder="请输入规格值，回车添加" @keyup.enter.native="handleInputConfirm(index)"
+                @blur="handleInputConfirm(index)">
+              </el-input>
+              <el-button v-show="!item.inputVisible" size="small" icon="Plus" plain @click="showInput(index)">
+                添加
+              </el-button>
+              <el-button size="small" icon="Delete" plain @click="deleteTag(index)">删除</el-button>
+            </div>
+          </el-form-item>
+        </el-form>
+        <el-form ref="skuForm" :model="datas.skuForm" :rules="datas.skuRules" label-width="80px" label-position="left">
+          <el-row :gutter="20" v-if="datas.showSkuForm">
+            <el-col :span="10">
+              <el-form-item label="规格" prop="skuValidate1">
+                <el-input v-model="datas.skuForm.label" placeholder="规格，如：尺码"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="10">
+              <el-form-item label="规格值" prop="skuValidate2">
+                <el-input v-model="datas.skuForm.value" placeholder="规格值，如：S、M"></el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="4">
+              <el-button type="primary" @click="addSkuSubmit">添加</el-button>
+              <el-button @click="datas.showSkuForm = false">取消</el-button>
+            </el-col>
+          </el-row>
+          <el-form-item>
+            <el-button type="primary" icon="Plus" @click="datas.showSkuForm = true">添加规格</el-button>
+          </el-form-item>
+        </el-form>
+      </myDialog>
       <!-- 编辑 -->
       <page-modal ref="editModalRef" :modal-config="editModalConfig" @submit-click="handleSubmitClick">
         <template #gender="scope">
@@ -60,7 +116,21 @@ import contentConfig from "./specificationsconfig/content";
 import contentConfig2 from "./specificationsconfig/content2";
 import editModalConfig from "./specificationsconfig/edit";
 import searchConfig from "./specificationsconfig/search";
-
+import { pid } from "process";
+const validateSku1 = (rule, value, callback) => {
+  if (!datas.skuForm.label) {
+    callback(new Error(' '))
+  } else {
+    callback()
+  }
+}
+const validateSku2 = (rule, value, callback) => {
+  if (!datas.skuForm.value) {
+    callback(new Error(' '))
+  } else {
+    callback()
+  }
+}
 const {
   searchRef,
   contentRef,
@@ -75,9 +145,147 @@ const {
   handleSearchClick,
   handleFilterChange,
 } = usePage();
+// refs
+const skuForm = ref(null)
+const myDialogRefs = ref(null)
+const forms = ref(null)
 
+let datas = reactive({
+  contentForm: {
+    name: '',
+    children: [],
+  },
+  skuForm: {
+    label: '', value: ''
+  },
+  rules: {
+    name: [
+      {
+        required: true,
+        message: ' ',
+        trigger: 'blur'
+      }
+    ]
+  },
+
+  skuRules: {
+    skuValidate1: {
+      required: true,
+      validator: validateSku1,
+      trigger: 'blur'
+    },
+    skuValidate2: {
+      required: true,
+      validator: validateSku2,
+      trigger: 'blur'
+    }
+  },
+  showSkuForm: false,
+  addchilderinfo: {}
+})
+let myDialogRef = ref(null)
+function subitgood() {
+  skuForm.value.validate(async valid => {
+    if (valid) {
+      let res = await UserAPI.quickAdd(datas.contentForm)
+      if (res.code == 200) {
+        ElMessage.success("添加成功");
+        handleQueryClick();
+        datas.contentForm.name = ''
+        datas.contentForm.children = []
+        myDialogRef.value?.close();
+
+      }
+    }
+  })
+}
+function subitgoods() {
+  forms.value.validate(async valid => {
+    if (valid) {
+      let obj = {
+        name: datas.contentForm.name,
+        level: datas.addchilderinfo.level < 3 ? (datas.addchilderinfo.level + 1) : 3,
+        pid: datas.addchilderinfo.id
+      }
+      let res = await UserAPI.addunit(obj)
+      if (res.code == 200) {
+        ElMessage.success("添加成功");
+        myDialogRefs.value.close()
+        handleQueryClick();
+        datas.contentForm.name = ''
+      }
+    }
+  })
+}
+function handleClose(index: any, i: any) {
+  datas.contentForm.children[index].value.splice(i, 1);
+}
+function showInput(index: any) {
+  datas.contentForm.children[index].inputVisible = true;
+}
+function addSkuSubmit() {
+  skuForm.value.validate(async valid => {
+    if (valid) {
+      datas.contentForm.children.push({
+        name: datas.skuForm.label,
+        children: [{ name: datas.skuForm.value }],
+        inputVisible: false,
+        inputValue: ''
+      })
+      datas.skuForm.label = ''
+      datas.skuForm.value = ''
+      datas.showSkuForm = false
+    }
+  })
+}
+// 回车添加
+function handleInputConfirm(index: number) {
+  let inputValue = datas.contentForm.children[index].inputValue;
+  if (inputValue) {
+    datas.contentForm.children[index].children.push({ name: inputValue });
+  }
+  datas.contentForm.children[index].inputVisible = false;
+  datas.contentForm.children[index].inputValue = '';
+}
+// 删除
+// 删除已添加的规格
+function deleteTag(index: number) {
+  datas.contentForm.children.splice(index, 1);
+}
+// 添加下一级
+async function addlowerLevel(item: any) {
+  datas.addchilderinfo = item
+  myDialogRefs.value.open()
+  // addModalRef.value?.setModalVisible();
+  // addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
+}
+// function handleEditClicks(item: any) {
+//   console.log(item)
+// }
+function deleteClick(item: any) {
+
+  const ids = [item.id].join(",");
+  if (!ids) {
+    ElMessage.warning("请勾选删除项");
+    return;
+  }
+
+  ElMessageBox.confirm("确认删除?", "警告", {
+    confirmButtonText: "确定",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(function () {
+    contentConfig.deleteAction(ids).then(() => {
+      ElMessage.success("删除成功");
+      handleQueryClick();
+    });
+
+  });
+
+}
 // 新增
 async function handleAddClick() {
+  myDialogRef.value?.open();
   addModalRef.value?.setModalVisible();
   // 加载上级规格下拉数据源 
   addModalConfig.formItems[2]!.attrs!.data = await UserAPI.getPage({ name: "" });
@@ -88,8 +296,19 @@ async function handleAddClick() {
 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[2]!.attrs!.data = [{
+    createTime: "",
+    fullName: "顶级",
+    id: "0", level: 1,
+    name: "顶级",
+    pid: "0",
+    pids: "0,",
+    shopId: "1",
+    sort: 1,
+    status: 1,
+    updateTime: "",
+    children: await UserAPI.getPage({ name: "" })
+  }]
   // 加载角色下拉数据源
   // editModalConfig.formItems[4]!.options = await RoleAPI.getOptions();
   // 根据id获取数据进行填充
@@ -143,3 +362,17 @@ async function handleOperatClick(data: IOperatData) {
 // 切换示例
 const isA = ref(true);
 </script>
+
+<style scoped lang="scss">
+.tag_wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.input-new-tag {
+  width: 180px;
+  margin-left: 10px;
+  vertical-align: bottom;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/product/specificationsconfig/content.ts b/src/views/product/specificationsconfig/content.ts
index 33c8e8e..a947ee1 100644
--- a/src/views/product/specificationsconfig/content.ts
+++ b/src/views/product/specificationsconfig/content.ts
@@ -47,13 +47,18 @@ const contentConfig: IContentConfig<UserPageQuery> = {
     // { type: "selection", width: 50, align: "center" },
     { label: "模板名称", align: "center", prop: "name" },
     { label: "完整名称", align: "center", prop: "fullName" },
+    // {
+    //   label: "操作",
+    //   align: "center",
+    //   fixed: "right",
+    //   width: 280,
+    //   templet: "operates",
+    // },
     {
       label: "操作",
+      slotName: "operates",
+      templet: "custom",
       align: "center",
-      fixed: "right",
-      width: 280,
-      templet: "tool",
-      operat: ["edit", "delete"],
     },
   ],
 };
diff --git a/src/views/product/specificationsconfig/edit.ts b/src/views/product/specificationsconfig/edit.ts
index 06f04fe..764ea20 100644
--- a/src/views/product/specificationsconfig/edit.ts
+++ b/src/views/product/specificationsconfig/edit.ts
@@ -33,14 +33,15 @@ const modalConfig: IModalConfig<UserForm> = {
     {
       label: "规格级别",
       prop: "level",
-      rules: [{ required: true, message: "用户角色不能为空", trigger: "blur" }],
       type: "select",
       attrs: {
         placeholder: "请选择",
       },
       options: [{ label: "一级", value: 1 }, { label: "二级", value: 2 }, { label: "三级", value: 3 }],
       initialValue: [],
-    }, {
+      hidden: true
+    },
+    {
       label: "上级规格",
       prop: "pid",
       type: "tree-select",