项目总结cms

需求：会议室预定，实现如下图的table表格，显示对应时间段的预定情况

　　问题1: 当会议室名称较长时，如何实现表格中，div的高度自适应，占满整个td？

 

　　实现思路，在完成了数据渲染之后，使用js重新设置高度

　　　　　　　　

      this.$nextTick( _=>{
        var eles = this.$el.querySelectorAll('tbody .au-table-cell')

        eles.forEach( ele =>{
          ele.style.height = ele.parentElement.clientHeight+'px'
        })

      })

 

 

需求: 实现图片的拖拽排序，可能出现换行的情况

　　实现思路：

　　　　1: 拖拽过程中的动画：对于之前实现表格的拖拽排序，不需要考虑换行，所以可以判断拖拽的tr距离顶部的高度以及drag的tr元素距离顶部的高度之差，来设定拖拽过程中的动画，比如dragover的元素向上移动或者向下移动。可是图片会有换行，所以不能根据高度来判断。所以动画可以换一种思路实现。空白占位符

　　　　2: 在页面初始化时，给ul绑定拖拽事件，（支持事件委托），在li标签上实现。

　　　　　拖拽img时，冒泡到li标签上。

// 工具函数  
// 参数： 指定的node元素
// 返回： 该node元素在列表中所占的位置角标（该indx值用于处理数据的删除插入）

        getNodeIndex(node){
            return Array.apply(null, this.$refs.xinxiImgList.$el.children[0].querySelectorAll('li')).indexOf(node);
        },

　　　　　　　　　

        dragstart(event) {
            if (event.target.parentNode.nodeName.toLowerCase() != 'ul') {
              return;
            }
            event.dataTransfer.effectAllowed = 'move';  
            this.startIndex = this.getNodeIndex(event.target) // 获取起始位置的索引
            window.requestAnimationFrame(() => {
              event.target.style.display = 'none';
              event.target.parentNode.insertBefore(this.placeholder, event.target);
            });
        },
        dragend(event) {
            if (event.target.parentNode.nodeName.toLowerCase() != 'ul') {
                return;
            }
            this.endIndex = this.getNodeIndex(this.placeholder) // 获取结束位置的索引
            window.requestAnimationFrame(() => {
                event.target.style.display = '';
                this.placeholder.remove(); // 删除占位符
                // 修改数据
                this.pic.imgList.splice(this.endIndex, 0 , this.pic.imgList[this.startIndex])
                if (this.endIndex>this.startIndex) {
                    this.pic.imgList.splice(this.startIndex,1)
                } else {
                    this.pic.imgList.splice(this.startIndex+1,1)
                }
            })
        },
        dragover(event) {
            event.preventDefault();
            let $ele = event.target  
            let targetRect = $ele.getBoundingClientRect();
            let clientX = event.clientX;
            let middle = targetRect.width / 2 + targetRect.left;
            if($ele.nodeName.toLowerCase() == 'img'){
              $ele = $ele.parentNode
            } else if ($ele.nodeName.toLowerCase() != 'li' || $ele.classList.contains('placeholder')){
              return
            }
            if (clientX < middle) {
              $ele.parentNode.insertBefore(this.placeholder, $ele);
            } else {
              $ele.parentNode.insertBefore(this.placeholder, $ele.nextElementSibling);
            }
            return false;
        }        

 

// 在页面初始化的时候绑定事件

            this.$nextTick(() => {
                let ul = this.$refs.xinxiImgList.$el.children[0]
                // 创建placeholder
                var newNode = document.createElement("li");
                newNode.classList.add("placeholder")
                this.placeholder = newNode
                // 取消监听
                ul.removeEventListener('dragstart', this.dragstart, false)
                ul.removeEventListener("dragover", this.dragover, false)
                ul.removeEventListener("dragend", this.dragend, false);
                
                // 监听
                ul.addEventListener("dragstart", this.dragstart, false)
                ul.addEventListener("dragover", this.dragover, false)
                ul.addEventListener("dragend", this.dragend, false);           
            })

 

 

tip： 关于window.requestAnimationFrame()

　　The window.requestAnimationFrame() method tells the browser that you wish to perform an animation and requests that the browser call a specified function to update an animation before the next repaint. The method takes a callback as an argument to be invoked before the repaint.

window.requestAnimationFrame()方法告诉浏览器，你想要执行一个动画，并要求浏览器，在下一次重绘页面之前，执行一个特殊的函数去更新动画。这个方法有一个回调函数作为参数，他在下一次页面重绘之前执行。

 

3: 关于服务器时间和本地时间不同步的问题：

　　服务器和前端改成所在的时区必须相同，否则时间解析会有差异

             

4： 高德地图

自定义一个组件

export default {
    template: ` <div>
                    <div id='gaodeMap' style='height:400px'>{{ value }}</div>
                    <div class ='panel' style=' background-color: #ddf;color: #333;border: 1px solid silver;box-shadow: 3px 4px 3px 0px silver;position: absolute;top: 100px;right: 50%; border-radius: 5px;overflow: hidden;line-height: 20px;'>
                        <div id = 'message'></div>
                    </div>
                </div>
    `,
    props: {
        value: String,
        lnglatXY: Array,
    },
    model: {
    },
    data: () => ({
        map: '',
    }),
    watch: {
        lnglatXY:function(val, oldval){
            if(val[1] == oldval[1] && val[0] == oldval[0]) return 
            this.map.setCenter(val)
        }
    },
    mounted: function(){
        this.init()
    },
    methods: {
        init(){
            var map = new AMap.Map('gaodeMap', {
                mapStyle: 'amap://styles/normal', //样式URL
                resizeEnable: true,
                zoom: 10,
                center: this.lnglatXY,
                scrollWheel: false
            });
            var message = document.getElementById('message');
            //加载PositionPicker，loadUI的路径参数为模块名中 'ui/' 之后的部分
            AMapUI.loadUI(['misc/PositionPicker'], (PositionPicker) => {
                var positionPicker = new PositionPicker({
                    // mode:'dragMap',//'dragMap'、'dragMarker'，默认为'dragMap'
                    map:map
                });
                positionPicker.on('success', (positionResult) => {
                    message.innerHTML = ''
                    this.$emit('getPointZuobiao',positionResult.position)    
                });
                positionPicker.on('fail', function(positionResult) {
                    message.innerHTML = '无法获取地址'
                });
                positionPicker.start();
            });
            
            AMap.plugin(['AMap.ToolBar','AMap.Scale','AMap.OverView'],function(){
                map.addControl(new AMap.ToolBar());
                map.addControl(new AMap.Scale());
                map.addControl(new AMap.OverView({isOpen:true}));
            });
            this.map = map
        }
    }
}

参考： http://lbs.amap.com/fn/jsdemo_loader/?url=http%3A%2F%2Fwebapi.amap.com%2Fdemos%2Fgeocoder%2Fgeocoder-regeo.html

 

 

5:  遇到的问题： 在第一次初始化frame时，会获取到用户权限和用户信息，这些信息在 frame 部分显示。

　　用户退出系统并再次登陆时，由于并没有重新初始化frame，所以frame的SSPA_componentReady方法没有调用，因此不会重新调用权限和用户信息的方法，权限和信息还保留上次登陆用户的信息。

解决方案： 设置一个全局变量，例如 window.__reload ， 默认为false。 当用户进入系统后退出时，设置window.__reload = true， 若是直接打开登陆界面，那么不需要处理。

　　　　　　在登陆界面判断，如果window.__reload为true，那么刷新，反之不刷新

      if(window.__reload === true){
          location.reload()
          return
      }
//      if(localStorage.getItem('TOKEN')){
//        dataHelper.userVerify(localStorage.getItem('TOKEN'),{forbidToast: true}).then(res=>{
//          location.replace('#welcome')
//        }).catch(res=>{
//          localStorage.removeItem('TOKEN')
//        })
//      }

 

 6: 低版本的手机浏览器不支持es6的语法，所以字符串模版等写法不可用，

　　另外，对于transform属性的设置，应该写作ele.style.transform = 'scale(0.5)'  , 而不应该用ele.style= 'transform: scale(0.5)'

 7: nginx 配置

 8: 金额和数字 输入框控件（vue指令）

 

Vue.directive('numberOnly', { // au-input 只能输入数字
  bind: function (ele) {
    ele = ele.querySelector('input')
    this.handler = function () {
      ele.value = ele.value.replace(/\D+/, '')
      
    }
    ele.addEventListener('input', this.handler)
  }
})
Vue.directive('money', { // au-input 只能输入金额
  bind: function (ele) {
    ele = ele.querySelector('input')
    var exp =/[^0-9.]$/;
    
    this.handler = function () {      
      if(exp.test(ele.value)){ 
        // 输入不正确
        ele.style.borderColor = 'red'
        return false; 
      } else {
        ele.style.borderColor = '#DDD'
      }
    }
    this.format = function(){
      if(!exp.test(ele.value)&&!!ele.value){ 
        ele.value = parseFloat(ele.value).toFixed(2)        
      }        
    }
    ele.addEventListener('input', this.handler)
    ele.addEventListener('blur', this.format)
  }
})