dpzvc-ui 1.0.0

package/src/components/picker/area-picker/area-picker.vue

@@ -0,0 +1,223 @@
+<template>
+
+
+    <div :class="classes">
+        <div class="header">
+            <div class="left" @click="cancle">取消</div>
+            <div class="title">请选择区域</div>
+            <div class="right" @click="sure">确定</div>
+        </div>
+
+        <div class="main">
+
+            <picker-slot :list="provinces" :init-item="province.code" :target="province.target"
+                         @change="change"></picker-slot>
+
+            <picker-slot :list="citys" :init-item="city.code" :target="city.target" @change="change"></picker-slot>
+
+            <picker-slot :list="districts" :init-item="district.code" :target="district.target"
+                         @change="change"></picker-slot>
+
+        </div>
+    </div>
+
+
+</template>
+
+<script>
+    import CHINA_AREA from 'china-area-data'
+    import pickerSlot from '../picker-slot'
+    import Emitter from '../../../mixin/emitter'
+    import props from './props'
+
+    const prefixCls = 'dpzvc-picker';
+    const rootCode = '86'
+    export default {
+        name: 'AreaPicker',
+        mixins: [Emitter, props],
+
+        data(){
+
+            return {
+                currentValue: this.addressValue,
+                province: {
+                    value: '北京市',
+                    code: '110000',
+                    target: 'province',
+                    index: 0
+                },
+
+                city: {
+                    value: '市辖区',
+                    code: '110100',
+                    target: 'city',
+                    index: 0
+                },
+
+                district: {
+                    value: '东城区',
+                    code: '110101',
+                    target: 'district',
+                    index: 0
+                },
+            }
+        },
+        mounted(){
+            this.initVal();
+        },
+
+        methods: {
+            initVal(){
+
+                if ((this.valueSeparator || this.valueSeparator != '') && this.currentValue && this.currentValue != '') {
+
+                    let [provinceName, cityName, districtName] = this.currentValue.split(this.valueSeparator)
+
+
+                    if (provinceName || cityName || districtName) {
+                        let provinces = CHINA_AREA[rootCode]
+                        if (!!provinces && provinces != undefined)
+                        Object.keys(provinces).forEach((item)=>{
+                            if (!isNaN(provinceName) && !!provinceName) {
+                                if (provinceName == item) {
+                                    this.province.value = provinces[item];
+                                    this.province.code = item;
+                                }
+                            } else {
+                                if (provinceName == provinces[item]) {
+                                    this.province.value = provinces[item];
+                                    this.province.code = item;
+                                }
+                            }
+                        })
+
+
+                        let citys = CHINA_AREA[this.province.code];
+                        if (!!citys && citys != undefined)
+                        Object.keys(citys).forEach((item)=>{
+                            if (!isNaN(cityName) && !!cityName) {
+                                if (cityName == item) {
+                                    this.city.value = citys[item];
+                                    this.city.code = item;
+                                }
+                            } else {
+                                if (cityName == citys[item]) {
+                                    this.city.value = citys[item];
+                                    this.city.code = item;
+                                }
+                            }
+                        })
+
+
+                        let districts = CHINA_AREA[this.city.code];
+                        if(!!districts && districts != undefined)
+                        Object.keys(districts).forEach((item)=>{
+                            if (!isNaN(districtName) && !!districtName) {
+                                if (districtName == item) {
+                                    this.district.value = districts[item];
+                                    this.district.code = item;
+                                }
+                            } else {
+                                if (districtName == citys[item]) {
+                                    this.district.value = districts[item];
+                                    this.district.code = item;
+                                }
+                            }
+                        })
+
+                    }
+                }
+
+            },
+            sure(){
+
+                this.dispatch('Picker', 'ok', {
+                    province: {code: this.province.code, name: this.province.value},
+                    city: {code: this.city.code, name: this.city.value},
+                    district: {code: this.district.code, name: this.district.value},
+                    formArea: [this.province.value, this.city.value, this.district.value].filter(x => !!x).join(this.valueSeparator)
+                })
+            },
+            cancle(){
+                this.dispatch('Picker', 'fail');
+            },
+            _filter(target, val = {}){
+                switch (target) {
+                    case 'province':
+                        let provinces = CHINA_AREA[rootCode];
+                        if (!provinces && provinces == undefined)  return [];
+
+                        return Object.keys(provinces).map((item, index) => {
+                            return {code:item,value:provinces[item],target:target,index:index}
+                        });
+                        break;
+                    case 'city':
+                    case 'district':
+                        let list = CHINA_AREA[val.code];
+                        if (!list && list == undefined && target)  {
+                            this[target] = {
+                                value: '',
+                                code: '',
+                                target: target,
+                                index:''
+                            };
+
+                            return []
+                        };
+
+
+                        return Object.keys(list).map((item, index) => {
+                            return {code:item,value:list[item],target:target,index:index}
+                        })
+                        break;
+                }
+            },
+            change(target, current){
+
+                this.$nextTick(() => {
+                    this[target] = Object.assign({}, this[target], current);
+
+                    this.dispatch('Picker', 'parentchange', {
+                        province: {code: this.province.code, name: this.province.value},
+                        city: {code: this.city.code, name: this.city.value},
+                        district: {code: this.district.code, name: this.district.value},
+                    })
+                })
+
+
+
+            },
+        },
+
+        watch: {
+            addressValue(val){
+                this.currentValue = val
+                this.initVal()
+
+            },
+
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`,
+                ]
+            },
+            provinces(){
+
+                return this._filter('province')
+            },
+            citys(){
+                return this._filter('city', this.province)
+            },
+            districts(){
+
+                return this._filter('district', this.city)
+            }
+        },
+        components: {
+            pickerSlot
+        },
+
+    }
+</script>

package/src/components/picker/area-picker/props.js

@@ -0,0 +1,17 @@
+/**
+ * Created by admin on 2017/6/13.
+ */
+export default {
+    props: {
+        addressValue:String,
+        styles: {
+            type: Object,
+            default: () => {
+            }
+        },
+        valueSeparator:{
+            type:String,
+            default:'/'
+        }
+    },
+}

package/src/components/picker/date-picker/date-picker.vue

@@ -0,0 +1,291 @@
+<template>
+    <div :class="classes">
+        <div class="header">
+            <div class="left" @click="cancle">取消</div>
+            <div class="right" @click="sure">确定</div>
+        </div>
+        <div class="main">
+            <picker-slot v-if="year" :list="yearList" :init-item="date.year.code" target="year" @change="change"></picker-slot>
+            <picker-slot v-if="month" :list="monthList" :init-item="date.month.code" target="month" @change="change"></picker-slot>
+            <picker-slot v-if="day" :list="dayList" :init-item="date.day.code" target="day" @change="change"></picker-slot>
+        </div>
+    </div>
+
+</template>
+
+
+<script>
+
+    import PickerSlot from '../picker-slot.vue'
+    import Emitter from '../../../mixin/emitter'
+    import props from './props'
+    const DAYS = {
+        30: [4, 6, 9, 11],
+        31: [1, 3, 5, 7, 8, 10, 12]
+    };
+    const prefixCls = 'dpzvc-date-picker';
+    export default {
+        name: 'DatePicker',
+        mixins: [Emitter,props],
+
+        data(){
+            return {
+                currentValue:this.dateValue,
+//                currentYear: this.year ? this.initYear : '',
+//                currentMonth: this.month ? this.initMonth : '',
+//                currentDay: this.day ? this.initDay : '',
+                date:{
+                    year:{
+                        code:new Date().getFullYear(),
+                        value:String(new Date().getFullYear()),
+                        target:'year',
+                        index:0
+                    },
+                    month:{
+                        code:new Date().getMonth() + 1,
+                        value:String(new Date().getMonth() + 1),
+                        target:'month',
+                        index:0
+                    },
+                    day:{
+                        code:new Date().getDate(),
+                        value:String(new Date().getDate()),
+                        target:'day',
+                        index:0
+                    },
+                    formatDate:''
+                }
+
+            }
+        },
+        components: {
+            PickerSlot
+        },
+        methods: {
+            initVal(){
+
+                if ((this.valueSeparator || this.valueSeparator != '') && this.currentValue && this.currentValue != '') {
+                    let [year = '',month = '',day = ''] = this.currentValue.split(this.valueSeparator)
+
+
+                    this.date.year = Object.assign({},this.date.year,{code:Number(year),value:year})
+
+
+
+                    this.date.month = Object.assign({},this.date.month,{code:Number(month),value:month})
+
+
+
+                    this.date.day = Object.assign({},this.date.day,{code:Number(day),value:day})
+
+
+                    if (!this.year) this.date.year = {}
+                    if (!this.month) this.date.month = {}
+                    if (!this.day) this.date.day = {}
+                }
+            },
+            cancle(){
+                this.dispatch('Picker', 'fail');
+            },
+            sure(){
+                console.log(this.date)
+                this.dispatch('Picker', 'ok',this.date)
+            },
+            change(target,current) {
+                this.$nextTick(()=>{
+                switch (target) {
+
+                    case 'year':
+                        let lastYear = this.yearList.length - 1;
+                        if (current.index > this.yearList.length - 1) {
+                            this.date.year = Object.assign(this.date.year,this.yearList[lastYear]);
+                        } else {
+                            this.date.year = Object.assign(this.date.year,current);
+                        }
+                        console.log(this.date.year)
+//                        !!this.monthList ? this.currentMonth = this.monthList[0].code : '';
+//                        !!this.dayList ? this.currentDay = this.dayList[0].code : '';
+
+
+                        break;
+
+                    case 'month':
+                        let lastMonth = this.monthList.length -1;
+
+                        if (current.index > this.monthList.length -1 ) {
+                            this.date.month = Object.assign(this.date.month,this.monthList[lastMonth]);
+
+                        } else {
+                            this.date.month = Object.assign(this.date.month,current);
+
+                        }
+
+
+//                        !!this.dayList ? this.currentDay = this.dayList[0].code : '';
+
+                        break;
+
+                    case 'day':
+                        let lastDay = this.dayList.length - 1;
+
+                        if (current.index > this.dayList.length - 1) {
+                            this.date.day = Object.assign(this.date.day,this.dayList[lastDay]);
+                        } else {
+                            this.date.day = Object.assign(this.date.day,current);
+
+                        }
+
+
+                        break;
+                }
+
+
+                    console.log(this.date.year.value)
+                    this.date.formatDate = [this.date.year.value,this.date.month.value,this.date.day.value].filter(x => !!x).join(this.valueSeparator)
+
+                })
+
+
+
+            }
+        },
+        mounted(){
+            this.initVal();
+        },
+        computed: {
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            yearList(){
+                let from, to = 0;
+                if (!!this.year) {
+                    from = 1900;
+                    to = new Date().getFullYear();
+                    if (Array.isArray(this.year)) {
+
+                        if (this.year[0] !== undefined) from = this.year[0] <= this.year[1] ? this.year[0] : from;
+                        if (this.year[1] !== undefined) to = this.year[0] <= this.year[1] ? this.year[1] : to;
+
+                    }
+
+                    let yearArr = [];
+                    let index = 0;
+                    for (let i = from; i <= to; i++) {
+                        let y = String(i);
+                        yearArr.push({
+                            code:i,
+                            value:y,
+                            index:index,
+                            target:'year'
+                        })
+
+                        index++;
+                    }
+
+                    return yearArr
+
+
+                }
+
+                return false;
+
+            },
+            monthList(){
+                let from,to = 0;
+                if (!!this.month) {
+                    from = 1;
+                    to = 12;
+                    if (Array.isArray(this.month)) {
+
+                        if (this.month[0] !== undefined) from = this.month[0] >= 1 && this.month[0]<this.month[1] ? this.month[0] : 1;
+                        if (this.month[1] !== undefined) to = this.month[1] <= 12 && this.month[0]<this.month[1] ? this.month[1] : 12;
+                    }
+
+                    let monthArr = [];
+                    let index = 0;
+                    for (let i = from;i <= to;i++) {
+                        let m = String(i);
+                        monthArr.push({
+                            code:i,
+                            value:m,
+                            index:index,
+                            target:'month'
+                        })
+
+                        index++;
+                    }
+
+
+
+                    return monthArr
+                }
+
+                return false;
+            },
+            dayList(){
+                let from,to = 0;
+                if (!!this.day) {
+                    from = 1;
+                    to = 31;
+
+                    if (!!this.date.month.value) {
+                        let total;
+
+                        if ( !!~DAYS[30].indexOf(this.date.month.value) ) {
+                            total = 30;
+                        } else if ( !!~DAYS[31].indexOf(this.date.month.value) ) {
+                            total = 31;
+                        } else {
+                            let year = this.date.day.code;
+                            if ((year%4 === 0 ) && (year%100 != 0 || year%400 === 0)) {
+                                total = 29;
+                            } else {
+                                total = 28;
+                            }
+                        }
+
+                        to = total;
+                    }
+
+                    if (Array.isArray(this.day)) {
+
+                        if (this.day[0] !== undefined) from = this.day[0] >= 1 && this.day[0]<this.day[1] ? this.day[0] : 1;
+                        if (this.day[1] !== undefined) to = this.day[1] <= 31 && this.day[0]<this.day[1] ? this.day[1] : 31;
+
+                    }
+
+
+                    let dayArr = [];
+                    let index = 0;
+                    for (let i = from;i <= to;i++) {
+                        let d = String(i);
+                        dayArr.push({
+                            code:i,
+                            value:d,
+                            index:index,
+                            target:'day'
+                        })
+                        index++;
+                    }
+                    return dayArr
+
+                }
+
+                return false;
+            }
+        },
+        watch:{
+            dateValue(val){
+                this.currentValue = val;
+                this.initVal();
+            }
+        }
+
+    }
+</script>
+
+<style lang="less">
+
+</style>

package/src/components/picker/date-picker/props.js

@@ -0,0 +1,24 @@
+/**
+ * Created by admin on 2017/6/13.
+ */
+export default  {
+    props: {
+        dateValue:String,
+        year: {
+            type: [Boolean, Array],
+            default: true
+        },
+        month: {
+            type: [Boolean, Array],
+            default: true
+        },
+        day: {
+            type: [Boolean, Array],
+            default: true
+        },
+        valueSeparator:{
+            type:String,
+            default:'/'
+        }
+    },
+}

package/src/components/picker/index.js

@@ -0,0 +1,5 @@
+/**
+ * Created by admin on 2017/4/19.
+ */
+import Picker from './picker'
+export default Picker

package/src/components/picker/normal-picker/normal-picker.vue

@@ -0,0 +1,107 @@
+<template>
+    <div :class="classes">
+        <div class="header">
+            <div class="left" @click="cancle">取消</div>
+            <div class="right" @click="sure">确定</div>
+        </div>
+        <div class="main">
+            <template v-if="shadowList.length">
+                <picker-slot v-for="(item,key) in shadowList" :target="item.target" :init-item="initItems[key]" :key="item.target" :list="item.list" @change="change"></picker-slot>
+            </template>
+
+        </div>
+    </div>
+</template>
+
+<script>
+    import Emitter from '../../../mixin/emitter'
+    import PickerSlot from '../picker-slot.vue'
+    import props from './props'
+    const prefixCls = 'dpzvc-normal-picker'
+    export default {
+        name:'NormalPicker',
+        mixins:[Emitter,props],
+        data(){
+            return {
+                initItems:!!this.initArr.length ? this.initArr : this.list.map((item)=>{return item.list[0].code}),
+                normal:{}
+            }
+
+
+        },
+        methods:{
+            cancle(){
+                this.dispatch('Picker', 'fail');
+            },
+            sure(){
+                this.dispatch('Picker', 'ok',this.normal);
+            },
+            change(target,current){
+                this.$nextTick(()=>{
+                    for(let i = 0;i < this.shadowList.length;i++) {
+
+                        if(this.shadowList[i].target == target) {
+
+                            for (let j = 0;i<this.shadowList[i].length;j++) {
+
+                                if (current.code == this.shadowList[i].list[j].code) {
+                                    this.$set(this.initItems,i,this.shadowList[i].list[j].code)
+                                    break;
+                                }
+                            }
+                        }
+                    }
+                    this.normal = Object.assign({},this.normal,{[target]:current})
+
+
+                    this.dispatch('Picker','scroll',current)
+                })
+
+            }
+        },
+        computed:{
+            classes(){
+                return [
+                    `${prefixCls}`
+                ]
+            },
+            shadowList(){
+                let list = this.list;
+                for (let i = 0,listLength = list.length;i < listLength ;i++) {
+
+                    if (list[i].hasOwnProperty('list') && list[i].list.length) {
+
+                        for (let j = 0,childLength = list[i].list.length;j < childLength;j++) {
+
+                            if (!list[i].list[j].hasOwnProperty('value')) return [];
+
+                            if(!list[i].list[j].hasOwnProperty('code')) {
+                                list[i].list[j].code = list[i].list[j].value
+                            }
+
+
+
+                            if(!list[i].list[j].hasOwnProperty('target')) {
+                                list[i].list[j].target = list[i].target
+                            }
+
+                            list[i].list[j].index = j
+
+                        }
+                    }
+                }
+
+                return list
+            }
+        },
+
+        components:{
+            PickerSlot
+        },
+        watch:{
+            initArr(val){
+                this.initItems = !!this.initArr.length ? this.initArr : this.list.map((item)=>{return item.list[0].value})
+            },
+        }
+    }
+</script>

package/src/components/picker/normal-picker/props.js

@@ -0,0 +1,20 @@
+/**
+ * Created by admin on 2017/6/14.
+ */
+export default  {
+    props:{
+        list:{
+            type:Array,
+            default(){
+                return []
+            }
+        },
+        initArr:{
+            type:Array,
+            default(){
+                return []
+            }
+        }
+
+    }
+}