udxcms 1.0.1

package/dist/components/basicComponents/ListTag.vue

@@ -0,0 +1,169 @@
+<!--
+ * @Author: Lewis
+ * @Date: 2020-11-14 20:07:10
+ * @LastEditTime: 2020-11-20 18:10:06
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+
+<template>
+  <div :class="['index-list', ListStyle]">
+    <div class="index-list-wrap" ref="indexWrap" @scroll="onListWrapScroll">
+      <slot></slot>
+    </div>
+    <div class="index-nav" v-show='isShowTag'>
+      <div :class="['index-tags', itemTagStyle]">
+        <div v-for="(tag, tagIndex) in tagList" :key="tagIndex" :class="['tag-item', {'active': currentIndex === tagIndex}]" @click='tagClick(tagIndex, $event)'>
+          {{ tag }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script type="text/javascript">
+const INDICATOR_INDURATION = 1000
+const TITLE_HEIGHT = 30
+export default {
+  name: 'index-list',
+  props: {
+    List: {
+      type: Array,
+      default: function() {
+        return []
+      }
+    },
+    ListStyle: {
+      type: String,
+      default: ""
+    },
+    itemContentH: {
+      type: Number,
+      default: 30
+    },
+    itemTagH: {
+      type: Number,
+      default: 20
+    },
+    itemTagStyle: {
+      type: String,
+      default: ''
+    },
+    itemContentKey: {
+      type: String,
+      default: 'code_list'
+    },
+    isShowTag: {
+      type: Boolean,
+      default: true
+    },
+    itemTagFunc: {
+      type: String,
+      default: ''
+    }
+  },
+  data() {
+    return {
+      currentIndex: 0,
+      moving: false,
+      currentIndicator: '',
+      listHeight: [],
+      tagList: []
+    }
+  },
+  watch: {
+    List() {
+      this.init('watch')
+    }
+  },
+  created() {
+    this.listHeight = []
+    this.tagList = []
+    this.timer = null
+    this.scrollTimer = null
+  },
+  mounted() {
+    this.init('mounted')
+  },
+  methods: {
+    init(type) {
+      let height = 0
+      this.listHeight = [0]
+      this.tagList = []
+      this.List.map(v => {
+        v[this.itemContentKey].map(_v => {
+          height += this.itemContentH
+        })
+        this.tagList.push(v.letter)
+        if (v[this.itemContentKey].length) {
+          this.listHeight.push(height)
+        }
+      })
+    },
+    tagClick(index, e) {
+      this.currentIndex = index
+      this.$refs.indexWrap.scrollTop = this.listHeight[index]
+      e.returnValue = false
+      if (this.itemTagFunc) {
+        this.$emit(this.itemTagFunc, this.tagList[index])
+      }
+    },
+    clickItem(item) {
+      this.$emit('choose', item)
+    },
+    onListWrapScroll(e) {
+      clearTimeout(this.scrollTimer)
+      this.scrollTimer = setTimeout(() => {
+        let scrollTop = this.$refs.indexWrap.scrollTop
+        const listHeight = this.listHeight
+        for (let i = 0; i < listHeight.length - 1; i++) {
+          if ( scrollTop <= listHeight[i + 1] && scrollTop >= listHeight[i]) { 
+            this.currentIndex = i
+          }
+        }
+      }, 20)
+    }
+  },
+  destroyed() {
+    clearTimeout(this.timer)
+    clearTimeout(this.scrollTimer)
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.index-list {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .index-list-wrap {
+    height: 100%;
+    overflow: auto;
+	  -webkit-overflow-scrolling: touch;
+  }
+  .index-nav {
+    position: absolute;
+    right: 20px;
+    top: 50%;
+    z-index: 100;
+    width: 20px;
+    padding: 20px 0;
+    text-align: center;
+    border-radius: 10;
+    transform: translateY(-50%);
+    .tag-item {
+      box-sizing: border-box;
+      padding: 1px;
+      font-size: 10px;
+      color: #babec4;
+      list-style: none;
+      cursor: pointer;
+      &:hover{
+        color: #303133;
+      }
+      &.active {
+        color: rgb(1, 101, 252);
+      }
+    }
+  }
+}
+</style>

package/dist/components/basicComponents/MenuTag.vue

@@ -0,0 +1,64 @@
+<template>
+    <div class='menu-tag' :style="{background: bg, top: top}">
+        {{content}}
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'menu-tag',
+    props: {
+        content: {
+            type: String,
+            default: ''
+        },
+        position: {
+            type: String,
+            default: 'top' // top, center, bottom
+        },
+        top: {
+            type: String,
+            default: '0px'
+        },
+        bg: {
+            type: String,
+            default: 'var(--menu-tag-color)'
+        }
+    },
+    data() {
+        return {
+            topArr: {
+                top: '0',
+                center: '50%',
+                bottom: '100%'
+            }
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+.menu-tag {
+    position: relative;
+    padding: 4px 6px;
+    border-radius: 4px;
+    font-size: 12px;
+    line-height: 1;
+    color: white;
+    font-family: Font;
+    width: fit-content;
+    height: fit-content;
+    margin-left: 0.6em;
+
+    &::after {
+        position: absolute;
+        content: '';
+        width: .4em;
+        height: .4em;
+        background: var(--menu-tag-arrow-color);
+        top: 50%;
+        left: 0;
+        transform: translateY(-50%) translateX(-50%) rotate(45deg);
+    }
+}
+</style>

package/dist/components/basicComponents/MessageTips.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2021-12-05 15:31:44
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-12-05 16:18:27
+-->
+<template>
+    <div class='message-tips' v-if='value'>
+        <div class='content'>
+            <span>{{content}}</span>
+            <span class='btn'>
+                <span class='cancel' @click="$emit('input', false)">Cancel</span>
+                <span class='sure' @click="$emit('sureCallback')">Go</span>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+    let closeFn
+    export default {
+        props: {
+            value: {
+                type: Boolean,
+                default: false
+            },
+            content: {
+                type: String,
+                default: ''
+            },
+            showButton: {
+                type: Boolean,
+                default: true
+            },
+            top: {
+                type: String,
+                default: '80px'
+            }
+        },
+        watch: {
+            value: function(val,oldValue) {
+                if (!val) {
+                    document.removeEventListener('click',closeFn)
+                }
+                closeFn = (e)=>{
+                    this.$emit('input', false)
+                }
+                setTimeout(() => {
+                    this.$nextTick(()=>{
+                        if(val) {
+                            document.addEventListener('click',closeFn)
+                        }else {
+                            document.removeEventListener('click',closeFn)
+                        }
+                    })
+                }, 1000)
+            }
+        },
+        data() {
+            return {
+
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .message-tips {
+        position: fixed;
+        z-index: 6000;
+        width: 100%;
+        text-align: center;
+        .content {
+            background: rgba(255, 255, 255, .8);
+            width: auto;
+            margin: 80px auto;
+            display: inline-flex;
+            justify-content: flex-start;
+            align-items: center;
+            height: 40px;
+            padding: 0 10px;
+            box-shadow: 0 2px 10px black;
+            border-radius: 6px;
+            color: var(--text-color);
+            .btn {
+                margin-left: 1em;
+                .cancel {
+                    opacity: .6;
+                    cursor: pointer;
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+                .sure {
+                    opacity: .9;
+                    cursor: pointer;
+                    margin-left: .5em;
+                    color: var(--primary-color);
+                    &:hover {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/dist/components/basicComponents/MsgTips.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class='msg-tips'>
+        <a-tooltip :color='color' :placement='placement'>
+            <template slot="title" >
+                <!-- {{content}} -->
+                <p class='msg-tip-p' v-html="content"  :style="{fontSize: tipSize + 'px'}"></p>
+            </template>
+            <img src='../../assets/img/tips.png' class='icon' v-show='showIcon'/>
+            <slot></slot>
+        </a-tooltip>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'msg-tip',
+        props: {
+            content: {
+                type: String,
+                default: ''
+            },
+            color: {
+                type: String,
+                default: ''
+            },
+            showIcon: {
+                type: Boolean,
+                default: true
+            },
+            tipSize: {
+                type: String,
+                default: '10'
+            },
+            placement: {
+                type: String,
+                default: 'top'
+            }
+        },
+        data() {
+            return {
+
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .msg-tips {
+        display: inline;
+        img {
+            margin-left: 0.2em;
+            width: 1em;
+            height: 1em;
+        }
+    }
+</style>
+<style lang="less">
+    .msg-tip-p {
+        // white-space: pre-line;
+        a {
+            color: white;
+            text-decoration: underline;
+            text-underline-position: from-font;
+        }
+    }
+</style>

package/dist/components/basicComponents/NoticeMess.vue

@@ -0,0 +1,95 @@
+<!--
+ * @Author:
+ * @Date: 2020-12-14 17:14:42
+ * @LastEditTime: 2021-08-31 20:47:12
+ * @LastEditors: Lewis
+ * @Description:
+-->
+<template>
+    <div class='notice-mess'>
+        <Swiper class="notice-box" ref="myNotice" :options="swiperOptions" :auto-update="true" v-if='textData.length'>
+            <swiper-slide class="notice-list" v-for='(item, index) in textData' :key='index'>
+               <div class='flex'>
+                   <img :src="require('../../assets/img/notice.svg')" />
+                   <span class='list-item'>{{item}}</span>
+               </div>
+            </swiper-slide>
+        </Swiper>
+    </div>
+</template>
+
+<script>
+    import { Swiper, SwiperSlide, directive } from 'vue-awesome-swiper'
+
+    export default {
+        name: 'NoticeMess',
+        components: {
+            Swiper,
+            SwiperSlide
+        },
+        directives: {
+            swiper: directive
+        },
+        props: {
+            data: {
+                type: Array,
+                default: function() {
+                    return []
+                }
+            }
+        },
+        watch: {
+            data() {
+                this.initTextData()
+            }
+        },
+        data() {
+            return {
+                swiperOptions: {
+                    direction : 'vertical',
+                    autoplay:true,
+                    loop: true
+                },
+                textData: []
+            }
+        },
+        methods: {
+            initTextData() {
+                this.textData = this.data
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .notice-box {
+        width: 350px;
+        height:36px;
+        margin: 0 auto;
+        background: #f4f4f4;
+        border-radius: 6px;
+        overflow: hidden;
+    }
+    .notice-list {
+        line-height: 36px;
+        font-size: 12px;
+        color: var(--text-color);
+        padding: 0 16px;
+        .flex {
+            align-items: center;
+            height: 100%;
+        }
+        img {
+            width: 20px;
+            height: 20px;
+            margin-right:18px;
+        }
+    }
+    .list-item {
+        height:28px;
+        line-height: 28px;
+        font-size: 12px;
+        color: #708599;
+        letter-spacing: .5px;
+    }
+</style>

package/dist/components/basicComponents/Pages.vue

@@ -0,0 +1,145 @@
+<template>
+    <div class="page" v-if="!singleFlag">
+        <div class="p-list">
+            <!-- <Page :total="total" :pageSize="pageSize" :current.sync="curPage" @on-change="pageChange"></Page> -->
+             <a-pagination v-model="curPage" :pageSize="pageSize" :total="total" @change="pageChange"/>
+        </div>
+    </div>
+</template>
+<script>
+// import { Page } from 'iview'
+import * as regulars from '../../config/const'
+export default {
+    name: "TablePages",
+    props: {
+        total:{
+            type: Number,
+            require: true
+        },
+        pageInitSize: {
+            type: Number,
+            default: 20
+        }
+    },
+    // components:{
+    //     Page
+    // },
+    computed: {
+        pageSize() {
+            let pageInitSize = this.pageInitSize || 20
+            return pageInitSize
+        },
+        singleFlag(){
+            // console.log(this.total/this.pageSize);
+            if (!this.total) {
+                return true;
+            }
+            if (parseInt(this.total/this.pageSize) == 0){
+                return true;
+            }
+            if (parseInt(this.total/this.pageSize) == 1 && (this.total%this.pageSize) == 0){
+                return true;
+            } else{
+                return false;
+            }
+        }
+    },
+    data() {
+        return {
+            curPage: 1,
+            toPage: null
+        }
+    },
+    created() {
+        // console.log(this);
+        // console.log(this.total);
+    },
+    methods: {
+        lodaData(){
+            // get the new table data
+        },
+        pageChange(val){
+            // console.log(parseInt(this.total/this.pageSize));
+            this.curPage = parseInt(val);
+            this.$emit('page-change',val)
+        },
+        checkRule(name,val){
+            let reg = regulars[name];
+            let result = reg.test(val);
+            // console.log('number',val);
+            if(!result) {
+                this.toPage = null;
+            }else {
+                if (parseInt(val) > parseInt(this.total/this.pageSize))return 0;
+                this.curPage = parseInt(val);
+                this.$emit('page-change',val)
+            }
+        },
+    },
+    watch:{
+    }
+}
+</script>
+<style lang="less" scoped>
+    .page{
+        width: 100%;
+        height: 40px;
+        display: flex;
+        align-items: center;
+        // justify-content: space-between;
+        .p-list{
+            // .px2percent(540,698,min-width);
+            margin: 0 auto;
+            height: 40px;
+        }
+        .p-turn{
+            width: 22.63%;
+            height: 100%;
+            display: flex;
+            align-items: center;
+            // justify-content: space-between;
+            .p-topage{
+                width: 76px;
+                height: 40px;
+                background: #ffffff;
+                border: 1px solid var(--border-color-base);
+                border-radius: 6px;
+                box-shadow: 0px 4px 12px 0px rgba(17,51,83,0.02);
+                padding: 9px 12px;
+                outline:none;
+                caret-color:var(--text-color);
+                font-size: 16px;
+                font-family: Font;
+                margin-right: 10px;
+            }
+            .p-topage:active {
+                background: #ffffff;
+                border: 1px solid var(--primary-color);
+            }
+            .p-topage:focus {
+                background: #ffffff;
+                border: 1px solid var(--primary-color);
+            }
+            input::-webkit-input-placeholder {
+                font-size: 16px;
+                font-family: Font;
+                text-align: left;
+                color: #c0c3cc;
+                line-height: 22px;
+                letter-spacing: 0px;
+            }
+            .p-txt{
+                width: 16px;
+                height: 24px;
+                font-size: 16px;
+                font-family: Font;
+                text-align: left;
+                color: #606366;
+                line-height: 24px;
+            }
+            .to{
+                margin-right: 10px;
+            }
+        }
+    }
+</style>

package/dist/components/basicComponents/ParentView.vue

@@ -0,0 +1,10 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2020-11-05 14:03:08
+ * @LastEditTime: 2020-11-05 14:03:29
+ * @LastEditors: Sneed
+ * @Description: 
+-->
+<template>
+    <router-view />
+</template>