[BD2.0] 树形用户列表-9月

加上点击事件, 自动筛选

<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="Filter keyword" />
        <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="{children: 'children', label: 'label'}"
            default-expand-all
            :filter-node-method="filterNode"
            :expand-on-click-node="false" 
            @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') })"
            ></TableHeader>

            <!-- 表格 -->
            <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
            <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
            <Table ref="tableRef"></Table>

            <!-- 表单 -->
            <PopupForm />
        </div>
    </el-col>
</el-row>
    
</template>

<script setup lang="ts">
import { ref, provide, onMounted } 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 goodsStatus from '/@/config/status/goodsStatus'

// 导入user管理的控制器Url，类似：/index.php/admin/user.user/ -- 1.0版本的文件
import { goodsCategory, userUser } from '/@/api/controllerUrls' 

defineOptions({
    name: 'goods',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/Goods/'),
    {
        pk: 'id',
        column: [
            { type: 'selection',  operator: false },
            { label: t('goods.id'), prop: 'id',  width: 70,  sortable: 'custom', operator: false},
            { label: 'seller', prop: 'seller_id', comSearchRender: 'remoteSelect', show:false},
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { default_sku_id: '0', status: '1', type: '1', new_product_id: '0', weight: 0, goods_type_id: '0', supplier_id: '0', updated_at: null, created_at: null },
    }
)

provide('baTable', baTable)

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

// 树
import { watch } from 'vue'
import { ElTree } from 'element-plus'
import { getArrayKey } from '/@/utils/common'

interface Tree {
  [key: string]: any
}

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

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

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



const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
// 树形用户被点击  
// TODO 完善

const NodeClick = (data: { id: any }) => {
  console.log("树形点击@@");
  
    // 展开公共搜索
    baTable.table.showComSearch = true
    baTable.comSearch.form = Object.assign(baTable.comSearch.form, {
        'seller_id': data.id
    })

    // 组装发送给服务端的筛选条件数据
    const fieldDataTemp = baTable.comSearch.fieldData.get('seller_id') // 获取 id 字段的公共搜索数据，它由 baTable 自动初始化
    if (fieldDataTemp) {
        // 筛选数据组装
        let comSearchData: comSearchData = {
            field: 'seller_id', // 筛选字段
            val: data.id, // 范围查询的 start 值和 end 值，直接使用逗号分隔
            operator: fieldDataTemp.operator, // 公共搜索操作符号
            render: fieldDataTemp.render, // 字段渲染方案
        }

        let index = getArrayKey(baTable.table.filter!.search!, 'field', 'seller_id') // 查询是否已经有 id 字段的筛选数据
        if (!index) {
            // push 到要发送给服务端的筛选条件数组中
            baTable.table.filter!.search!.push(comSearchData) // 无则 push
        } else {
            baTable.table.filter!.search![index] = comSearchData // 有则重新赋值
        }

        // 重新请求表格数据（刷新表格）
        baTable.onTableHeaderAction('refresh', {})
    } else {
        console.log('没有找到 id 字段的公共搜索数据，因为该字段禁止了公共搜索')
    }
}

</script>

<style scoped lang="scss">
.user-filter {
    margin-top: 20px;
    padding: 0 5px;
}
</style>

<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="Filter keyword" />
        <el-tree
            ref="treeRef"
            class="filter-tree"
            :data="data"
            :props="{children: 'children', label: 'label'}"
            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') })"
            ></TableHeader>

            <!-- 表格 -->
            <!-- 表格列有多种自定义渲染方式，比如自定义组件、具名插槽等，参见文档 -->
            <!-- 要使用 el-table 组件原有的属性，直接加在 Table 标签上即可 -->
            <Table ref="tableRef"></Table>

            <!-- 表单 -->
            <PopupForm />
        </div>
    </el-col>
</el-row>
    
</template>

<script setup lang="ts">
import { ref, provide, onMounted } 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 goodsStatus from '/@/config/status/goodsStatus'

// 导入user管理的控制器Url，类似：/index.php/admin/user.user/ -- 1.0版本的文件
import { goodsCategory, userUser } from '/@/api/controllerUrls' 

defineOptions({
    name: 'goods',
})

const { t } = useI18n()
const tableRef = ref()
const optButtons: OptButton[] = defaultOptButtons(['edit', 'delete'])

/**
 * baTable 内包含了表格的所有数据且数据具备响应性，然后通过 provide 注入给了后代组件
 */
const baTable = new baTableClass(
    new baTableApi('/admin/Goods/'),
    {
        pk: 'id',
        column: [
            { type: 'selection',  operator: false },
  
        ],
        dblClickNotEditColumn: ['all'],
    },
    {
        defaultItems: { created_at: null },
    }
)

provide('baTable', baTable)

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

// 树
import { watch } from 'vue'
import { ElTree } from 'element-plus'

interface Tree {
  [key: string]: any
}

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

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

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



const data: Tree[] = [
  {
    id: 1,
    label: 'Level one 1',
    children: [
      {
        id: 4,
        label: 'Level two 1-1',
        children: [
          {
            id: 9,
            label: 'Level three 1-1-1',
          },
          {
            id: 10,
            label: 'Level three 1-1-2',
          },
        ],
      },
    ],
  },
  {
    id: 2,
    label: 'Level one 2',
    children: [
      {
        id: 5,
        label: 'Level two 2-1',
      },
      {
        id: 6,
        label: 'Level two 2-2',
      },
    ],
  },
  {
    id: 3,
    label: 'Level one 3',
    children: [
      {
        id: 7,
        label: 'Level two 3-1',
      },
      {
        id: 8,
        label: 'Level two 3-2',
      },
    ],
  },
]
// 树形用户被点击  
// TODO 完善
const NodeClick = (data: { id: any }) => {
    console.log("@@@", data)
    baTable.comSearch.form.seller_id = data.id // 
}
</script>

<style scoped lang="scss">
.user-filter {
    margin-top: 20px;
    padding: 0 5px;
}
</style>