1、增加分类切换关联逻辑

src/views/product/category/index.vue

@@ -2,10 +2,10 @@
   <div class="app-container">
     <splitpanes :horizontal="appStore.device === 'mobile'" class="default-theme">
       <pane size="8">
-        <el-segmented :options="categoryOptions" size="large" v-model="queryParams.pid" direction="vertical"/>
+        <el-segmented :options="categoryOptions" size="large" v-model="queryParams.type" direction="vertical" @change="categoryChange"/>
       </pane>
       <pane size="92">
-        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+        <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="100px">
           <el-form-item label="分类名称" prop="name">
             <el-input
               v-model="queryParams.name"
@@ -14,6 +14,26 @@
               @keyup.enter.native="handleQuery"
             />
           </el-form-item>
+          <el-form-item v-if="queryParams.type" :label="levelName">
+            <el-select
+              v-model="queryParams.pid"
+              filterable
+              remote
+              placeholder="请输入关键词搜索"
+              remote-show-suffix
+              :remote-method="($event) => remoteMethod($event, remoteParent)"
+              :loading="remoteLoading"
+              @blur="remoteBlur"
+              style="width: 200px;"
+            >
+              <el-option
+                v-for="item in parentList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              />
+            </el-select>
+          </el-form-item>
           <el-form-item>
             <el-button type="primary" icon="search" @click="handleQuery">搜索</el-button>
             <el-button icon="refresh" @click="resetQuery">重置</el-button>
@@ -96,12 +116,29 @@
 
         <!-- 添加或修改分类对话框 -->
         <el-dialog :title="title" v-model="open" width="500px" append-to-body>
-          <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
+          <el-form ref="formRef" :model="form" :rules="rules" label-width="100px">
             <el-form-item label="分类名称" prop="name">
               <el-input v-model="form.name" placeholder="请输入分类名称" />
             </el-form-item>
-            <el-form-item label="备注" prop="remark">
-              <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
+            <el-form-item :label="levelName" prop="pid" v-if="queryParams.type">
+              <el-select
+                v-model="form.pid"
+                filterable
+                remote
+                placeholder="请输入关键词搜索"
+                remote-show-suffix
+                :remote-method="($event) => remoteMethod($event, remoteParent)"
+                :loading="remoteLoading"
+                @blur="remoteBlur"
+                style="width: 200px;"
+              >
+                <el-option
+                  v-for="item in parentList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                />
+              </el-select>
             </el-form-item>
           </el-form>
           <div slot="footer" class="dialog-footer">
@@ -117,6 +154,7 @@
 <script setup>
 import { listCategory, getCategory, delCategory, addCategory, updateCategory } from "@/api/product/category";
 import useForm from '@/hooks/useForm.js';
+import useRemote from '@/hooks/useRemote.js';
 import { Splitpanes, Pane } from "splitpanes"
 import "splitpanes/dist/splitpanes.css"
 import useAppStore from '@/store/modules/app'
@@ -124,14 +162,15 @@ import useAppStore from '@/store/modules/app'
 const defaultForm = {
   id: null,
   name: null,
-  type: null,
-  remark: null
+  type: 0,
+  pid: null,
 }
 
 const defaultParams = {
   pageNum: 1,
   pageSize: 10,
   name: null,
+  type: 0,
   pid: null
 }
 
@@ -156,6 +195,7 @@ const data = reactive({
   total: 0,
   // 分类表格数据
   categoryList: [],
+  parentList: [],
   categoryOptions: [
     {
       value: 0,
@@ -179,13 +219,19 @@ const data = reactive({
   }
 })
 
-const { loading, ids, single, multiple, showSearch, total, categoryList, title, open, rules, categoryOptions } = toRefs(data);
+const { loading, ids, single, multiple, showSearch, total, categoryList, title, open, rules, categoryOptions, parentList } = toRefs(data);
 
 const { form, validateForm, resetForm } = useForm(formRef, defaultForm)
 const { form: queryParams, resetForm: resetQueryForm } = useForm(queryRef, defaultParams)
+const { loading: remoteLoading, remoteMethod } = useRemote()
 
 getList();
 
+const levelName = computed(() => {
+  const name = categoryOptions.value.find(item => item.value == queryParams.value.type - 1).label
+  return `${name}名称`
+})
+
 function getList() {
   loading.value = true;
   listCategory(queryParams.value).then(response => {
@@ -195,6 +241,28 @@ function getList() {
   });
 }
 
+function remoteParent (query) {
+  const params = {
+    pageNum: 1, 
+    pageSize: 50,
+    type: queryParams.value.type - 1,
+    name: query
+  }
+  return listCategory(params).then(response => {
+    parentList.value = response.rows;
+  });
+}
+
+function categoryChange () {
+  queryParams.value.name = queryParams.value.pid = null;
+  form.value.type = queryParams.value.type;
+  handleQuery();
+}
+
+function remoteBlur() {
+  parentList.value = [];
+}
+
 // 取消按钮
 function cancel() {
   open.value = false;