Merge pull request 'zq-sliderDev' (#88) from zq-sliderDev into master

Reviewed-on: #88

src/App.vue

@@ -10,6 +10,8 @@
       <el-container :class="(showHeader ? 'short-container' : '')">
         <!-- 侧边栏 -->
         <SliderMenu v-if="showSidebar" :menuData="slidermenu" :customize="customize"></SliderMenu>
+        <SliderScond v-if="showSecondSide" :menuData="secondMenu" ></SliderScond>
+        <!-- :renderKey="{}"  覆盖内部取值 可存储至store 修改、获取-->
         <el-container class="main-right-content">
           <!-- 面包屑导航 -->
           <Breadcrumb />
@@ -32,6 +34,7 @@ import Header from './components/Header.vue';
 import Breadcrumb from './components/Breadcrumb.vue';
 // import loadingAnimation from '@/assets/loadingAni.json' // 导入JSON文件
 import GlobalLoading from '@/components/GlobalLoading1.vue'
+import SliderScond from '@/components/SliderScond.vue'
 // import ContentWithLoading from '@/components/ContentWithLoading'
 export default {
   data() {
@@ -41,6 +44,7 @@ export default {
   },
   components: {
     GlobalLoading,
+    SliderScond,
     // ContentWithLoading,
     SliderMenu,
     // Footer,
@@ -48,7 +52,7 @@ export default {
     Breadcrumb
   },
   computed: {
-    ...mapState(['showSidebar','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
+    ...mapState(['showSidebar','showSecondSide','secondMenu','showHeader','slidermenu','customize']) // 从Vuex映射showSidebar状态到组件的计算属性中
   },
   mounted() {
     window.addEventListener('beforeunload', this.clearStorage);
@@ -80,6 +84,7 @@ export default {
   color: #2c3e50;
   height: 100%;
   background: #F5F7FA;
+  min-width: 1200px;
 }
 .app-content {
   position: relative;
@@ -91,6 +96,7 @@ export default {
 .main-right-content{
   display: flex;
   flex-direction: column;
+  min-width: 1042px;
 }
 
 

src/components/GuipSelect.vue

@@ -18,7 +18,7 @@ export default {
   props: {
     value: [String, Number, Array],
     options: {
-      type: Array,
+      type: [Array,Object],
       default: () => []
     },
     // 新增配置字段
@@ -58,9 +58,18 @@ export default {
     }
   },
   computed: {
-    // 处理options为空的情况
     processedOptions() {
+      // 处理options为空的情况
       let options = this.options || [];
+      
+      // 如果是对象格式，转换为数组
+      if (options && !Array.isArray(options)) {
+        options = Object.keys(options).map(key => ({
+          [this.valueKey]: key,
+          [this.labelKey]: options[key]
+        }));
+      }
+
       // 当extraItem存在且不是空对象时，添加到options数组开头
       if (this.extraItem && Object.keys(this.extraItem).length > 0) {
         return [

src/components/SliderScond.vue

@@ -0,0 +1,311 @@
+<template>
+    <el-collapse v-model="activeNames" @change="handleChange">
+        <el-collapse-item v-for="(item, index) in menuList" :key="index" :name="item[renderKeyNew.domName]">
+            <template #title>
+                <!-- <div class="flex gap8" @click.stop="handleTitleClick"> -->
+                <div class="flex-between gap8 collapse-item">
+                    <div class="flex gap8 ">
+                        <GuipToolTip :content="item[renderKeyNew.menuTitle]">
+                            <span class="menu-name">{{ item[renderKeyNew.menuTitle] }}</span>
+                        </GuipToolTip>
+                        <span v-if="item[renderKeyNew.selected]" class="menu-select"></span>
+                    </div>
+                    <img class="arrow_img" :class="{ 'is-active': activeNames.includes(item[renderKeyNew.domName]) }"
+                        src="@/assets/input_ex_ic.png" alt="">
+                </div>
+            </template>
+            <div v-for="(item1, index1) in item.list" @click="setActiveCur(item1, item, index)"
+                :class="['flex-between point', activeFloor == item1[renderKeyNew.subtitle] ? 'curActive' : '']"
+                :key="index1">
+                <span class="l-menu-name">{{ item1[renderKeyNew.subtitle] }}</span>
+                <img v-if="item1[renderKeyNew.SubSelected]" class="selected" src="../assets/menu/is_selected.png" alt="">
+            </div>
+        </el-collapse-item>
+    </el-collapse>
+</template>
+
+<script>
+import store from '../store';
+import GuipToolTip from "@/components/GuipToolTip.vue";
+
+export default {
+    options: { styleIsolation: "shared" },
+    props: {
+        menuData: {
+            type: [Array, Object],
+            required: true
+        },
+        // 后续如果渲染的值不同可以通过调整这个修改取值
+        renderKey: {
+            type: [Object],
+            default: () => {}
+        }
+    },
+    data() {
+        return {
+            activeNames: [],//获取到的值 同 绑定的name属性
+            curIndex: 0,
+            activeFloor: '',
+            scrollLock: false,
+            componentsName: ''
+        };
+    },
+    computed: {
+        // 处理options为空的情况
+        menuList() {
+            let flag = Array.isArray(this.menuData || []);
+            let data = this.menuData || []
+            if (!flag) {
+                data = Object.values(this.menuData)
+                return data
+            }
+            return this.menuData;
+        },
+        renderKeyNew() {
+            return Object.assign({
+                menuTitle: 'name',//渲染标题
+                subtitle: 'name',//二级标题
+                selected: 'is_select',//大标题：是否展示绿色状态
+                SubSelected: 'is_select',//二级标题：是否展示绿色状态
+                domName: 'type',//未来获取dom绑定依据
+                domAppend: 'section_' //dom 前缀
+                // 后续获取dom =》 domAppend + domName 在元素上绑定的 id名称
+            }, this.renderKey);
+        }
+    },
+    components: {
+        GuipToolTip
+    },
+    watch: {
+        menuList(newVal) {
+            let subtitle = this.renderKeyNew.subtitle;
+            this.activeFloor = newVal[this.curIndex]?.list?.[0][subtitle];
+            this.componentsName = newVal[this.curIndex]?.list?.[0]?.componentsName || '';
+        }
+    },
+    mounted() {
+        this.$nextTick(() => {
+            // 更可靠的获取滚动容器方式
+            this.scrollContainer = document.querySelector('.main-content') ||
+                document.getElementById('main-content') ||
+                window;
+
+            if (this.scrollContainer) {
+                this.scrollContainer.addEventListener('scroll', this.handleScroll);
+                this.calculateFloorOffsets();
+            } else {
+                console.error('未找到滚动容器');
+            }
+        });
+    },
+    beforeDestroy() {
+        if (this.scrollContainer) {
+            this.scrollContainer.removeEventListener('scroll', this.handleScroll);
+        }
+    },
+    methods: {
+        handleChange(val) {
+            console.log("面板状态变化:", val);
+        },
+        handleTitleClick() {
+            console.log("标题点击");
+        },
+        random() {
+            var randomNumber = Math.random();
+            return randomNumber
+        },
+        calculateFloorOffsets() {
+            this.menuList.forEach(item => {
+                item.list?.forEach(every => {
+                    const el = document.getElementById(every.desc);
+                    if (el) {
+                        // 获取元素相对于视口顶部的距离
+                        every.offsetTop = el.getBoundingClientRect().top + window.pageYOffset;
+                    }
+                });
+            });
+        },
+
+        handleScroll() {
+            if (this.scrollLock || !this.menuList[this.curIndex]?.list) return;
+
+            const scrollPosition = this.getScrollPosition();
+            let activeFloor = null;
+            console.log(this.curIndex, scrollPosition, 'this.curIndex===');
+
+            // 从下往上查找当前可见区域对应的楼层
+            // for (let i = this.menuList[this.curIndex].list.length - 1; i >= 0; i--) {
+            //   const item = this.menuList[this.curIndex].list[i];
+            //   if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+            //     activeFloor = item.desc;
+            //     break;
+            //   }
+            // }
+            // 从上往下
+            for (let i = 0; i < this.menuList[this.curIndex].list.length; i++) {
+                const item = this.menuList[this.curIndex].list[i];
+                if (scrollPosition + 100 >= (item.offsetTop || 0)) { // 100是提前量
+                    activeFloor = item.desc;
+                    break;
+                }
+            }
+
+            if (activeFloor && this.activeFloor !== activeFloor) {
+                this.activeFloor = activeFloor;
+            }
+        },
+
+        getScrollPosition() {
+            if (this.scrollContainer === window) {
+                return window.pageYOffset || document.documentElement.scrollTop;
+            }
+            return this.scrollContainer.scrollTop;
+        },
+        // setActiveCur(dom, item) {
+        //   if (this.$route.path != item.path) {
+        //     this.$router.push(item.path)
+        //     store.commit('SET_PAGETITLE', item.name);
+        //   }
+        //   setTimeout(() => {
+        //     this.activeFloor = dom;
+        //     this.setHighActive(dom)
+        //   }, 500)
+        // },
+
+        // setHighActive(dom) {
+        //   this.scrollLock = true;
+        //   const ele = document.getElementById(dom)
+        //   if (!ele) return
+        //   ele.classList.add('ceshi')
+        //   ele.scrollIntoView({ behavior: 'smooth', block: 'start' })
+        //   setTimeout(() => {
+        //     ele.classList.remove('ceshi')
+        //   }, 1000)
+        // }
+        setActiveCur(item1, item, index) {
+            this.curIndex = index;
+            let subtitle = this.renderKeyNew.subtitle;
+            let domName = this.renderKeyNew.domName;
+            let componentsName = item1?.componentsName;
+            // 如果采用的是 组件切换显示的办法
+            if (componentsName) {
+                this.activeFloor = componentsName;
+                // 同步 当前切换的组件名称
+                store.commit('SET_COMPONENTS_NAME', componentsName);
+                return
+            }
+            this.scrollLock = true;
+            this.activeFloor = item1[subtitle];
+            this.$nextTick(() => {
+                this.setHighActive(item1[domName]);
+                setTimeout(() => {
+                    this.scrollLock = false;
+                }, 1000);
+            });
+        },
+
+        setHighActive(dom) {
+            const ele = document.getElementById(this.renderKeyNew.domAppend + dom);
+            if (ele) {
+                ele.scrollIntoView({
+                    behavior: 'smooth',
+                    block: 'start'
+                });
+            }
+        }
+    }
+};
+</script>
+
+<style scoped lang="scss">
+/* 自定义折叠图标 */
+::v-deep .el-collapse-item__header .el-collapse-item__arrow {
+    display: none !important;
+}
+
+::v-deep .el-collapse-item__header {
+    max-width: 120px;
+}
+
+.arrow_img {
+    width: 14px;
+    height: 14px;
+}
+
+.arrow_img.is-active {
+    transform: rotate(90deg);
+}
+
+.collapse-item {
+    width: 100%;
+}
+
+.menu-name {
+    font-size: 14px;
+    font-weight: normal;
+    letter-spacing: 0.08em;
+    color: #1E2226;
+    padding: 11px 0;
+    height: 40px;
+    line-height: 18px;
+    max-width: 80px;
+    box-sizing: border-box;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+
+.l-menu-name {
+    max-width: 90px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    color: #8A9099;
+    padding: 9px 0;
+    height: 36px;
+    box-sizing: border-box;
+}
+
+.curActive {
+    .l-menu-name {
+        color: #006AFF;
+        font-weight: bold;
+    }
+}
+
+.menu-select {
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    background: #00C261;
+}
+
+.el-collapse {
+    min-width: 158px;
+    max-width: 158px;
+    background-color: #fff;
+    height: 100%;
+    overflow-y: auto;
+    padding: 21px 22px 21px 16px;
+    box-sizing: border-box;
+    box-shadow: 0px 0px 11px 2px rgba(147, 147, 147, 0.11);
+}
+
+.selected {
+    width: 20px;
+    height: 14px;
+}
+
+::v-deep .el-collapse-item__header {
+    height: 40px;
+    border-bottom: none;
+}
+
+::v-deep .el-collapse-item__content {
+    padding-bottom: 0;
+}
+
+::v-deep .el-collapse-item__wrap {
+    border-bottom: none;
+}
+</style>

src/router/index.js

@@ -2,13 +2,14 @@ import Vue from 'vue';
 import VueRouter from 'vue-router';
 import store from '../store';
 import HomeView from '../views/HomeView.vue';
-// import UserPosts from '../views/UserPosts.vue';
-// import Franchise from '../views/Franchise.vue'
 
 Vue.use(VueRouter)
-// 侧边导航黑名单
+// 第三种侧边栏展示白名单
+const whiteSecondSider = [
+  '/agent/siteServiceAdd'
+];
 const blackSliderList = [
-  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate'
+  '/register', '/agent/siteAdd', '/franchise','/agent/siteServiceList', '/agent/siteTemplate','/agent/siteServiceAdd'
 ];
 // 一级路由
 let first_child_router = []
@@ -518,9 +519,19 @@ const router = new VueRouter({
 })
 router.beforeEach((to, from, next) => {
   // 有关路由跳转时，部分状态重置
-  store.commit('SET_COMPONENTS_NAME', '');
+  store.commit('SET_SECOND_MENU', []);
-   
+  if(store.state.componentsName){
+    store.commit('SET_COMPONENTS_NAME', '');
+  }
+  // 第三种可折叠版本 侧边栏
+   if(whiteSecondSider.includes(to.path)){
+    store.commit('SET_SHOWSECONDSIDE', true); // 白名单内页面显示侧边栏
+  }else{
+     store.commit('SET_SHOWSECONDSIDE', false); // 不显示侧边栏
+   }
+
 
+  //  首页侧边栏 + 内部 二级侧边栏
   if (blackSliderList.includes(to.path)) {
     store.commit('SET_SIDEBAR', false); // 黑名单内页面不显示侧边栏
   } else {

src/store/index.js

@@ -5,10 +5,12 @@ Vue.use(Vuex)
 
 export default new Vuex.Store({
   state: {
+    showSecondSide:false,
     showSidebar: false,
     showFooter: false,
     showHeader: false,
     menuList: [], //目录菜单
+    secondMenu:{},
     showBreadcrumb: false, //是否展示面包屑
     breadRightText: '', //是否展示面包屑
     pageTitle: '一般新文献', //页面标题
@@ -496,6 +498,11 @@ export default new Vuex.Store({
     }) {
       commit('SET_SIDEBAR');
     },
+    SET_SHOWSECONDSIDE({
+      commit
+    }) {
+      commit('SET_SHOWSECONDSIDE');
+    },
     SET_FOOTER({
       commit
     }) {
@@ -541,6 +548,11 @@ export default new Vuex.Store({
     }) {
       commit('SET_SLIDER_MENU')
     },
+    SET_SECOND_MENU({
+      commit
+    }) {
+      commit('SET_SECOND_MENU')
+    },
     SET_COMPONENTS_NAME({
       commit
     }) {
@@ -554,6 +566,9 @@ export default new Vuex.Store({
     SET_SLIDER_MENU(state,type){
       state.slidermenu = state[type]
     },
+    SET_SECOND_MENU(state,data){
+      state.secondMenu = JSON.parse(JSON.stringify(data))
+    },
     SET_CUSTOMIZE(state,show) {
       state.customize = show
     },
@@ -567,6 +582,9 @@ export default new Vuex.Store({
     SET_SIDEBAR(state, show) {
       state.showSidebar = show;
     },
+    SET_SHOWSECONDSIDE(state, show) {
+      state.showSecondSide = show;
+    },
     SET_FOOTER(state, show) {
       state.showFooter = show;
     },

src/views/agent/siteServiceAdd.vue

@@ -6,7 +6,7 @@
             <!-- page content -->
             <div class="flex-common" v-for="(ver_row) in serviceAddList" :key="ver_row.name">
                 <h3>{{ver_row.name}}</h3>
-                <div class="service-setting-area" :class="row.status == 1 ? 'service-setting-open' : ''" v-for="(row) in ver_row.list" :key="row.type">
+                <div class="service-setting-area" :class="row.status == 1 ? 'service-setting-open' : ''" v-for="(row) in ver_row.list" :key="row.type" :id="'section_'+row.type">
                     <el-form class="el-row demo-ruleForm" ref="formRef">
                         <div class="service-flex service-title">
                             <div class="service-title-left">
@@ -78,6 +78,83 @@ export default {
             uid:0,
             serviceAddList:[],
             methodOptions: [],
+            obj:{
+                '1': {
+              type: '1',
+              name: '万方数字哈哈哈哈',
+              is_select: true,
+              list: [
+                  {
+                      type: '29',
+                      name: '万方通用版44生生世世生生世世',
+                      is_select: true,
+                      //componentsName:'1-1'
+                  },
+                  {
+                      type: '30',
+                      name: '通用说播版44',
+                      is_select: false,
+                      //componentsName:'1-2'
+                  },
+                  {
+                      type: '32',
+                      name: '本科通用版44',
+                      is_select: false,
+                      //componentsName:'1-3'
+                  },
+              ]
+          },
+          '3': {
+              type: '3',
+              name: '万方',
+              is_select: true,
+              list: [
+                  {
+                      type: '6',
+                      name: '万方通用版a salads asides33',
+                      is_select: true,
+                      //componentsName:'2-2'
+                  },
+                  {
+                      type: '27',
+                      name: '通用说播版33',
+                      is_select: true,
+                      //componentsName:'2-3'
+                  },
+                  {
+                      type: '109',
+                      name: '本科通用版33',
+                      is_select: true,
+                      //componentsName:'2-4'
+                  },
+              ]
+          },
+          '6': {
+              type: '6',
+              name: '万方',
+              is_select: true,
+              list: [
+                  {
+                      type: '10',
+                      name: '万方通用版11',
+                      is_select: false,
+                      //componentsName:'3-4'
+                  },
+                  {
+                      type: '11',
+                      name: '通用说播版11',
+                      is_select: true,
+                      //componentsName:'3-5'
+                  },
+                  {
+                      type: '105',
+                      name: '本科通用版11',
+                      is_select: false,
+                      //componentsName:'3-4'
+                  },
+              ]
+          },
+            }
         }
     },
     computed: {
@@ -90,8 +167,8 @@ export default {
         }
         this.uid = this.$route.query.uid;
 
-        store.commit('SET_CUSTOMIZE', true);
+        // store.commit('SET_CUSTOMIZE', true);
-        store.commit('SET_SLIDER_MENU', 'siteSettingData');
+        // store.commit('SET_SLIDER_MENU', 'siteSettingData');
     },
     mounted() {
         store.commit('SET_PAGETITLE', '站点信息');
@@ -114,6 +191,8 @@ export default {
                 this.$nextTick(() => {
                     that.serviceAddList = response.data.service_add_list
                     store.commit('SET_BREADRIGHTTEXT', response.data.site_short_name);
+                    // 假装有数据啦
+                    store.commit('SET_SECOND_MENU', this.obj);
                     that.methodOptions = Object.entries(response.data.freedom_set_method).map(([key, value]) => ({
                         label: value,
                         value: Number(key)

src/views/elementGroups.vue

@@ -75,11 +75,16 @@
                         value-key="id" />
                 </div>
                 <div class="ele-item">
-                    <label for="">下拉框：</label>
+                    <label for="">普通数组类型下拉框：</label>
                     <!-- :extraItem="{label:'全部',value:'99999'}" 传入必须是 label、value； 组件内会自动改为自定义的 labelKey、valueKey-->
-                    <GuipSelect width="600px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
+                    <GuipSelect width="150px" v-model="form.card" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
                         prop="card" :options="options" valueKey="id1" labelKey="id2" :extraItem="{label:'全部',value:'99999'}"/>
                 </div>
+                <div class="ele-item">
+                    <label for="">对象格式下拉框：</label>
+                    <GuipSelect width="150px" v-model="form.card1" clearable label="卡片" :default-value="form.card" @change="selectChangeTest"
+                        prop="card" :options="languageOptions"/>
+                </div>
                 <div>
                     <h3 for="">表格：(表头自定义、自定义渲染、固定列)</h3>
                     <GuipButton type="primary" @click="toggleAllSelection">全选按钮</GuipButton>
@@ -677,6 +682,7 @@ export default {
                 domainSuffix: '11',
                 domainSuffix1: '.chachongz.com',
                 card: '1',
+                card1: '20',
                 input1: '跨年的烟火,绽放天空',
                 input2: '',
                 input3: '',
@@ -901,7 +907,7 @@ export default {
                 value: '选项1',
                 label1: '黄金hhhhhh',
                 id1: '1',
-                id2: '啊11哈哈',
+                id2: '1是打开快递吧',
                 label: '黄金糕'
             }, {
                 value: '选项2',