[BD] 树形用户列表筛选的实现

注意: 此文档不完善,待补充 6.16

1.模板

<template>

  <el-row :gutter="0">
    <el-col class="user-filter" :span="3"><div class="grid-content ep-bg-purple" />
        <el-input v-model="filterText" placeholder="输入关键词" />
        <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="defaultProps"
            default-expand-all
            :filter-node-method="filterNode"
            @node-click="NodeClick"
        />
    </el-col>
    <el-col :span="21">
            <div class="default-main ba-table-box">
        <el-alert class="ba-table-alert" v-if="baTable.table.remark" :title="baTable.table.remark" type="info" show-icon />

        <!-- 表格顶部菜单 -->
        <TableHeader
            :buttons="['refresh', 'add', 'edit', 'delete', 'comSearch', 'quickSearch', 'columnDisplay']"
            :quick-search-placeholder="t('quick Search Placeholder', { fields: t('goods.quick Search Fields') })"
        />

        <!-- 表格 -->
        <!-- 要使用`el-table`组件原有的属性，直接加在Table标签上即可 -->
        <Table ref="tableRef" />

        <!-- 表单 -->
        <PopupForm />

    </div>
    </el-col>

  </el-row>

</template>

<script setup lang="ts">
import { ref, provide, onMounted,watch, reactive  } from 'vue'
import baTableClass from '/@/utils/baTable'
import { defaultOptButtons } from '/@/components/table'
import { baTableApi } from '/@/api/common'
import { useI18n } from 'vue-i18n'
import PopupForm from './popupForm.vue'
import Table from '/@/components/table/index.vue'
import TableHeader from '/@/components/table/header/index.vue'
import { getUserTree } from '/@/api/backend/adminapi'

const { t } = useI18n()
const tableRef = ref()
const optButtons = defaultOptButtons(['edit', 'delete'])
const baTable = new baTableClass(
    new baTableApi('/admin/Goods/'),
    {
        pk: 'id',
        column: [
            { type: 'selection', align: 'center', operator: false, sortable: true  },
            { label: t('operate'), align: 'center', width: 100, render: 'buttons', buttons: optButtons, operator: false },
        ],
        dblClickNotEditColumn: [undefined, 'is_switch'],
    },
    {
        defaultItems: { status: '1', type: '1', weight: '0.00', net_weight: '0.00', pack_weight: '0.00', cost_price: '0.000', purchase_price: '0.000', declare_value: '0.00', pack_fee: '0.00', check_stock_type: '0' },
    }
)

provide('baTable', baTable)

onMounted(() => {
    baTable.table.ref = tableRef.value
    baTable.mount()
    baTable.getIndex()?.then(() => {
        baTable.initSort()
        baTable.dragSort()
    })
})

import { ElTree } from 'element-plus'
  interface Tree {
    id: number
    label: string
    children?: Tree[]
  }

  const filterText = ref('')
  const treeRef = ref<InstanceType<typeof ElTree>>()

  const defaultProps = {
    children: 'children',
    label: 'label',
  }

  watch(filterText, (val) => {
    treeRef.value!.filter(val)
  })

  const filterNode = (value: string, data: Tree) => {
    if (!value) return true
    return data.label.includes(value)
  }

  const data = reactive([])

  getUserTree().then((res) => {
      // 使用 splice 方法来清空响应式数组并添加新数据
      data.splice(0, data.length, ...res.data.list);
  })
   
  // 树形用户被点击  
const NodeClick = (data) => {
    baTable.comSearch.form.uid = data.id
}


</script>

<script lang="ts">
import { defineComponent } from 'vue'
import { reactify } from '@vueuse/core'
export default defineComponent({
    name: 'goods',
})
</script>

控制器中(app\admin\controller\Api.php):

 /**
     * 获取树形用户列表
     */
    public function getUserTree()
    {
        $data = [
            'id'    => 2,
            'label' => '刘备',
            'children'  => [
                [
                    'id'    => 3,
                    'label' => '关羽',
                    'children'  => [
                        [
                            'id'    => 4,
                            'label' => '关平',
                        ],
                        [
                            'id'    => 5,
                            'label' => '关不平',
                        ]
                    ]
                ]
            ]
        ];

        $data = $this->admin->getUserTree();
        
        return $this->success('', [
            'list'   => $data,
            'total'  => count($data),
        ]);
    }

模型中(app\admin\model\Admin.php):

 /********************** 自定义方法 ************************ */

    // 获取顶级用户
    public function getUserTree()
    {
        $res = $this->field(['id','username label','pid'])->where("pid", 0)->select()->toArray();
        $list = [];
        foreach ($res as $item) {
            $list[] = [
                'id'    => $item['id'],
                'pid'   => $item['pid'],
                'label' => $item['label'],
            ];
        }
        foreach ($list as &$user) {
            $child = $this->getChildren($user['id']);
            $user['children'] = $child;
        }
        return $list;
    }

    // 无限极方法
    public function getChildren($id)
    {
        $children = $this->hidden(['group_arr'])->field(['id','username label','pid'])->where('pid', $id)->select()->toArray();
        $list = [];
        foreach ($children as $item) {
            $list[] = [
                'id'    => $item['id'],
                'pid'   => $item['pid'],
                'label' => $item['label'],
            ];
        }
        foreach ($list as &$child) {
            $child['children'] = $this->getChildren($child['id']);
        }
        return $list;
    }

补充.前端封装请求

web\src\api\backend\adminapi.ts

import { getUrl} from '/@/utils/axios'
import { useAdminInfo } from '/@/stores/adminInfo'
import createAxios from '/@/utils/axios'


// 获取SIM卡导入的URL, 记得调用时要写()
// 引用: import { getUserTree } from '/@/api/backend/adminapi'
// 使用: getUserTree()

export function getUserTree() {
    let url = getUrl() + '/admin/api/getUserTree' + '?server=1'
    return createAxios({
        url:url,
        method: 'get',
    })
}