perf: style 美化

src/components/Tree/src/BasicTree.vue

@@ -418,7 +418,7 @@
       return () => {
         const { title, helpMessage, toolbar, search, checkable } = props;
         const showTitle = title || toolbar || search || slots.headerTitle;
-        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)' };
+        const scrollStyle: CSSProperties = { height: 'calc(100% - 38px)', paddingTop: '6px' };
         return (
           <div class={[bem(), 'h-full', attrs.class]}>
             {showTitle && (

src/components/Tree/src/components/TreeHeader.vue

@@ -29,6 +29,7 @@
           </Menu>
         </template>
       </Dropdown>
+      <slot v-if="slots.toolbarRight" name="toolbarRight"/>
     </div>
   </div>
 </template>

src/views/common/workflow/extension/form/index.vue

@@ -7,14 +7,48 @@
   >
     <div class="m-4 mr-0 overflow-hidden bg-white w-1/4 xl:w-1/5">
       <BasicTree
-        title="表单分类"
-        toolbar
         search
         :clickRowToExpand="false"
         :treeData="state.treeData"
         :fieldNames="{ key: 'id', title: 'name' }"
         @select="handleSelect"
-      />
+      >
+        <template #toolbarRight>
+          <a-button
+            type="primary"
+            shape="circle"
+            size="small"
+            @click="handleAdd()"
+          >
+            <PlusOutlined/>
+          </a-button>
+        </template>
+        <template #title="data">
+          <span class="custom-tree-node">
+            <span>{{ data.name }}</span>
+            <span>
+              <a-button type="link"
+                        size="small"
+                        @click="handleAdd(data)"
+              >
+                <PlusOutlined/>
+              </a-button>
+              <a-button type="link"
+                        size="small"
+                        @click="handleAdd(data)"
+              >
+                <FormOutlined/>
+              </a-button>
+              <a-button type="link"
+                        size="small"
+                        @click="handleAdd(data)"
+              >
+                <DeleteOutlined/>
+              </a-button>
+            </span>
+          </span>
+        </template>
+      </BasicTree>
     </div>
     <BasicTable
       class="w-3/4 xl:w-4/5"
@@ -75,7 +109,11 @@
 <script lang="ts">
   import { defineComponent, reactive, toRaw, onMounted } from 'vue';
   import { BasicTable, useTable, TableAction } from '/@/components/Table';
-  import { listFormDefinition, delFormDefinition } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
+  import {
+    listFormDefinition,
+    delFormDefinition,
+    getFormDefinition,
+  } from '/@/api/platform/common/workflow/extension/controller/formDefinition';
   import { PageWrapper } from '/@/components/Page';
   import { BasicTree, TreeItem } from '/@/components/Tree';
   import { useModal } from '/@/components/Modal';
@@ -84,6 +122,7 @@
   import { useMessage } from '/@/hooks/web/useMessage';
   import { listToTree } from '/@/utils/helper/treeHelper';
   import { listFormCategory } from '/@/api/platform/common/workflow/extension/controller/formCategory';
+  import { PlusOutlined, FormOutlined, DeleteOutlined } from '@ant-design/icons-vue';
 
   /** 类型规范统一声明定义区域 */
   interface TableState {
@@ -102,6 +141,9 @@
       BasicTree,
       TableAction,
       FormModal,
+      PlusOutlined,
+      FormOutlined,
+      DeleteOutlined,
     },
     setup() {
 
@@ -121,7 +163,7 @@
       const { createConfirm, createMessage } = useMessage();
       const [registerModal, { openModal }] = useModal();
       const [registerResetPwdModal, { openModal: openResetPwdModal }] = useModal();
-      const [registerTable, { reload, clearSelectedRowKeys }] = useTable({
+      const [registerTable, { reload, clearSelectedRowKeys, getForm }] = useTable({
         title: '流程表单列表',
         api: listFormDefinition,
         rowKey: 'id',
@@ -195,8 +237,9 @@
       }
 
       function handleSelect(selectedKeys: string[]) {
-        state.searchInfo.categoryId = selectedKeys[0];
-        handleRefreshTable();
+        getForm().setFieldsValue({
+          categoryId: selectedKeys[0]
+        });
       }
 
       return {
@@ -214,3 +257,23 @@
     }
   });
 </script>
+<style lang="less" scoped>
+
+.custom-tree-node {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 14px;
+  padding-right: 8px;
+}
+
+:deep(.ant-tree .ant-tree-node-content-wrapper .ant-tree-title .ant-btn) {
+  display: none;
+}
+
+:deep(.ant-tree .ant-tree-node-content-wrapper .ant-tree-title:hover .ant-btn) {
+  padding: 0px 5px;
+  display: unset;
+}
+</style>