Browse Source

fix: 样式调整

wanggaokun 1 month ago
parent
commit
0c977f5a69

+ 1 - 1
src/assets/styles/custom.scss

@@ -10,7 +10,6 @@
   padding: 12px;
   overflow-x: hidden;
   background-color: var(--bg-color);
-  border-top: 1px solid var(--border-color);
 }
 
 /* ProTable 不需要 card 样式(在组件内使用 ProTable 会使用到) */
@@ -44,6 +43,7 @@
   .table-search {
     padding: 18px 18px 0;
     margin-bottom: 4px;
+    border-bottom: 1px solid var(--border-color);
     .el-form {
       .el-form-item__content > * {
         width: 100%;

+ 1 - 4
src/components/TreeFilter/index.vue

@@ -15,7 +15,6 @@
         :node-key="id"
         :data="multiple ? treeData : treeAllData"
         :show-checkbox="multiple"
-        :check-strictly="checkStrictly"
         :current-node-key="!multiple ? selected : ''"
         :highlight-current="!multiple"
         :expand-on-click-node="false"
@@ -52,15 +51,13 @@ interface OrgTreeProps {
   label?: string // 显示的label ==> 非必传,默认为 “label”
   multiple?: boolean // 是否为多选 ==> 非必传,默认为 false
   defaultValue?: any // 默认选中的值 ==> 非必传
-  checkStrictly?: boolean
 }
 const loading = ref(false)
 
 const props = withDefaults(defineProps<OrgTreeProps>(), {
   id: 'id',
   label: 'label',
-  multiple: false,
-  checkStrictly: false
+  multiple: false
 })
 
 const defaultProps = {

+ 5 - 2
src/views/demo/tree.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-box">
-    <TreeFilter title="组织架构" :request-api="OrgApi.treeRole" label="name" :default-value="'0'" />
+    <TreeFilter title="组织架构" :request-api="OrgApi.treeRole" label="name" :default-value="'0'" @change="changeTreeFilter" />
 
     <div class="table-box">
       <ProTable
@@ -31,7 +31,10 @@ import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
 import OrgApi from '@/api/module/system/org'
 import RoleApi from '@/api/module/system/role'
 import { ColumnProps, SearchProps } from '@/components/ProTable/interface'
-
+// 树形筛选切换
+const changeTreeFilter = (val: string) => {
+  ElMessage.success(`请注意查看请求参数变化 🤔${val}`)
+}
 // 表格配置项
 const columns: ColumnProps<RoleInfo>[] = [
   { type: 'selection', width: 60, selectable: row => row.isLock == '1' },

+ 4 - 4
src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="main-box">
-    <TreeFilter title="组织架构" :request-api="OrgApi.treeRole" label="name" :default-value="'0'" />
+    <TreeFilter title="组织架构" :request-api="OrgApi.treeRole" label="name" :default-value="'0'" @change="changeTreeFilter" />
 
     <div class="table-box">
       <ProTable
@@ -31,9 +31,9 @@ import { RoleInfo, RoleQuery } from '@/api/interface/system/role'
 import OrgApi from '@/api/module/system/org'
 import RoleApi from '@/api/module/system/role'
 import { ColumnProps, SearchProps } from '@/components/ProTable/interface'
-interface Tree {
-  label: string
-  children?: Tree[]
+// 树形筛选切换
+const changeTreeFilter = (val: string) => {
+  ElMessage.success(`请注意查看请求参数变化 🤔${val}`)
 }
 // 表格配置项
 const columns: ColumnProps<RoleInfo>[] = [