feat(product-category): 增加产品种类查询功能并优化界面

- 在产品种类页面添加状态筛选功能
- 优化主属性标签样式
- 修改 DataTable 组件中的查询逻辑

src/views/sku-manage/product-category/component/DataTable.vue

@@ -21,6 +21,7 @@ import CreateDialog from '/@/views/sku-manage/product-category/component/CreateD
 
 interface Parameter {
   name: string;
+  status: string;
 }
 
 const queryParameter: Parameter | undefined = inject('query-parameter');
@@ -75,7 +76,7 @@ const dialogVisible = ref(false);
 
 onBeforeMount(() => {
   gridOptions.pagerConfig.limit = 20;
-})
+});
 
 onMounted(() => {
   fetchList();
@@ -85,12 +86,13 @@ async function fetchList(isQuery = false) {
   if (isQuery) {
     gridOptions.pagerConfig.page = 1;
   }
-  
+
   gridOptions.data = [];
   gridOptions.columns = [];
 
   const query = {
-    brand_name: queryParameter?.name
+    name: queryParameter?.name,
+    status: queryParameter?.status
   };
 
   await useTableData(api.getTableData, query, gridOptions);

src/views/sku-manage/product-category/component/MainAttr.vue

@@ -42,15 +42,16 @@ const groupedAttrs = computed(() => {
             :key="item.id"
             :type="item.description? 'warning': ''"
             disable-transitions
-            effect="dark"
-            plain
+            effect="plain"
+            round
             size="small"
+            class="ml-1"
         >
           {{ item.attr.name }}
         </el-tag>
         <!--</el-tooltip>-->
       </div>
-      <span class="line-separator">——</span>
+      <span class="line-separator ml-1">——</span>
     </template>
   </div>
 

src/views/sku-manage/product-category/index.vue

@@ -21,6 +21,7 @@ const btnLoading = ref(false);
 
 const formInline = reactive<any>({
   name: '',
+  status: '',
 });
 provide('query-parameter', formInline);
 
@@ -47,10 +48,19 @@ function resetParameter() {
         <div class="flex flex-1">
           <div class="w-full whitespace-nowrap">
             <el-row :gutter="20" style="margin-bottom: 5px;">
-              <el-col :span="5">
+              <el-col :span="6">
                 <div class="flex items-center">
-                  <span class="mr-2">品牌名称</span>
-                  <el-input v-model="formInline.name" clearable placeholder="请输入品牌名称" />
+                  <span class="mr-2">种类名称</span>
+                  <el-input v-model="formInline.name" clearable placeholder="请输入种类名称" />
+                </div>
+              </el-col>
+              <el-col :span="4">
+                <div class="flex items-center">
+                  <span class="mr-2">状 态</span>
+                  <el-select v-model="formInline.status" clearable placeholder="请选择">
+                    <el-option label="草稿" value="1" />
+                    <el-option label="已发布" value="3" />
+                  </el-select>
                 </div>
               </el-col>
             </el-row>