qimall/backend/views/components/common/com-pick-link.php

<?php

use common\helpers\ComponentHelper;

//ComponentHelper::loadComponentView('com-pick-list');
?>
<style>
    .com-pick-link .el-checkbox+.el-checkbox {
        margin-left: 0;
    }

    .com-pick-link .checkbox-div-box {
        height: 350px;
        overflow: auto;
    }

    .com-pick-link .edit-img {
        width: 18px;
        height: 18px;
        display: inline-block;
        margin-left: 10px;
        cursor: pointer;
    }

    .com-pick-link .el-dialog {
        width: 900px;
    }

    .com-pick-link .pick-box {
        width: 860px;
    }

    .auto-width .el-dialog {
        width: 80%;
        min-width: 900px;
        ;
    }

    .auto-width .pick-box {
        width: 99%;
        min-width: 860px;
    }

    .com-pick-link .el-checkbox {
        margin-right: 0;
        height: 32px;
    }

    .com-pick-link .el-checkbox__input {
        margin-top: 4px;
    }

    .module-box {
        width: 100%;
        height: 400px;
        border: 1px solid #f1f1f1;
        border-radius: 4px;
        padding: 10px 0;
        overflow: auto;
    }

    .right-box {
        padding: 10px;
    }

    .module-box-li li {
        width: 100%;
        height: 36px;
        line-height: 36px;
        text-indent: 30px;
        font-size: 14px;
        cursor: pointer;
    }

    .module-box-li li:hover {
        color: #409eff;
    }

    .module-box-li .active {
        background-color: #e5f0fe;
    }

    .cate3 {
        margin-left: 5px;
        padding: 15px 0 10px 0;
        color: #666;
    }
</style>

<template id="com-pick-link">
    <div>
        <el-dialog class="com-pick-link" :class="autoWidth && 'auto-width'" :title="title ? title : '选择链接'" @close="closeDialog" :visible.sync="dialogFormVisible" @opened="dialogOpened" :close-on-click-modal="false" :modal-append-to-body="false" append-to-body>
            <el-form v-loading="loading" :rules="form_rules" size="small" @submit.native.prevent label-width="60px">
                <div flex="main:justify">
                    <div class="pick-box">
                        <el-card class="box-card" shadow="never">
                            <el-tabs v-model="activeName" type="card" @tab-click="tabsClick">

                                <el-tab-pane v-for="category1 in options" :label="category1.title" :key="category1.name" :name="category1.name">
                                    <el-row :gutter="10">
                                        <el-col :span="6">
                                            <div class="module-box module-box-li">
                                                <ul>
                                                    <li class="left-li" :data-arr="category2.id +','+ category2.name +','+ category2.is_list" v-for="category2,key2 in category1.children" :key="category2.id" :class="[key2 == 0 ? 'active' : '','left-li-' + category2.id]" @click="liActive(category2,category1.name)">{{ category2.title }}</li>
                                                </ul>
                                            </div>
                                        </el-col>
                                        <el-col :span="18">
                                            <div class="module-box right-box">
                                                <div v-for="category2 in category1.children" :key="category2.id">
                                                    <!-- 右侧模块 -->
                                                    <div v-if="childrenBoxShow == category2.id && category2.is_list == 0" class="children-box">
                                                        <div class="input-item top-input" style="margin-bottom: 10px;width: 300px;" v-if="['base', 'application'].indexOf(category2.name) !== -1">
                                                            <el-input @keyup.enter.native="searchByType(category2.name)" size="small" placeholder="请输入搜索内容" type="text" clearable @clear="searchByType(category2.name)" v-model="searchKeyword">
                                                                <el-button slot="append" @click="searchByType(category2.name)" icon="el-icon-search"></el-button>
                                                            </el-input>
                                                        </div>

                                                        <el-alert v-if="category2.remark" :title="category2.remark" type="info"></el-alert>

                                                        <!-- 其他 -->
                                                        <div v-if="category1.name == 'other'" style="margin-top: 15px">
                                                            <el-form @submit.native.prevent>
                                                                <div v-if="category2.name == 'applet_link'">
                                                                    <!--小程序-->
                                                                    <el-form-item label-width="100px"
                                                                        label="小程序类型"
                                                                        style="margin-bottom: 15px;">
                                                                        <el-radio-group v-model="appletChangeType"
                                                                            @input="appletTypeChange(link[category2.id], $event)">
                                                                            <el-radio label="wechatApplet">微信小程序</el-radio>
                                                                            <el-radio label="alipayApplet">支付宝小程序</el-radio>
                                                                        </el-radio-group>
                                                                    </el-form-item>
                                                                    <el-form-item
                                                                        v-for="(item, key) in appletList"
                                                                        label-width="100px" :key="item.id"
                                                                        :label="item.title"
                                                                        style="margin-bottom: 15px;">
                                                                        <el-input style="margin-bottom: 10px" v-model="item.route" v-if="item.name == 'mp_ali_appid'" @input="appletInputLink($event, item)" type="textarea"
                                                                            :rows="5" placeholder="粘贴格式 alipays://platformapi/startapp?appId=2019062465587961&page=pages%2Fhz-enjoy%2Fmain%2Findex%3FextraData%3D%7B%22templateId%22%3A%22ZMGO_TPL202304061002000227790%22%2C%22partnerId%22%3A%222088041787152715%22%2C%22appId%22%3A%222021001181622762%22%7D 将自动解析APPID及路径"></el-input>
                                                                        <el-input v-else :placeholder="item.remark" v-model="item.route" @input="appletInputLink($event, item)"></el-input>
                                                                    </el-form-item>
                                                                </div>
                                                                <div v-else>
                                                                    <el-form-item v-for="(item, key) in link[category2.id]" label-width="100px" :key="item.id" :label="item.title" style="margin-bottom: 15px;">
                                                                        <template v-if="category2.name == 'wechat_video_account' && item.name == 'jumpType'">
                                                                            <el-radio-group v-model="item.route" v-if="item.name == 'jumpType'" @input="otherInputLink($event, item, link[category2.id])">
                                                                                <el-radio label="channelsUserProfile">主页</el-radio>
                                                                                <el-radio label="channelsActivity">视频</el-radio>
                                                                                <el-radio label="channelsLive">直播</el-radio>
                                                                            </el-radio-group>
                                                                        </template>
                                                                        <template v-else>
                                                                            <template v-if="item.name == 'feedId'">
                                                                                <el-input :placeholder="item.remark" v-model="item.route" :autosize="{ minRows: 4, maxRows: 8}" @input="otherInputLink($event, item, link[category2.id])" type="textarea"> </el-input>
                                                                            </template>
                                                                            <template v-else>
                                                                                <el-input :placeholder="item.remark" v-model="item.route" @input="otherInputLink($event, item, link[category2.id])">
                                                                                    <template v-if="item.open_type == 'call'" slot="prepend">电话</template>
                                                                                </el-input>
                                                                            </template>
                                                                        </template>
                                                                    </el-form-item>
                                                                </div>
                                                            </el-form>
                                                        </div>

                                                        <!-- 按钮模块 -->
                                                        <div v-else>
                                                            <div v-for="category3 in category2.children" :key="category3.name">
                                                                <div class="cate3" v-if="link[category3.id] !== undefined && link[category3.id].length > 0"><i class="el-icon-notebook-2"></i> <span>{{ category3.title }}</span></div>

                                                                <el-button plain v-for="(item, key) in link[category3.id]" :key="key" size="small" @click="selectBtn(item)" style="margin: 5px;">{{item.title}}</el-button>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <!-- 链接列表 -->
                                                    <div v-if="childrenBoxShow == category2.id && category2.is_list == 1&&category2.name !== 'consumer_card'" class="children-box">
                                                        <div style="display: flex; align-items: center; margin-bottom: 10px;">
                                                            <div class="input-item top-input" style="width: 300px;">
                                                              <el-input @keyup.enter.native="searchForm" size="small" placeholder="请输入搜索内容" type="text" clearable @clear="searchForm" v-model="keyword">
                                                                <el-button slot="append" @click="searchForm" icon="el-icon-search"></el-button>
                                                              </el-input>
                                                            </div>
                                                            <el-select v-model="cateValue" placeholder="请选择分类" size="small" clearable @change="searchForm" 
                                                                v-if="(category2.name == 'goods_cate' || category2.name == 'store-commodity-cate') && isShowGoodsCateSelect" style="margin-left: 10px;">
                                                                <el-option label="一级分类" value="1"></el-option>
                                                                <el-option label="二级分类" value="2"></el-option>
                                                                <el-option label="三级分类" value="3"></el-option>
                                                            </el-select>
                                                        </div>
                                                        <div v-if="boxList.length > 0">
                                                            <el-table ref="multipleGoodsTable" :data="boxList" tooltip-effect="dark" border v-loading="boxListLoading" size="small" @selection-change="handleSelectionChange" :row-key="getRowKeys">

                                                                <el-table-column v-if="inPickType == 1 || getIsJd" type="selection" reserve-selection width="55">
                                                                </el-table-column>

                                                                <el-table-column prop="id" :label="`${idText}${showId ? 'ID' : ''}`" width="100">
                                                                    <template slot-scope="scope">
                                                                        <span v-if="inPickType == 1">{{ scope.row.id }}</span>
                                                                        <span v-else-if="getIsJd">{{ scope.row.id }}</span>
                                                                        <div v-else>
                                                                            <el-radio v-model="pick_value" :label="scope.row" @change="handleChange">
                                                                                <span v-show="showId">{{ scope.row.id }}</span>
                                                                            </el-radio>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>

                                                                <el-table-column v-if="category2.name !== 'store_coupons'" prop="title" label="标题">
                                                                    <template slot-scope="scope">
                                                                        <div flex="cross:center">
                                                                            <div v-if="scope.row.header" style="margin-right: 10px;">
                                                                                <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="scope.row.header"></el-image>
                                                                            </div>
                                                                            <div v-if="scope.row.img || scope.row.cover_pic" style="margin-right: 10px;">
                                                                                <el-image style="width: 50px; height: 50px;border-radius: 5px;" :src="scope.row.img || scope.row.cover_pic"></el-image>
                                                                            </div>
                                                                            <div>
                                                                                <el-tooltip class="item" effect="dark" placement="top">
                                                                                    <div slot="content">{{scope.row.title || scope.row.goods_name||scope.row.name}}</div>
                                                                                    <span>{{`${(scope.row.title || scope.row.goods_name||scope.row.name)} ${scope.row.level_name ? `(${scope.row.level_name})` : ''}`}}</span>
                                                                                </el-tooltip>
                                                                            </div>
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <template v-if="category2.name == 'store-commodity-cate' || category2.name == 'store_goods' || category2.name == 'store_renov_goods'">
                                                                    <el-table-column prop="store_name" label="门店名称"> </el-table-column>
                                                                    <el-table-column prop="store_id" label="门店ID" width="80px"></el-table-column>
                                                                </template>
                                                                <template v-if="category2.name == 'store_renov_goods'">
                                                                    <el-table-column prop="store_name" label="门店名称"></el-table-column>
                                                                </template>
                                                                <template v-if="category2.name == 'store_coupons'">
                                                                    <el-table-column prop="name" label="优惠券名称"> </el-table-column>
                                                                    <el-table-column prop="type_text" label="优惠券类型" width="80px"></el-table-column>
                                                                    <el-table-column prop="content" label="优惠内容" width="80px"></el-table-column>
                                                                </template>
                                                                <el-table-column v-if="category2.name !== 'store_coupons'" prop="created_at" label="时间">
                                                                    <template slot-scope="scope">
                                                                        <div>{{ scope.row.created_at|dateTimeFormat('Y-m-d H:i:s') }}</div>
                                                                    </template>
                                                                </el-table-column>
                                                            </el-table>
                                                            <div style="text-align: right;margin: 20px 0;" v-if="pageCount">
                                                                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                                                            </div>
                                                        </div>
                                                    </div>
                                                    <div v-if="childrenBoxShow == category2.id && category2.is_list == 1&&category2.name == 'consumer_card'" class="children-box">
                                                            <el-table ref="multipleGoodsTable" :data="boxList" tooltip-effect="dark" border v-loading="boxListLoading" size="small" @selection-change="handleSelectionChange"  :row-key="getRowKeys">
                                                                <el-table-column  label="选择">
                                                                   <template slot-scope="scope">
                                                                     <div>
                                                                         <el-radio v-model="pick_value" :label="scope.row" @change="handleChange">
                                                                             <span v-show="showId">{{ scope.$index + 1 }}</span>
                                                                         </el-radio>
                                                                     </div>
                                                                   </template>
                                                                </el-table-column>
 
                                                                </el-table-column>
                                                                         <el-table-column prop="recharge_money" label="充值金额">
                                                                    <template slot-scope="scope">
                                                                        <div>
                                                                            {{scope.row.recharge_money}}
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                         <el-table-column prop="reward_money" label="赠送金额">
                                                                    <template slot-scope="scope">
                                                                        <div>
                                                                            {{scope.row.reward_money}}
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                <el-table-column prop="type" label="类型">
                                                                    <template slot-scope="scope">
                                                                        <div>
                                                                            <!-- 1：仅奖励一次，2：重复奖励 -->
                                                                            {{scope.row.type == 1 ? '仅奖励一次' :scope.row.type == 2 ?  '重复奖励' : '-'}}
                                                                        </div>
                                                                    </template>
                                                                </el-table-column>
                                                                
                                                            </el-table>
                                                            <div style="text-align: right;margin: 20px 0;" v-if="pageCount">
                                                                <el-pagination @current-change="pagination" background layout="prev, pager, next" :page-count="pageCount"></el-pagination>
                                                            </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </el-col>
                                    </el-row>
                                </el-tab-pane>
                            </el-tabs>
                        </el-card>
                    </div>
                </div>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeDialog">取 消</el-button>
                <el-button type="primary" @click="confirm">确 定</el-button>
            </div>
        </el-dialog>
        <div class="com-pick-link-content" @click="showPop" style="display: inline-block">
            <slot></slot>
        </div>
    </div>
</template>
<script>
    Vue.component('com-pick-link', {
        template: '#com-pick-link',
        props: {
            mallId: {
                default: null,
            },
            pickType: { // 列表选择多个还是单个参数，如：['online_goods','diy']，默认单选
                type: Array,
                default () {
                    return []
                },
            },
            title: {
                default: '',
            },
            defaultSelectList: { // 商品多选默认选中列表 传id
                type: Array,
                default () {
                    return []
                },
            },
            // 传入数组，数组可字符串和对象 [{name: 'goods',children:['goods_cate'] }]
            defaultTabs: { // 选择需要的tabs栏
                type: Array,
                default () {
                    return ["mall", "goods", "addons", "other"]
                },
            },
            popBoo: { //不使用插槽，是否开启弹窗
                type: Boolean,
                default: false
            },
            showId: { // 单选按钮旁边是否显示id
                type: Boolean,
                default: true
            },
            idText: {
                type: String,
                default: '选择'
            },
            parameter: {
                type: Object,
                default: function() {
                    return {};
                }
            },
            autoWidth: { //设置弹窗宽度自适应，最小宽度900px
                type: Boolean,
                default: false
            },
            isDiyMenu:{
                type: Boolean,
                default: false
            },
            isShowGoodsCateSelect:{ // 显示商品分类选择
                type: Boolean,
                default: true
            },
        },
        data() {
            return {
                dialogFormVisible: false,
                loading: true,
                boxListLoading: false,
                options: [],
                link: [],
                boxList: [],
                boxDataType: '',
                activeName: 'mall',
                activeType: '',
                route: '',
                ruleForm: {},
                ruturn_value: [],
                pageCount: 0,
                pick_value: null,
                keyword: null,
                cateValue: null,
                searchKeyword: null,
                currentCheckedItem: {}, //当前选择链接
                checkedList: [], // 全部选中链接
                checkedCities: [],
                appletList: [], // 小程序选择链接
                appletChangeType: 'wechatApplet', // 小程序选择类型
                form_rules: {
                    key_name: [{
                        required: true,
                        message: '请输入名称',
                        trigger: 'change'
                    }, ],
                },
                otherId: -1,
                inPickType: 0,
                childrenBoxShow: 0,
                alipayMiniFullLink: '',
                selectedRows: [],
                is_store_route: false
            };
        },
        computed: {
            getIsJd() {
                return this.activeType == 'multi_goods_cate'
            },
            isFeedId() {
                isFeedId
            }
        },
        created() {
            // 定义一个变量用于存储路由信息
            let store_route = ''
            // 获取当前路由信息并赋值给 store_route 变量
            store_route = this.$root.currentRoute
            // 将路由信息按 '/' 分割成数组
            store_route = store_route.split('/')
            // 检查路由数组的第一个元素是否为 'store'
            if (store_route[0] == 'store') {
                // 如果是, 将 is_store_route 属性设置为 true
                this.is_store_route = true
            }
        },
        watch: {
            popBoo: {
                handler(val) {
                    console.log(val, "==========> ");
                    this.dialogFormVisible = val;
                },
                immediate: true
            },
            alipayMiniFullLink: {
                handler(val) {
                    if (val) {
                        val = decodeURIComponent(val)
                        //  解析出来appid及path
                        val = val.replaceAll('alipays://platformapi/startapp?appId=', '')
                        let valArr = val.split('&page=')
                        if (valArr.length === 2) {
                            for (let linkKey in this.link) {
                                for (let i in this.link[linkKey]) {
                                    if (this.link[linkKey][i].open_type == 'applet') {
                                        console.log(this.link[linkKey][i].open_type)
                                        switch (this.link[linkKey][i].name) {
                                            case 'mp_ali_appid':
                                                this.link[linkKey][i].route = valArr[0]
                                                break;
                                            case 'mp_ali_app_path':
                                                this.link[linkKey][i].route = valArr[1]
                                                break;
                                        }
                                    }
                                }
                            }
                        }
                    }
                },
                immediate: true
            }
        },
        methods: {
            getRowKeys(row) {
                return row.id
            },
            appletTypeChange(list, type) { // 小程序类型选择
                let appletList = type === 'alipayApplet' ? ['mp_ali_appid', 'mp_ali_app_path'] : ['appid', 'app_path'];
                this.appletList = list.filter(item => appletList.includes(item.name));
            },
            appletInputLink(event, item) { // 小程序输入框链接获取
                let wechatApplet = ['app_path', 'appid']; // 微信小程序链接
                let alipayApplet = ['mp_ali_app_path', 'mp_ali_appid']; // 支付宝小程序链接
                let appletData = []; // 小程序回显
                if (wechatApplet.includes(item.name)) { // 微信小程序
                    appletData = this.appletList.filter(item => item.name === 'app_path')[0];
                }
                if (alipayApplet.includes(item.name)) { // 支付宝小程序
                    appletData = this.appletList.filter(item => item.name === 'mp_ali_app_path')[0];
                }
                this.ruturn_value = [{
                    title: appletData.name,
                    open_type: this.appletChangeType,
                    navigate: 'navigateTo',
                    route: appletData.route,
                    params: this.appletList ?? null,
                }];
            },
            otherInputLink(event, item, linkList = []) { // 其他插件中除小程序的输入框链接获取
                let wechatVideo = ['jumpType', 'finderUserName', 'feedId']; // 微信视频
                if (wechatVideo.includes(item.name)) {
                    let route_path = linkList.filter(item => item.name === 'finderUserName')[0].route;
                    this.ruturn_value = [{
                        title: item.name,
                        open_type: item.open_type,
                        navigate: 'navigateTo',
                        route: route_path,
                        params: linkList ?? null,
                    }];
                } else {
                    this.ruturn_value = [{
                        title: item.name,
                        open_type: item.open_type,
                        navigate: 'navigateTo',
                        route: event,
                        params: item ?? null,
                    }];
                }
            },
            liActive(data, tabsName) { // li点击处理
                console.log('data',data,tabsName);
                
                var params = [data.id, data.name, data.is_list, tabsName];
                this.triggerLoadBox(params);
            },
            tabsClick(tab) { // tabs切换
                var li = $("#pane-" + tab.name + " .module-box-li li").eq(0);
                $(".left-li").removeClass("active");
                if (li.length == 0) return; // 没有数据不继续走下去
                var params = li[0].dataset.arr.split(','); // 数组顺序：id,name,is_list,tabs切换name
                params.push(tab.name);
                this.triggerLoadBox(params);
            },
            triggerLoadBox(params) { // 右侧框展开处理
                if (this.pickType.includes(params[1])) {
                    this.inPickType = 1;
                } else {
                    this.inPickType = 0;
                }
                this.otherId = params[3] == 'other' ? params[0] : -1;
                if (params[3] === 'other' && params[1] === 'applet_link') {
                    this.appletTypeChange(this.link[params[0]]);
                }
                this.keyword = null;
                // 添加active处理
                $(".left-li").removeClass("active");
                $(".left-li-" + params[0]).addClass("active");

                // 隐藏列表框处理
                this.childrenBoxShow = params[0];

                // 判断加载列表内容
                if (params[2] == 1 && !$(".children-box-" + params[0]).hasClass('active')) {
                    this.page = 1;
                    this.activeType = params[1];
                    this.loadBoxData(params[1]);
                }
            },
            pagination(currentPage) {
                let self = this;
                self.page = currentPage;
                self.loadBoxData(this.activeType);
            },
            loadBoxData(type) {
                var self = this;
                this.boxListLoading = true;
                let params = Object.assign(self.parameter, {
                    r: this.is_store_route ? 'store/store-steward/link/get-pick-list' : 'mall/link/get-pick-list',
                    type: type,
                    keyword: this.keyword,
                    page: self.page,
                    level: this.cateValue,
                })

                if(this.isShowGoodsCateSelect === false){
                    params.level = "1"
                }
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    this.boxListLoading = false;
                    if (e.data.code === 0) {
                        if (type == 'consumer_card') {
                            self.boxList = e.data.data.list
                            self.route = e.data.data.route;   
                        }else if(type == 'diy_template'){    
                            self.boxList = e.data.data.list
                            self.route = e.data.data.route;
                        }else{
                            self.boxList = e.data.data.list.list;
                            self.route = e.data.data.route;
                            self.pageCount = e.data.data.list.page_count;
                        }
                        if (self.route.indexOf('/plugins/SmartForm/SmartForm') != -1) {
                            // 只能表单选择链接
                            self.boxDataType = 'SmartForm';
                        }
                        if (self.route.indexOf('/plugins2/merchantVoucher/activeCoupon') != -1) {
                            // 只能表单选择链接
                            self.boxDataType = 'AlipayMchCoupon';
                        }
                        this.getTableDefaultSelectList();
                    } else {
                        self.$message.error(e.data.msg);
                    }
                }).catch(e => {});
            },
            handleChange(val) {
                console.log('handleChange',val);
                
                val.open_type = 'page';
                if (!isEmpty(val.more_params)) {
                    val.route = val.route ? val.route + val.more_params : this.route + val.more_params;
                } else {
                    val.route = val.route ? val.route + '?id=' + val.id : this.route + val.id;
                }
                if (val.route.indexOf('/plugins/LuckyGroup/productDetail') != -1) {
                    val.route = val.route + '&activity_id=' + val.activity_id;
                }
                // 门店商品详情特殊处理
                if (val.route.indexOf('/plugins2/Store/store/storeDetail') != -1) {
                    val.route = val.route + '&store_id=' + val.store_id
                }
                this.ruturn_value = [{
                    title: val.title,
                    open_type: val.open_type,
                    navigate: 'navigateTo',
                    route: val.route,
                    params: val ? val : null,
                }];
            },
            dialogOpened() {
                this.currentCheckedItem = {};
                this.checkedList = [];
                this.checkedCities = [];
                this.return_value = []
                if (this.options.length == 0) {
                    this.loadList({})
                }
                // 获取默认选中列表
                this.getTableDefaultSelectList();
            },
            // 默认选中列表
            getTableDefaultSelectList() {
                let self = this;
                self.$nextTick(() => {
                    self.defaultSelectList.forEach(id => {
                        const item = self.boxList.find(item => {
                            return item.id === id; // 如需其他对比参数 - 自行更改对比参数
                        })
                        if (item) {
                            self.$refs.multipleGoodsTable[0].toggleRowSelection(item);
                        }
                    });
                })
            },
            searchForm() {
                this.loadBoxData(this.activeType);
            },
            loadList() {
                this.loading = true;
                const params = {
                    r: this.is_store_route ? 'store/store-steward/link/get-link' : 'mall/link/get-link',
                    type: this.type
                };
                if (this.mallId) {
                    params.mall_id = this.mallId;
                }
                request({
                    params: params,
                    method: 'post',
                }).then(e => {
                    if (e.data.code === 0) {
                        this.options = this.filterArr(e.data.data.menu)
                        console.log(this.options);
                        // 处理特殊过滤展示
                        let score_game_menu = e.data.data.menu.filter(item => item.name === 'score_game')
                        console.log('score_game_menu',score_game_menu);

                        if (this.isDiyMenu && score_game_menu.length > 0) {
                            score_game_menu.forEach(item => {
                                item.children = item.children.filter(child => child.name === 'score_secondary_card');
                            });
                        }

                        if(score_game_menu.length > 0){
                            this.options.push(...score_game_menu)
                        }
                        this.link = e.data.data.link_arr;
                        this.ruleForm = JSON.parse(JSON.stringify(e.data.data.link_arr));
                        this.childrenBoxShow = this.options[0].children[0].id; // 初始化右边第一个页面
                        this.activeName = this.options[0].name;
                        this.getOhterList(this.activeName) // 需要初始二次请求的类型
                        this.loading = false;
                    } else {
                        this.$message.error(e.data.msg);
                        this.dialogFormVisible = false;
                    }
                }).catch();
            },
            filterArr(target) {
                let handleArr = this.deepClone(target)
                let result = target.filter(item => {
                    return this.defaultTabs.some(tag => {
                        if (typeof tag === "string") { // 字符串类型
                            return tag === item.name
                        } else if (typeof tag === "object") { // 对象类型
                            return tag.name === item.name
                        } else { // 其他类型
                            console.log("暂不支持该类型");
                            return true
                        }
                    })
                }).map((item) => {
                    if (item.children && item.children.length) {
                        // 做二级侧边栏得处理
                        item.children = item.children.filter(child => {
                            return this.defaultTabs.some(tag => {
                                if (typeof tag === "string") { // 字符串类型
                                    return true
                                } else if (typeof tag === "object") { // 对象类型
                                    if (tag.children && tag.children.length) {
                                        return tag.children.indexOf(child.name) !== -1
                                    } else if (item.name === tag.name) {
                                        // 不填children直接全部展示
                                        return true
                                    } else {
                                        // 进入下一个判断
                                        return false
                                    }
                                } else { // 其他类型
                                    console.log("暂不支持该类型");
                                    return false
                                }
                            })
                        })
                    }
                    return item
                })
                return result
            },
            getOhterList(type) {
                const value = {
                    goods: () => {
                        this.liActive(this.options[0].children[0], 'goods')
                    },
                    marketing: () => {
                        this.liActive(this.options[0].children[0], 'marketing')
                    },
                    addons: () => {
                        this.liActive(this.options[0].children[0], 'addons')
                    }
                }
                const cb = value[type]
                cb && cb()
            },
            jumpTypeChange(val, item) {
                console.log('跳转类型改变', val)
                item.open_type = val
            },
            confirm() {
                let self = this;
                // 其他获取返回值
                if (this.otherId != -1) {
                    var otherInfo = this.link[this.otherId];
                    var params = {};
                    var open_type = '';
                    otherInfo.forEach(function(item) {
                        open_type = item.open_type;
                        params[item.name] = item.route;
                    });
                    params['open_type'] = open_type;
                    self.ruturn_value = [{
                        title: '',
                        open_type: open_type,
                        navigate: 'navigateTo',
                        route: '',
                        params: params ? params : null
                    }];
                }
                for (let i = 0; i < self.ruturn_value.length; i++) {
                    if (self.ruturn_value[i]['params'] && self.ruturn_value[i]['params']['note_type'] === 2) {
                        let videoStr = '/plugins/operating_note/video/index?content_id=';
                        let id = self.ruturn_value[i]['params']['route'].split('id=')[1];
                        self.ruturn_value[i]['params']['route'] = videoStr + id;
                    }
                }
                self.$emit('selected', self.ruturn_value);
                self.dialogFormVisible = false;
            },
            selectBtn(item) {
                this.ruturn_value = [{
                    title: item.title,
                    open_type: item.open_type,
                    navigate: 'navigateTo',
                    route: item.route,
                    params: item ? item : null,
                }];
            },
            closeDialog() {
                if (!isEmpty(this.$refs.multipleGoodsTable)) {
                    this.$refs.multipleGoodsTable[0].clearSelection(); // 清空选择
                }
                this.dialogFormVisible = false;
                this.$emit("close", this.dialogFormVisible);
            },
            showPop() {
                this.dialogFormVisible = true;
            },
            handleSelectionChange(val) { // 多选商品
                console.log('val',val);
                
                let self = this;
                if (self.boxDataType == 'SmartForm' || self.boxDataType == 'AlipayMchCoupon') {
                    if (val.length) {
                        if (this.ruturn_value.length >= 1 || val.length > 1) {
                            this.$message.error('最多只能选一个')
                            this.ruturn_value = []
                            if (!isEmpty(this.$refs.multipleGoodsTable)) {
                                this.$refs.multipleGoodsTable[0].clearSelection(); // 清空选择
                            }
                        } else {
                            this.ruturn_value = val
                        }
                    }
                } else {
                    var temp = [];

                    if (self.activeType == 'multi_goods_cate') {
                        self.selectedRows = val
                        if (val.length > 0) {
                            let open_type = 'page'
                            let route = self.route
                            let title = val[0].title
                            let navigate = 'navigateTo'
                            let ids = ''
                            val.forEach(function(item) {
                                ids += item.id + ','
                            })

                            ids = ids.replace(/(^,)|(,*$)/g, '')

                            route += ids
                            temp.push({
                                title,
                                open_type,
                                navigate,
                                route,
                                params: {
                                    title,
                                    open_type,
                                    navigate,
                                    route
                                },
                            })
                            self.ruturn_value = temp
                            console.log('self.ruturn_value', self.ruturn_value)
                        } else {
                            self.ruturn_value = [{
                                title: '',
                                open_type: 'page',
                                navigate: 'navigateTo',
                                route: '',
                                params: null
                            }]
                        }
                    } else {
                        val.forEach(function(item) {
                            item.open_type = 'page';
                            item.route = self.route + item.id;
                            temp.push({
                                title: item.title,
                                open_type: item.route,
                                navigate: 'navigateTo',
                                route: item.route,
                                params: item ? item : null,
                            });
                        });
                        self.ruturn_value = temp;
                        console.log(self.ruturn_value);
                    }
                }

            },
            deepClone(obj) {
                var o, i, j, k;
                if (typeof(obj) != "object" || obj === null) return obj;
                if (obj instanceof(Array)) {
                    o = [];
                    i = 0;
                    j = obj.length;
                    for (; i < j; i++) {
                        if (typeof(obj[i]) == "object" && obj[i] != null) {
                            o[i] = arguments.callee(obj[i]);
                        } else {
                            o[i] = obj[i];
                        }
                    }
                } else {
                    o = {};
                    for (i in obj) {
                        if (typeof(obj[i]) == "object" && obj[i] != null) {
                            o[i] = arguments.callee(obj[i]);
                        } else {
                            o[i] = obj[i];
                        }
                    }
                }
                return o;
            },
            // js过滤
            searchByType(name) {
                // 存储子级
                let childrenIds = []

                // 找到传过来的name下面的子级
                for (const top of this.options) {
                    if (top.length === 0) {
                        continue
                    }

                    for (const top2 of top.children) {
                        if (top.length === 0) {
                            continue
                        }

                        if (top2.name === name) {
                            childrenIds = top2.children.map(item => item.id)
                            break
                        }
                    }
                }

                if (childrenIds.length === 0) {
                    return
                }

                if (this.searchKeyword === null || this.searchKeyword.trim() === '') {
                    for (const childrenId of childrenIds) {
                        if (this.link[childrenId] === undefined) {
                            continue
                        }

                        this.link[childrenId] = JSON.parse(JSON.stringify(this.ruleForm[childrenId]))
                    }

                    return
                }

                // 备份
                for (const childrenId of childrenIds) {
                    if (this.link[childrenId] === undefined) {
                        continue
                    }

                    let copyArr = JSON.parse(JSON.stringify(this.ruleForm[childrenId]))
                    this.link[childrenId] = copyArr.filter(item =>
                        item.title.toLowerCase().includes(this.searchKeyword.toLowerCase())
                    )
                }
            }
        },
    });
</script>