feat: 商品规格功能调整

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);

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,

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;
   }
 };
 

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>

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;

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;