表格筛选

src/services/commont.js

@@ -446,7 +446,19 @@ export const initOss = (file) => {
     }
   });
 }
-
+//深拷贝
+export function deepClone(obj, hash = new WeakMap()) {
+  if (obj == null || typeof obj !== "object") return obj
+  if (obj instanceof Date) return new Date(obj)
+  if (obj instanceof RegExp) return new RegExp(obj.source, obj.flags)
+  if (hash.has(obj)) return hash.set(obj)
+  const deepArr = Array.isArray(obj) ? [] : {}
+  hash.set(obj, deepArr);
+  for (const key in obj) {
+    deepArr[key] = deepClone(obj[key], hash);
+  }
+  return deepArr
+}
 
 let commont = {
   maskData: maskData,
@@ -467,7 +479,8 @@ let commont = {
   compression: compression,
   isObject: isObject,
   isArray: isArray,
-  initOss: initOss
+  initOss: initOss,
+  deepClone: deepClone
 }
 
 

src/views/NewlyBuiltGoods/components/specificationDialog.vue

@@ -209,6 +209,10 @@ const submit_specification = (formEl) => {
   });
 };
 const submitForm = () => {
+  if (!specification_list.value.length)
+    return ElMessage.warning("没有添加任何规格属性！");
+  if (!specification_list.value.every((item) => item.valueGrop.length))
+    return ElMessage.warning("添加规格后至少添加一个属性值！");
   $emit("specificationSubmit", specification_list);
   specificationClose();
 };

src/views/NewlyBuiltGoods/index.vue

@@ -144,9 +144,9 @@
               {{ el.xyName }}<span style="margin-left: 10px">187/500</span>
             </div>
             <div class="create_shop" @click="add_xyShop">
-              <span style="display: flex; align-items: center"
+              <span style="display: flex; align-items: center">
-                ><Plus style="width: 1em; height: 1em; margin-right: 5px"
+                <Plus style="width: 1em; height: 1em; margin-right: 5px" />
-              /></span>
+              </span>
               新增闲鱼店铺
             </div>
           </div>
@@ -229,9 +229,9 @@
                   v-if="item.type === 'add'"
                   @click="item.add"
                 >
-                  <span style="display: flex; align-items: center"
+                  <span style="display: flex; align-items: center">
-                    ><Plus style="width: 1em; height: 1em; margin-right: 5px"
+                    <Plus style="width: 1em; height: 1em; margin-right: 5px" />
-                  /></span>
+                  </span>
                   添加多规格深库存
                 </div>
                 <div
@@ -288,39 +288,87 @@
                   {{ item.suffix }}
                 </template>
               </el-input>
-              <!-- <el-table
+              <el-table
                 class="Tabel"
                 id="table"
                 v-if="item.type === 'el-table'"
                 ref="tableRef"
                 row-key="date"
-                :data=""
+                :data="item.tableData"
                 style="width: 100%"
+                border
               >
                 <el-table-column
                   v-for="(el, ind) in item.tabelList"
                   :prop="el.params"
                   :key="ind"
                   :label="el.label"
-                  :filters="el.filters"
-                  :filter-method="el.filterMethod"
-                  filter-placement="bottom-end"
                   align="center"
                 >
-                  <template #header>
+                  <template #header="scope">
                     <el-input
                       style="width: 80px"
                       v-if="el.label === '售价' || el.label === '库存'"
                       v-model="el.search"
                       :placeholder="el.label"
                       size="small"
-                      @keydown="el.keydown($event, item, el.search)"
+                      @keydown="el.keydown($event, item, el)"
                     >
                       <template #suffix>
-                        <el-icon class="el-input__icon"><Edit /></el-icon>
+                        <el-icon class="el-input__icon">
+                          <Edit />
+                        </el-icon>
                       </template>
                     </el-input>
+                    <div
+                      style="
+                        font-size: 14px;
+                        display: flex;
+                        align-items: center;
+                        justify-content: center;
+                      "
+                      v-else
+                    >
+                      <span>{{ el.label }}</span>
+
+                      <el-popover :visible="el.visible" :width="160">
+                        <div>
+                          <el-checkbox-group v-model="el.property">
+                            <el-checkbox
+                              style="width: 100%"
+                              v-for="e in el.filters"
+                              :key="e.value"
+                              :label="e.label"
+                              :value="e.value"
+                            >
+                              {{ e.label }}
+                            </el-checkbox>
+                          </el-checkbox-group>
+
+                          <div style="text-align: right; margin: 0">
+                            <el-button
+                              size="small"
+                              type="primary"
+                              @click="el.filterMethod(item, el)"
+                            >
+                              筛选
+                            </el-button>
+                            <el-button @click="el.reset(item, el)" size="small"
+                              >重置</el-button
+                            >
+                          </div>
+                        </div>
+                        <template #reference>
+                          <Filter
+                            class="filter_icon"
+                            style="width: 1em; height: 1em; margin-left: 5px"
+                            @click="el.visible = !el.visible"
+                          />
                         </template>
+                      </el-popover>
+                    </div>
+                  </template>
+
                   <template #default="scope">
                     <div v-if="el.label === '售价' || el.label === '库存'">
                       <el-input
@@ -332,37 +380,7 @@
                     <span v-else>{{ scope.row[el.params] }}</span>
                   </template>
                 </el-table-column>
-              </el-table> -->
+              </el-table>
-
-              <vxe-table
-                v-if="item.type === 'el-table'"
-                border
-                ref="xTable"
-                height="300"
-                :row-config="{ isHover: true }"
-                :data="item.tableData"
-              >
-                <vxe-column
-                  v-for="(el, ind) in item.tabelList"
-                  :key="ind"
-                  :field="el.label"
-                  :title="el.label"
-                  :filters="el.filters"
-                  :filter-method="el.filterMethod"
-                >
-                  <template #default="{ row }">
-                    <div v-if="el.label === '售价' || el.label === '库存'">
-                      <el-input
-                        style="width: 120px"
-                        v-model="row[el.params]"
-                        size="small"
-                      />
-                    </div>
-                    <span v-else>{{ row[el.params] }}</span>
-                  </template>
-                </vxe-column>
-              </vxe-table>
-
               <el-select
                 style="width: 240px"
                 v-model="ruleForm[item.params]"
@@ -429,16 +447,14 @@
 </template>
 
 <script setup>
-import { Plus, Edit } from "@element-plus/icons-vue";
+import { Plus, Edit, Filter } from "@element-plus/icons-vue";
 import { router } from "@/router.js";
 import { ref, reactive, onMounted } from "vue";
 import UploadImage from "@components/Upload/newfileupload.vue";
 import SpecificationDialog from "./components/specificationDialog.vue";
 import { ElMessage } from "element-plus";
 const ruleFormRef = ref(null);
-const xTable = ref(null);
+const tableRef = ref(null);
-import XEUtils from "xe-utils";
-import VXETable from "vxe-table";
 import {
   getGoodsType,
   getGoodsInfo,
@@ -1007,94 +1023,106 @@ const specificationSubmit = (row) => {
     {
       type: "el-table",
       label: "销售规格",
-      tableData: [],
+      tableData: generateCombinations(row._value),
+      new_tableData: generateCombinations(row._value),
       tabelList: [
         {
           label: "售价",
           params: "price",
-          keydown: (e, data, value) => {
+          keydown: (e, data,el) => {
             if (e.key !== "Enter") return;
-            const filterList = [];
-            data.tabelList
-              .filter((item) => item.property)
-              .forEach((item) => {
-                filterList.push(...item.property);
-              });
             data.tableData.forEach((item) => {
-              if (!filterList.length) return (item.price = value);
+              item.price = el.search;
-              if (
-                filterList.includes(item.params1) ||
-                filterList.includes(item.params2)
-              ) {
-                item.price = value;
-              }
             });
+            el.search = "";
           },
         },
         {
           label: "库存",
           params: "inventory",
-          keydown: (e, data, value) => {
+          keydown: (e, data, el) => {
             if (e.key !== "Enter") return;
-            const filterList = [];
-            data.tabelList
-              .filter((item) => item.property)
-              .forEach((item) => {
-                filterList.push(...item.property);
-              });
             data.tableData.forEach((item) => {
-              if (!filterList.length) return (item.inventory = value);
+              item.inventory = el.search;
-              if (
-                filterList.includes(item.params1) ||
-                filterList.includes(item.params2)
-              ) {
-                item.inventory = value;
-              }
             });
+            el.search = "";
           },
         },
       ],
-      filterVisibleEvent: ({ column, visible }) => {
-        console.log(`${column.field} ${visible ? "打开" : "关闭"}筛选面板`);
-      },
-      filterChangeEvent: ({ column }) => {
-        console.log(`${column.field} 筛选了数据`);
-      },
     },
     {
       type: "el-input",
       label: "原价",
-      prop: "",
+      prop: "originalPrice",
-      params: "",
+      params: "originalPrice",
       disabled: false,
     },
     {
       type: "el-select",
       label: "成色",
-      prop: "",
+      prop: "stuffStatus",
-      params: "",
+      params: "stuffStatus",
       disabled: true,
       options: [{ label: "888", value: 6 }],
     },
   ];
   row._value.forEach((item) => {
-    console.log(item, "item");
     specification_list.push({ key: item.label, value: item.valueGrop });
 
     tabelList.push({
       label: item.label,
       params: `params${item.index}`,
       filters: get_filters(item),
-      filterMethod: ({ option, row }) => {
+      property: [],
-        return row.age === Number(option.data);
+      visible: false,
+      reset: (item, el) => {
+        item.tabelList.forEach((oi) => {
+          if (oi.params == el.params) {
+            oi.property = [];
+          }
+        });
+        const filterlist = item.tabelList.filter(
+          (ul) =>
+            ul.property && Array.isArray(ul.property) && ul.property.length
+        );
+        const datalist = item.new_tableData.filter((li) => {
+          for (let condition of filterlist) {
+            let key = condition.params;
+            let values = condition.property;
+            if (!values.includes(li[key])) {
+              return false;
+            }
+          }
+          return true;
+        });
+        item.tableData = datalist;
+        el.visible = false;
+      },
+      filterMethod: (item, el) => {
+        const filterlist = item.tabelList.filter(
+          (ul) =>
+            ul.property && Array.isArray(ul.property) && ul.property.length
+        );
+        const datalist = item.new_tableData.filter((li) => {
+          for (let condition of filterlist) {
+            let key = condition.params;
+            let values = condition.property;
+            if (!values.includes(li[key])) {
+              return false;
+            }
+          }
+          return true;
+        });
+        item.tableData = datalist;
+        el.visible = false;
       },
     });
   });
   priceList.fixPrice.map((item) => {
+    console.log(item, "itemmm");
     if (item.type === "edit") {
-      item.specification_list = specification_list;
+      item.specification_list =specification_list;
     } else if (item.type === "el-table") {
-      item.tableData = generateCombinations(row._value);
       item.tabelList = [...tabelList, ...item.tabelList];
     }
   });
@@ -1105,10 +1133,10 @@ const get_filters = (arr) => {
   arr.valueGrop.map((e) => {
     filters.push({ label: e.label, value: e.label });
   });
-  console.log(filters, "fsdfsdfsd");
+  console.log(filters, "arr");
+
   return filters;
 };
-// 创建一个简单的输入框筛选
 const generateCombinations = (attributeGroups) => {
   // 辅助函数，用于递归生成组合
   const generate = (index, current) => {
@@ -1180,23 +1208,29 @@ onMounted(() => {
   font-weight: bold;
   margin-bottom: 10px;
 }
+
 :deep(.el-form-item__label) {
   color: #000000d9;
 }
+
 .loading {
   width: 5px;
 }
+
 :deep(.el-radio-button) {
   margin-right: 10px;
   border-radius: 50%;
+
   .el-radio-button__inner {
     border-radius: 15px;
     border: 1px solid #409eff;
   }
 }
+
 .newly_built_goods {
   background: #f1f2f5;
   overflow-y: auto;
+
   &::-webkit-scrollbar {
     display: none;
   }
@@ -1206,26 +1240,33 @@ onMounted(() => {
     padding: 20px;
     box-sizing: border-box;
     background: #fff;
+
     .goos_type {
       display: flex;
       align-items: flex-end;
     }
+
     :deep(.el-form-item) {
       margin-bottom: 0;
     }
+
     :deep(.circular) {
       display: none;
     }
   }
+
   .main {
     padding: 20px 20px 80px;
+
     .main-box {
       padding: 20px;
       background: #fff;
       margin-bottom: 20px;
+
       .goods_attribute {
         display: flex;
         margin-bottom: 10px;
+
         .attribute_title {
           display: block;
           min-width: 88px;
@@ -1233,9 +1274,11 @@ onMounted(() => {
           margin-right: 20px;
         }
       }
+
       .select_shops {
         display: flex;
         flex-wrap: wrap;
+
         .shop,
         .create_shop,
         .shop_active {
@@ -1247,6 +1290,7 @@ onMounted(() => {
           border-radius: 8px;
           margin: 5px 10px 5px 0;
           cursor: pointer;
+
           .hint {
             position: absolute;
             top: -10px;
@@ -1259,16 +1303,19 @@ onMounted(() => {
             box-sizing: border-box;
           }
         }
+
         .create_shop {
           width: 135px;
           display: flex;
           border: 1px dashed #409eff;
           color: #409eff;
         }
+
         .shop_active {
           border: 1px solid #409eff;
         }
       }
+
       .primary_src {
         &::after {
           content: "主图";
@@ -1283,6 +1330,7 @@ onMounted(() => {
           color: #fff;
         }
       }
+
       .price_list {
         .create_shop {
           width: 155px;
@@ -1295,13 +1343,16 @@ onMounted(() => {
           margin-right: 10px;
           cursor: pointer;
         }
+
         :deep(.el-form-item__content) {
           max-width: 45%;
           display: block;
         }
+
         :deep(.el-descriptions__cell) {
           padding-bottom: 0;
         }
+
         .Tabel {
           :deep(.el-input__wrapper) {
             box-shadow: none;
@@ -1310,6 +1361,7 @@ onMounted(() => {
       }
     }
   }
+
   .bottom {
     position: fixed;
     bottom: 0;
@@ -1321,4 +1373,15 @@ onMounted(() => {
     background-color: #fff;
   }
 }
+.filter_icon {
+  &:hover {
+    color: #409efc;
+  }
+  &:focus {
+    outline: none;
+  }
+  &:focus-visible {
+    outline: none;
+  }
+}
 </style>