update 分类过滤

xuxy

2024-07-03 d91c23a3dc8cb22c0a5b2bbb5a74c6aac37469b5

update 分类过滤

 components/tree-filter/tree-filter.vue

对比新文件
@@ -0,0 +1,354 @@
<template>
    <view class="tree-filter">
        <view class="tree-filter-input" @click="show">
            <slot>

            </slot>
        </view>

        <view class="tree-filter-tree-cover" v-if="isOpened" @click="handleClose"></view>
        <view class="tree-filter-tree-dialog" v-if="isOpened">
            <view class="tree-filter-popper__arrow"></view>
            <view class="dialog-caption">
                <view class="title-area">
                    <text class="dialog-title">{{popupTitle}}</text>
                </view>
                <view class="dialog-close" @click="handleClose">
                    <view class="dialog-close-plus" data-id="close"></view>
                    <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
                </view>
            </view>
            <view v-if="filter"
                style="margin-left:40rpx;margin-right:40rpx;;margin-top: 40rpx;border-bottom:1px solid #eee;padding-bottom:20rpx;display:flex;color:#000">
                <input v-model="search" style="height:60rpx;line-height:60rpx;color:#000" placeholder="请输入搜索内容"></input>
                <view @click="()=>{search='';updateSearch()}"
                    style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">清空</view>
                <view @click="updateSearch" style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">搜索
                </view>
            </view>
            <view>
                <!-- 渲染多级树，首先确认层级？ -->
                <view v-if="currentLevel===-1" class="tree-filter-nodes">
                    <!-- 暂时跟节点 -->
                    <view v-for="(item,index) of localdata" :key="item.value" class="tree-filter-node"
                        @click="selecteRow(item)">
                        <view>{{item.label}}</view>
                        <view class="arrow" v-if="item.children&&item.children.length>0">
                            <uni-icons type="right"></uni-icons>

                        </view>
                    </view>
                </view>
                <view v-else>
                    <view class="tree-filter-top-titles">
                        <view v-for="(item,index) of currentNodes" :key="item.value"
                            @click="selecteRowCurrentNodesOne(item,index)" class="tree-filter-top-title">
                            <view>{{item.label || '-'}}</view>
                            <view class="arrow"><uni-icons type="right" style="color: lightgray;"></uni-icons></view>
                        </view>
                        <view class="tree-filter-top-title-tip">
                            请选择
                        </view>
                    </view>
                    <view class="tree-filter-nodes">
                        <view v-for="(item,index) of currentNodes[currentLevel].children" :key="item.value"
                            class="tree-filter-node" @click="selecteRow(item)">
                            <view>{{item.label}}</view>
                            <view class="arrow" v-if="item.children&&item.children.length>0">
                                <uni-icons type="right"></uni-icons>
                            </view>
                        </view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>
<!-- 多级带搜索插叙功能的tree -->
<script>
    export default {
        name: "tree-filter",
        data() {
            return {
                isOpened: false,
                search: '',
                currentLevel: -1,
                currentNodes: [], //数组存储
                currentValue: {}
            };
        },
        methods: {
            async updateSearch() {
                //todo 递归搜索下面的数据，，并标记为可展示的
                console.log('updateSearch', this.localdata)
                await this.$emit('search', this.search)
                // console.log('updateSearch',this.localdata)
				
                // setTimeout(() => {
                //     console.log('updateSearch2 setTimeout', this.localdata)
                //     //清空
                //     if (this.search) {
                //         this.selectedClear()
                //     }
                //     if(!this.search){
                //         //其他的也恢复
                //         this.selectedClear()
                //     }
                // }, 200)
            },
            //数据
            selectedClear() {
                //清空选择的数据
                //当前层级和当前节点？
                this.currentLevel = -1
                this.currentNodes = []
                this.currentValue = {}
                this.$forceUpdate()
            },
            selectedSet() {
                //设置处理的级别，需要第几个节点

            },
            selecteRowCurrentNodesOne(item, index) {
                //选择的是最上面的
                var lens = this.currentNodes.length - index
                this.currentNodes.splice(index, lens)
                this.currentLevel -= (lens + 0)
                console.log(' this.currentNodes', this.currentNodes,this.currentLevel)

            },
            selecteRow(row) {
                //选择某一个
                console.log('selecteRow', row)
                if (row.children && row.children.length > 0) {
                    //选择节点
                    this.currentNodes.push(row)
                    this.currentLevel += 1

                } else {
                    //选择的是value
                    if (this.currentLevel === -1) {
                        //直接选择的
                        this.currentValue = row
                    } else {
                        this.currentValue = row

                    }
                    this.hide()
                    this.$emit('change', {
                        detail: {
                            value: [row]
                        }
                    })


                }
            },
            //显示
            show() {
                this.isOpened = true
                setTimeout(() => {
                    this.$refs.pickerView.updateData({
                        treeData: this._treeData,
                        selected: this.selected,
                        selectedIndex: this.selectedIndex
                    })
                }, 200)
                this.$emit('popupopened')
            },
            hide() {
                this.isOpened = false
                this.$emit('popupclosed')
            },
            handleClose() {
                this.hide()

            },
        },
        props: {
            filter: {
                type: Boolean,
                default: true
            },
            placeholder: {
                type: String,
                default: '请选择'
            },
            localdata: {
                type: [Array, Object],
                default () {
                    return []
                }
            },
            selectConfirmTitle: {
                type: String,
                default: ''
            }
        }
    }
</script>

<style lang="scss">
    .tree-filter {
        .tree-filter-top-titles {
            display: flex;
            margin-bottom: 0rpx;
            overflow-x: scroll;
            flex-wrap: wrap;
            padding-left: 40rpx;
            padding-right: 40rpx;
            padding-top: 20rpx;

            .tree-filter-top-title {
                margin-right: 40rpx;
                text-align: left;
                // color: darkgray;
                color: #333;
                display: flex;

                .arrow {
                    margin-left: 30rpx;
                }
            }

            .tree-filter-top-title-tip {
                margin-right: 40rpx;
                text-align: left;
                color: darkgray;
                display: inline-block;
            }

            .tree-filter-top-title::last-child {
                // color: #333;
            }
        }

        .tree-filter-nodes {
            padding-left: 40rpx;
            padding-right: 40rpx;

            .tree-filter-node {
                display: flex;
                color: #333;

                .arrow {
                    margin-left: auto;
                    margin-right: 0rpx;
                }
            }
        }

        .tree-filter-tree-cover {
            position: fixed;
            left: 0;
            top: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(0, 0, 0, .4);
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            z-index: 100;
        }

        .tree-filter-tree-dialog {
            position: fixed;
            padding: 20rpx;
            padding-top: 40rpx;
            left: 0;
            /* #ifndef APP-NVUE */
            top: 20%;
            /* #endif */
            /* #ifdef APP-NVUE */
            top: 200px;
            /* #endif */
            right: 0;
            bottom: 0;
            background-color: #FFFFFF;
            border-top-left-radius: 10px;
            border-top-right-radius: 10px;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: column;
            z-index: 102;
            overflow: hidden;
            /* #ifdef APP-NVUE */
            width: 750rpx;
            /* #endif */
        }

        /* picker 弹出层通用的指示小三角, todo：扩展至上下左右方向定位 */
        /* #ifndef APP-NVUE */
        .tree-filter-popper__arrow,
        .tree-filter-popper__arrow::after {
            position: absolute;
            display: block;
            width: 0;
            height: 0;
            border-color: transparent;
            border-style: solid;
            border-width: 6px;
        }

        .tree-filter-popper__arrow {
            filter: drop-shadow(0 2px 12px rgba(0, 0, 0, 0.03));
            top: -6px;
            left: 10%;
            margin-right: 3px;
            border-top-width: 0;
            border-bottom-color: #EBEEF5;
        }

        .tree-filter-popper__arrow::after {
            content: " ";
            top: 1px;
            margin-left: -6px;
            border-top-width: 0;
            border-bottom-color: #fff;
        }

        /* #endif */
        .dialog-caption {
            position: relative;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            /* border-bottom: 1px solid #f0f0f0; */
        }

        .dialog-title {
            /* font-weight: bold; */
            line-height: 44px;
        }

        .dialog-close {
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            /* #ifndef APP-NVUE */
            display: flex;
            /* #endif */
            flex-direction: row;
            align-items: center;
            padding: 0 15px;
        }

        .dialog-close-plus {
            width: 16px;
            height: 2px;
            background-color: #666;
            border-radius: 2px;
            transform: rotate(45deg);
        }

        .dialog-close-rotate {
            position: absolute;
            transform: rotate(-45deg);
        }

    }
</style>

 manifest.json

@@ -52,7 +52,8 @@
        "appid" : "wx3203fd935a6ffe09",
        "setting" : {
            "urlCheck" : false,
            "es6" : true
            "es6" : true,
            "minified" : true
        },
        "usingComponents" : true,
        "plugins" : {}

 pages/home/supplier-home.vue

@@ -19,7 +19,7 @@
                <image class="user-icon" v-if="currentInfo.picture" :src="currentInfo.picture" mode="aspectFit"></image>

                <view class="name">
                    <view class="t1">{{currentInfo.nickName || currentInfo.loginName || '-'}}<span
                    <view class="t1">{{ (!!currentInfo.supplierDTO?(currentInfo.supplierDTO.name):"") || currentInfo.nickName || currentInfo.loginName || '-'}}<span
                            v-if="currentInfo.supplierDTO&&currentInfo.supplierDTO.status!=='P'">
                            ({{currentInfo.supplierDTO?currentInfo.supplierDTO.statusStr:''}})</span>
                    </view>

 pages/user/supplier-user.vue

@@ -20,7 +20,8 @@
                <image class="user-icon" v-if="currentInfo.picture" :src="currentInfo.picture" mode="aspectFit"></image>

                <view class="name">
                    <view class="t1">{{currentInfo.nickName || currentInfo.loginName || '-'}}<span
                    <view class="t1">
                        {{ (!!currentInfo.supplierDTO?(currentInfo.supplierDTO.name):"") || currentInfo.nickName || currentInfo.loginName || '-'}}<span
                            v-if="currentInfo.supplierDTO&&currentInfo.supplierDTO.status!=='P'">
                            ({{currentInfo.supplierDTO?currentInfo.supplierDTO.statusStr:''}})</span>
                    </view>

 sub_pages/supplier/flower-manage/flower-add.vue

@@ -11,11 +11,19 @@
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                </view> -->
                <view class="m-l-a m-r-0 flex " :class="[!dto['category']?'desc-gray':'']">
                    <uni-data-picker @change="(e)=>{PickCategory(dto,e)}" placeholder="" @search="updateSearch"
                        :localdata="columns_categorys_picker">
                    <!--     <uni-data-picker ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker">
                        {{dto.categoryStr||dto.category || '请选择'}}
                    </uni-data-picker>
                    </uni-data-picker> -->
                    <tree-filter ref="picker_category" @change="(e)=>{PickCategory(dto,e)}" placeholder=""
                        @search="updateSearch" :filter="true" :localdata="columns_categorys_picker"
                        selectConfirmTitle="">
                        <view class="flex">
                            <view>{{dto.categoryStr||dto.category || '请选择'}}</view>
                    <u-icon class="m-l-a" name="arrow-right"></u-icon>
                        </view>

                    </tree-filter>
                </view>
            </view>
            <view class="form-item before-line">
@@ -191,14 +199,16 @@
                <view class="button-green" @click="closeParamPop">返回</view>
            </view>
        </uni-popup>
        <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">
        </dying318picker>
        <!--         <dying318picker :picker-list="columns_categorys" ref="picker_category" @confirm="confirmPickerCategory">
        </dying318picker> -->
    </view>
</template>

<script>
    import environments from '@/environments'
    import dying318picker from '@/components/dying318-picker/Picker.vue'
    import treeFilter from '@/components/tree-filter/tree-filter.vue'


    import {
        mapState
@@ -308,16 +318,31 @@
                this.columns_categorys_picker = []
                this.mapCategoryTree(this.columns_categorys_picker, this.columns_categorys)
                console.log('change updateSearch', search, this.columns_categorys_picker)
                this.$refs.picker_category.selectedClear()
            },
            async PickCategory(item, e) {
                console.log('PickCategory', item, e)
                if (e.detail.value) {
                    if (this.dto.category) {
                        await this.$message.confirm('修改分类将清空商品参数，确定修改吗')
                    } {
                        var currentnode = this.columns_categorys_dict['@' + e.detail.value[e.detail.value.length - 1]
                            .value]
                    let tmpe = e
                    if (this.dto.category && this.dto.category !== currentnode.id) {
                        this.$message.confirm('修改分类将清空商品参数，确定修改吗').then(async res => {
                        // console.log('currentnode',currentnode,this.columns_categorys_dict,'@'+e.detail.value[e.detail.value.length - 1].value)
                            this.dto.categoryStr = currentnode.name
                            this.dto.category = currentnode.id
                            this.dto.name = currentnode.name
                            this.dto.unit = currentnode.unit
                            this.dto.color = currentnode.color
                            //递归获取category的其他数据，用来做map？
                            this.$message.showLoading()
                            await this.refresh_category()
                            this.$message.hideLoading()
                        }).catch(e1 => {
                            console.log('this.$refs.picker_category', this.$refs.picker_category)
                            this.$refs.picker_category.onchange(tmpe.detail.value)
                        })
                    } else {
                        this.dto.categoryStr = currentnode.name
                        this.dto.category = currentnode.id
                        this.dto.name = currentnode.name
@@ -352,6 +377,7 @@
                        }
                        if (item.name == this.columns_categorys_search) {
                            has = true
                            hasTrue = true
                        }
                        this.columns_categorys_dict['@' + item.id] = item
                        if (item.children && item.children.length > 0) {
@@ -364,13 +390,28 @@
                        } else {
                            tmp.children = undefined
                        }
                        if (hasTrue || has) {
                            console.log('has ',tmp)

                        if (has) {
                            console.log('has ', tmp, hasTrue, has)
                            node.push(tmp)
                        } else {

                        }
                        if (!has && hasTrue) {
                            //说明是这个节点有的，需要判断是否需要删除
                            if (!tmp.children || tmp.children.length == 0) {
                            
                        } else {
                            console.log('not has ',tmp)
                                console.log('has ', tmp, hasTrue, has)
                                node.push(tmp)
                        }
                        }
                        // if (hasTrue || has) {
                        //     node.push(tmp)

                        // } else {
                        //     console.log('not has ', tmp)
                        // }

                    }
                }
@@ -568,7 +609,8 @@
            }
        },
        components: {
            dying318picker
            dying318picker,
            treeFilter
        }
    }
</script>

 uni_modules/uni-data-picker/components/uni-data-picker/uni-data-picker.vue

@@ -3,6 +3,7 @@
        <view class="uni-data-tree-input" @click="handleInput">
            <slot :options="options" :data="inputSelected" :error="errorMessage">
                <view class="input-value" :class="{'input-value-border': border}">
					
                    <text v-if="errorMessage" class="selected-area error-text">{{errorMessage}}</text>
                    <view v-else-if="loading && !isOpened" class="selected-area">
                        <uni-load-more class="load-more" :contentText="loadMore" status="loading"></uni-load-more>
@@ -37,13 +38,13 @@
                    <view class="dialog-close-plus dialog-close-rotate" data-id="close"></view>
                </view>
            </view>
            <view v-if="false"
                style="margin-left:40rpx;margin-right:40rpx;; border-bottom:1px solid #eee;padding-bottom:20rpx;display:flex">
            <view v-if="filter"  
                style="margin-left:40rpx;margin-right:40rpx;; border-bottom:1px solid #eee;padding-bottom:20rpx;display:flex;color:#000">
                <input v-model="search" style="height:60rpx;line-height:60rpx;color:#000" placeholder="请输入搜索内容"></input>
                <button @click="()=>{search='';updateSearch()}"
                    style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">清空</button>
                <button @click="updateSearch"
                    style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">搜索</button>
                <view @click="()=>{search='';updateSearch()}"
                    style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">清空</view>
                <view @click="updateSearch"
                    style="height:60rpx;line-height:60rpx;margin-left:auto;margin-right:0rpx">搜索</view>
            </view>
            <data-picker-view class="picker-view" ref="pickerView" v-model="dataValue" :localdata="localdata"
                :preload="preload" :collection="collection" :field="field" :orderby="orderby" :where="where"
@@ -112,6 +113,10 @@
                type: Boolean,
                default: false
            },
            filter: {
                type: Boolean,
                default: false
            },
            clearIcon: {
                type: Boolean,
                default: true
@@ -161,8 +166,8 @@
                await this.$emit('search',this.search)
                // console.log('updateSearch',this.localdata)
                setTimeout(() => {
                    console.log('updateSearch2',this.localdata)
                    this.showpicker = new Date().getTime()
                    console.log('updateSearch2 setTimeout',this.localdata)
                    // this.showpicker = new Date().getTime()
                    // this.load()
                    this.$refs.pickerView.updateData({
                        treeData: this.localdata,
@@ -189,7 +194,9 @@
                this.load();
            },
            load() {
                // console.log('load',this.readonly)
                if (this.readonly) {
                    // console.debug('load readonly')
                    this._processReadonly(this.localdata, this.dataValue);
                    return;
                }
@@ -198,7 +205,10 @@
                if (this.isLocalData) {
                    this.loadData();
                    this.inputSelected = this.selected.slice(0);
                    console.log('load isLocalData',this.inputSelected)
					
                } else if (this.isCloudDataList || this.isCloudDataTree) { // 回显 Cloud 数据
                    // console.log('load Cloud')
                    this.loading = true;
                    this.getCloudDataValue().then((res) => {
                        this.loading = false;
@@ -208,6 +218,7 @@
                        this.errorMessage = err;
                    })
                }
                //  console.log('load over')
            },
            show() {
                this.isOpened = true

 uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-picker.js

@@ -218,6 +218,7 @@
      }

      this.selected = this._findNodePath(inputValue, this.localdata);
        console.log('_findNodePath',inputValue,this.localdata)
    },

    // 加载 Cloud 数据 (单列)

 uni_modules/uni-data-picker/components/uni-data-pickerview/uni-data-pickerview.vue

@@ -67,6 +67,7 @@
      }
    },
    created() {
        console.log('created picker')
      if (!this.managedMode) {
        this.$nextTick(() => {
          this.loadData();