yks-element 1.0.0 → 1.0.315

package/package.json

@@ -1,51 +1,74 @@
-{
-  "name": "yks-element",
-  "version": "1.0.0",
-  "description": "yks公共库",
-  "private": false,
-  "author": "1098385361@qq.com",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "lint": "vue-cli-service lint",
-    "lib": "vue-cli-service build --target lib --name yks examples/main.ts"
-  },
-  "dependencies": {
-    "@tinymce/tinymce-vue": "^3.2.1",
-    "axios": "^0.19.2",
-    "core-js": "^3.6.5",
-    "element-ui": "^2.15.9",
-    "lodash": "^4.17.15",
-    "qs": "^6.9.4",
-    "tinymce": "^5.2.2",
-    "vue": "^2.6.11"
-  },
-  "devDependencies": {
-    "@types/tinymce": "^4.5.24",
-    "@typescript-eslint/eslint-plugin": "^2.30.0",
-    "@typescript-eslint/parser": "^2.30.0",
-    "@vue/cli-plugin-babel": "~4.5.15",
-    "@vue/cli-plugin-eslint": "^4.3.1",
-    "@vue/cli-plugin-typescript": "^4.3.1",
-    "@vue/cli-service": "~4.5.15",
-    "@vue/eslint-config-standard": "^5.1.2",
-    "@vue/eslint-config-typescript": "^5.0.2",
-    "babel-eslint": "^10.1.0",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.20.2",
-    "eslint-plugin-node": "^11.1.0",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-standard": "^4.0.1",
-    "eslint-plugin-vue": "^6.2.2",
-    "node-sass": "^6.0.1",
-    "sass-loader": "10.2.0",
-    "typescript": "^4.7.3",
-    "uglifyjs-webpack-plugin": "v2.2.0",
-    "vue-template-compiler": "^2.6.11"
-  },
-  "browserslist": [
-    "> 1%",
-    "last 2 versions",
-    "not dead"
-  ]
-}
+{
+  "name": "yks-element",
+  "version": "1.0.315",
+  "description": "yks公共库",
+  "private": false,
+  "keywords": ["yks-element", "element-ui", "tinymce", "vue"],
+  "repository": {
+    "type": "git",
+    "url": "http://10.5.1.5/it-ogt-client/it-ogt-npm.git"
+  },
+  "author": "1098385361@qq.com",
+  "scripts": {
+    "serve": "vue-cli-service serve --mode development",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "lib": "vue-cli-service build --target lib --name yks examples/main.js",
+    "lint-fix": "eslint --fix --ext .vue --ext --ext .js packages/"
+  },
+  "main": "packages/index.js",
+  "style": "lib/yks.css",
+  "files": [
+    "lib",
+    "dist",
+    "packages",
+    "types"
+  ],
+  "typings": "types/index.d.ts",
+  "dependencies": {
+    "@tinymce/tinymce-vue": "^3.2.1",
+    "element-ui": "^2.15.9",
+    "lodash": "^4.17.15",
+    "tinymce": "^5.2.2"
+  },
+  "peerDependencies": {
+    "vue": "^2.6.11"
+  },
+  "devDependencies": {
+    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
+    "core-js": "^3.6.5",
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-unit-jest": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "@vue/test-utils": "1.0.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "23.6.0",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-import": "^1.13.1",
+    "eslint": "^7.4.0",
+    "eslint-config-alloy": "^3.7.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "node-sass": "^4.14.1",
+    "prettier": "^2.0.5",
+    "qs": "^6.9.4",
+    "sass-loader": "^9.0.2",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "vue": "^2.6.11",
+    "vue-eslint-parser": "^7.1.0",
+    "vue-template-compiler": "^2.6.11"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "env": {
+    "node": true
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "license": "MIT"
+}

package/packages/Button/index.js

@@ -0,0 +1,8 @@
+import YksButton from './src/index';
+
+/* istanbul ignore next */
+YksButton.install = function(Vue) {
+  Vue.component(YksButton.name, YksButton);
+};
+
+export default YksButton;

package/packages/Button/src/index.vue

@@ -0,0 +1,67 @@
+<template>
+    <Button v-bind="$attrs" v-on="$listeners">
+        <slot></slot>
+    </Button>
+</template>
+
+<script>
+import { Button } from 'element-ui'
+
+export default {
+    name: 'YksButton',
+    components: {
+        Button
+    }
+}
+</script>
+
+<style lang="scss">
+.el-button {
+    padding: 8px 24px;
+}
+
+.el-button--primary.is-plain,
+.el-button--primary.is-plain.is-disabled {
+    background: #fff;
+}
+
+.el-button--primary.is-plain:hover,
+.el-button--primary.is-plain:focus {
+    background: #fff;
+    border-color: #3b7cec;
+    color: #3b7cec;
+}
+
+.el-button--primary.is-plain.is-disabled,
+.el-button--primary.is-plain.is-disabled:hover,
+.el-button--primary.is-plain.is-disabled:focus,
+.el-button--primary.is-plain.is-disabled:active {
+    background: #fff;
+    border-color: #d4e5ff;
+    color: #d4e5ff;
+}
+
+.el-button--primary:hover,
+.el-button--primary:focus {
+    background: #3b7cec;
+    border-color: #3b7cec;
+}
+
+.el-button--primary.is-disabled,
+.el-button--primary.is-disabled:hover,
+.el-button--primary.is-disabled:focus,
+.el-button--primary.is-disabled:active {
+    color: #ffffff;
+    background-color: #d4e5ff;
+    border-color: #d4e5ff;
+}
+
+.el-button--danger.is-disabled,
+.el-button--danger.is-disabled:hover,
+.el-button--danger.is-disabled:focus,
+.el-button--danger.is-disabled:active {
+    color: #ffffff;
+    background-color: #f9dbdd;
+    border-color: #f9dbdd;
+}
+</style>

package/packages/Dialog/index.js

@@ -0,0 +1,8 @@
+import YksDialog from './src/index';
+
+/* istanbul ignore next */
+YksDialog.install = function(Vue) {
+  Vue.component(YksDialog.name, YksDialog);
+};
+
+export default YksDialog;

package/packages/Dialog/src/index.vue

@@ -0,0 +1,103 @@
+<template>
+    <Dialog v-bind="dialogOptions" :visible.sync="visible" v-on="$listeners">
+        <slot slot="title" name="title"> </slot>
+        <yks-scrollbar :height="height">
+            <slot></slot>
+        </yks-scrollbar>
+        <template v-if="footer" #footer>
+            <slot name="footer">
+                <el-button type="primary" :disabled="loading" :loading="loading" @click="onSure">
+                    确 定
+                </el-button>
+                <el-button @click="onClose"> 取消 </el-button>
+            </slot>
+        </template>
+    </Dialog>
+</template>
+
+<script>
+import ElDialog from 'element-ui/lib/dialog'
+import { Dialog } from 'element-ui'
+/**
+ * Dialog 表格组件
+ * @module yks-dialog
+ */
+
+export default {
+    name: 'YksDialog',
+    components: {
+        Dialog
+    },
+    props: {
+        /**
+         * 扩展属性参数
+         * @property {Array} [height = 390] scrollbar的高
+         * @property {Object} [show = false] 是否显示 Dialog
+         */
+        ...ElDialog.props,
+        height: {
+            type: String,
+            default: '390px'
+        },
+        show: {
+            type: Boolean,
+            default: false
+        },
+        loading: {
+            type: Boolean,
+            default: false
+        },
+        disabledSure: {
+            type: Boolean,
+            default: false
+        },
+        footer: {
+            type: Boolean,
+            default: true
+        }
+    },
+    data() {
+        return {
+            visible: false
+        }
+    },
+    computed: {
+        dialogOptions() {
+            const options = { ...this.$props }
+            delete options.height
+            delete options.visible
+            delete options.loading
+            delete options.disabledSure
+            delete options.footer
+            return options
+        }
+    },
+    watch: {
+        show(val) {
+            this.visible = val
+        }
+    },
+    methods: {
+        onClose() {
+            this.$emit('close', false)
+        },
+        onSure() {
+            this.$emit('sure', true)
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.ks-scrollbar {
+    padding: 20px 0;
+    .ks-contents {
+        padding: 0 20px;
+    }
+}
+::v-deep {
+    .el-dialog__title {
+        font-weight: bold;
+    }
+}
+</style>

package/packages/Multimedia/index.js

@@ -0,0 +1,8 @@
+import YksMultimedia from './src/index';
+
+/* istanbul ignore next */
+YksMultimedia.install = function(Vue) {
+  Vue.component(YksMultimedia.name, YksMultimedia);
+};
+
+export default YksMultimedia;

package/packages/Multimedia/src/index.vue

@@ -0,0 +1,167 @@
+<template>
+    <div class="multimedia">
+        <div v-if="fileType === '1'" class="ks-stem__itemattrs" :title="fileName">
+            <div class="yks-tc file-stem">
+                <el-image
+                    class="ks-stem__icon"
+                    :src="iconUrl(data.content)"
+                    fit="cover"
+                    @click="handleClick"
+                ></el-image>
+                <i
+                    v-if="visibleDel"
+                    class="el-icon-error media-delfile"
+                    @click.stop="handleCloseFile"
+                ></i>
+            </div>
+        </div>
+        <yks-video v-else-if="fileType === '2'" :src="data.content"></yks-video>
+        <div v-else class="ks-stem__itemattrs" :title="fileName">
+            <div class="yks-tc file-stem">
+                <i class="el-icon-document-remove ks-stem__remove" @click="handleClick"></i>
+                <i
+                    v-if="visibleDel"
+                    class="el-icon-error media-delfile"
+                    @click.stop="handleCloseFile"
+                ></i>
+            </div>
+        </div>
+        <div class="ks-stem__content yks-text-ellipsis">
+            {{ fileName }}
+        </div>
+    </div>
+</template>
+<script>
+import xlsx from '../../icon/ks-xslx.png'
+import pdf from '../../icon/ks-pdf.png'
+import docx from '../../icon/ks-word.png'
+import pptx from '../../icon/ks-ppt.png'
+import YksVideo from '../../Video/index'
+
+export default {
+    name: 'YksMultimedia',
+    components: {
+        YksVideo
+    },
+    props: {
+        data: Object,
+        visibleDel: { type: Boolean, default: false }
+    },
+    computed: {
+        fileName() {
+            const url = this.data.content || ''
+            const name = url.substr(url.lastIndexOf('/') + 1).toLowerCase()
+            return this.revertUTF8(name)
+        },
+        /* 获取文件后缀 */
+        fileNameType() {
+            const url = this.data.content || ''
+            return url.substr(url.lastIndexOf('.') + 1).toLowerCase()
+        },
+        fileType() {
+            if (['xlsx', 'pdf', 'docx', 'pptx'].includes(this.fileNameType)) {
+                return '1'
+            }
+            if (['mp3', 'mp4'].includes(this.fileNameType)) {
+                return '2'
+            }
+            return false
+        }
+    },
+
+    methods: {
+        handleClick() {
+            window.open(this.data.content, '_blank')
+        },
+
+        handleCloseFile() {
+            this.$emit('delete', this.data)
+        },
+
+        revertUTF8(szInput) {
+            let x
+            let wch
+            let wch1
+            let wch2
+            let szRet = ''
+            for (x = 0; x < szInput.length; x++) {
+                // eslint-disable-next-line eqeqeq
+                if (szInput.charAt(x) == '%') {
+                    wch = parseInt(szInput.charAt(++x) + szInput.charAt(++x), 16)
+                    if (!wch) {
+                        break
+                    }
+                    if (!(wch & 0x80)) {
+                        // eslint-disable-next-line no-self-assign
+                        wch = wch
+                    } else if (!(wch & 0x20)) {
+                        x++
+                        wch1 = parseInt(szInput.charAt(++x) + szInput.charAt(++x), 16)
+                        wch = (wch & 0x1f) << 6
+                        wch1 = wch1 & 0x3f
+                        wch = wch + wch1
+                    } else {
+                        x++
+                        wch1 = parseInt(szInput.charAt(++x) + szInput.charAt(++x), 16)
+                        x++
+                        wch2 = parseInt(szInput.charAt(++x) + szInput.charAt(++x), 16)
+                        wch = (wch & 0x0f) << 12
+                        wch1 = (wch1 & 0x3f) << 6
+                        wch2 = wch2 & 0x3f
+                        wch = wch + wch1 + wch2
+                    }
+                    szRet += String.fromCharCode(wch)
+                } else {
+                    szRet += szInput.charAt(x)
+                }
+            }
+            return szRet
+        },
+
+        iconUrl() {
+            const params = {
+                xlsx: xlsx,
+                pdf: pdf,
+                docx: docx,
+                pptx: pptx
+            }
+            return params[this.fileNameType] || params.docx
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.multimedia {
+    position: relative;
+    margin-right: 10px;
+    width: 160px;
+
+    .file-stem {
+        position: relative;
+        width: 80px;
+        margin: 0 auto;
+    }
+
+    .ks-stem__itemattrs {
+        border-radius: 4px;
+        position: relative;
+        .ks-stem__remove{
+            font-size: 50px;
+            cursor: pointer;
+        }
+        .ks-stem__icon {
+            width: 77px;
+            height: 77px;
+            margin-bottom: 9px;
+            cursor: pointer;
+        }
+    }
+    .ks-stem__content {
+        width: 160px;
+        font-size: 12px;
+        text-align: center;
+        padding-top: 5px;
+        color: #000;
+    }
+}
+</style>

package/packages/Pagination/index.js

@@ -0,0 +1,8 @@
+import YksPagination from './src/index';
+
+/* istanbul ignore next */
+YksPagination.install = function(Vue) {
+  Vue.component(YksPagination.name, YksPagination);
+};
+
+export default YksPagination;

package/packages/Pagination/src/index.vue

@@ -0,0 +1,149 @@
+<template>
+    <div :class="{ hidden: hidden }" class="pagination-container yks-flex">
+        <div v-if="sizesValue" class="flex-1 yks-flex h-start ks-sizes">
+            每页显示
+            <yks-select
+                v-model="sizeValues"
+                :data="sizesPageSizes"
+                class="ks-select-sizes"
+                @change="changeSizeValues"
+            ></yks-select>
+        </div>
+        <el-pagination
+            :background="background"
+            :current-page.sync="pageOption.page"
+            :page-size.sync="pageOption.pageSize"
+            :layout="layoutValue"
+            :page-sizes="pageSizes"
+            :total="pageOption.total"
+            v-bind="$attrs"
+            @size-change="handleSizeChange"
+            @current-change="handleCurrentChange"
+        >
+        </el-pagination>
+    </div>
+</template>
+
+<script>
+export default {
+    name: 'YksPagination',
+    props: {
+        pageOption: {
+            required: true,
+            type: Object,
+            default: () => {
+                return {
+                    total: 0, // 总条数
+                    page: 1, // 当前页数
+                    pageSize: 10 // 页面大小
+                }
+            }
+        },
+        pageSizes: {
+            default: () => [10, 20, 50, 100]
+        },
+        layout: { default: 'sizes, total, prev, pager, next, jumper' },
+        background: { default: false },
+        autoScroll: { default: true },
+        hidden: { default: false }
+    },
+    data() {
+        return {
+            sizeValues: ''
+        }
+    },
+    computed: {
+        layoutValue() {
+            const value = this.layout.split(',')
+            const layout = value.filter((v) => v.trim() !== 'sizes').join(',')
+            return layout
+        },
+        sizesValue() {
+            const value = this.layout.split(',')
+            const sizes = value.some((v) => v.trim() === 'sizes')
+            return sizes
+        },
+        sizesPageSizes() {
+            return this.pageSizes.map((v) => {
+                return {
+                    value: v,
+                    label: v
+                }
+            })
+        }
+    },
+    created() {
+        this.sizeValues = this.pageOption.pageSize
+    },
+    methods: {
+        changeSizeValues(value) {
+            this.$emit(
+                'pagination',
+                Object.assign(this.pageOption, {
+                    pageSize: value,
+                    page: 1
+                })
+            )
+        },
+
+        handleSizeChange(value) {
+            this.$emit(
+                'pagination',
+                Object.assign(this.pageOption, {
+                    pageSize: value,
+                    page: 1
+                })
+            )
+        },
+
+        handleCurrentChange(value) {
+            this.$emit(
+                'pagination',
+                Object.assign(this.pageOption, {
+                    page: value
+                })
+            )
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.pagination-container {
+    text-align: center;
+    background: #fff;
+    padding: 20px 38px;
+    width: 100%;
+
+    .ks-sizes {
+        font-size: 14px;
+        color: #9ea0a5;
+        .ks-select-sizes {
+            margin-left: 8px;
+
+            ::v-deep {
+                .el-input__inner {
+                    border: unset;
+                    padding: 0 30px 0 0;
+                    width: 60px;
+                }
+            }
+        }
+    }
+
+    ::v-deep {
+        .active {
+            min-width: 30px !important;
+            min-height: 30px !important;
+            background: #096dd9;
+            border-radius: 50%;
+            padding: 0;
+            color: #fff;
+        }
+    }
+}
+
+.pagination-container.hidden {
+    display: none;
+}
+</style>

package/packages/Scrollbar/index.js

@@ -0,0 +1,8 @@
+import YksScrollbar from './src/index';
+
+/* istanbul ignore next */
+YksScrollbar.install = function(Vue) {
+  Vue.component(YksScrollbar.name, YksScrollbar);
+};
+
+export default YksScrollbar;

package/packages/Scrollbar/src/index.vue

@@ -0,0 +1,27 @@
+<template>
+    <el-scrollbar class="ks-scrollbar" :style="{ height }" wrap-class="default-scrollbar__wrap">
+        <div class="ks-contents">
+            <slot></slot>
+        </div>
+    </el-scrollbar>
+</template>
+
+<script>
+export default {
+    name: 'YksScrollbar',
+    props: {
+        height: {
+            type: String,
+            default: 'auto'
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.ks-scrollbar {
+    .ks-contents {
+        padding: 0 20px;
+    }
+}
+</style>