修改样式

src/views/invoicing/ConfigMaterial/ConfigMaterialInfoList.vue

@@ -59,16 +59,40 @@
     </div>
     <a-row>
       <a-col :span="4" style="padding: 0 10px 0 0;">
-        <div style="height:600px;background:white; ">
-
-        <a-tree
-          show-line
-          autoExpandParent
-          :tree-data="treeData"
-          @select="onSelect"
-        >
-          <template #switcherIcon="{ switcherCls }"><down-outlined :class="switcherCls" /></template>
-        </a-tree>
+        <div style="height:729px;background:white;padding: 10px; ">
+          <a-tabs v-model:activeKey="activeKey" tabPosition="left" type="card" style="height:600px;">
+            <a-tab-pane :key="key"   v-for="(item,key) in treeData">
+              <!-- 一级分类 -->
+              <template #tab>
+                <div><img src="/src/assets/images/logo.png" /></div>
+                <span title="{{item.title}}">{{item.title}}</span>
+              </template>
+              <a-menu
+                  v-model:openKeys="openKeys"
+                  v-model:selectedKeys="selectedKeys"
+                  style="height:690px;overflow:auto;"
+                  mode="inline"
+                >
+                <template v-for="(item2,key2) in item.children" >
+                  <a-sub-menu v-if="item2.children.length>0" :key="`sub`+key2" style="background-image: url('/src/assets/images/bj.png');text-align:center;border-radius:5px;">
+                    <template #title>
+                      <div>
+                        <span><img src="/src/assets/images/logo.png" /></span><span style="margin-left: 10px;">{{item2.title}}</span>
+                      </div>
+                    </template>
+                    <a-menu-item v-for="(item3,key3) in item2.children"  :key="key3" style="height:50px;" >
+                      <div @click="onSelect(item3)"><span style="font-size: 18px;">·</span> <span style="margin-left: 10px;">{{item3.title}}</span></div>
+                    </a-menu-item>
+                  </a-sub-menu>
+                  <a-menu-item v-if="item2.children.length==0" :key="`sub`+key2" style="background-image: url('/src/assets/images/bj.png');text-align:center;border-radius:5px;">
+                      <div @click="onSelect(item2)">
+                        <span><img src="/src/assets/images/logo.png" /></span><span style="margin-left: 10px;">{{item2.title}}</span>
+                      </div>
+                  </a-menu-item>
+                </template>
+              </a-menu>
+            </a-tab-pane>
+          </a-tabs>
         </div>
       </a-col>
       <a-col :span="20">
@@ -111,6 +135,7 @@
   import type { TreeProps } from 'ant-design-vue';
   import { DownOutlined } from '@ant-design/icons-vue';
 import { defHttp } from '/@/utils/http/axios';
+import type { CollapseProps } from 'ant-design-vue';
 
   const formRef = ref();
   const queryParam = reactive<any>({});
@@ -118,6 +143,11 @@ import { defHttp } from '/@/utils/http/axios';
   const registerModal = ref();
   const userStore = useUserStore();
   let treeData = ref<any>([]);
+  const activeKey =  ref(0);
+  const activeKey2 =  ref(0);
+  const rootSubmenuKeys= ['sub1']
+  const openKeys= []
+  const selectedKeys= []
   //注册table数据
   const { prefixCls, tableContext, onExportXls, onImportXls } = useListPage({
     tableProps: {
@@ -157,9 +187,20 @@ import { defHttp } from '/@/utils/http/axios';
     sm: 20,
   });
 
-  function onSelect(ids, e) {
-    let id = ids[0];
-    queryParam.treeId =id;
+  function onOpenChange  (openKeys: string[]){
+      const latestOpenKey = openKeys.find(key => openKeys.indexOf(key) === -1);
+      if (rootSubmenuKeys.indexOf(latestOpenKey!) === -1) {
+        openKeys = openKeys;
+      } else {
+        openKeys = latestOpenKey ? [latestOpenKey] : [];
+      }
+    };
+
+  function onSelect({ key, domEvent }) {
+    // console.log(ids);
+    // console.log(e);
+    // let id = ids[0];
+    queryParam.treeId =key;
     reload();
   }
   /**