yks-element 1.0.0 → 1.0.4

package/package.json

@@ -1,51 +1,101 @@
-{
-  "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.4",
+  "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/",
+    "theme": "gulp build --gulpfile build/gulpfile.js",
+    "dist": "webpack --config build/webpack.config.js && yarn theme"
+  },
+  "main": "lib/yks.js",
+  "style": "lib/theme-chalk/index.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",
+    "@vue/cli-plugin-babel": "4.4.6",
+    "@vue/cli-plugin-unit-jest": "4.4.6",
+    "@vue/cli-service": "4.4.6",
+    "@vue/component-compiler-utils": "^2.6.0",
+    "@vue/test-utils": "1.0.3",
+    "babel-eslint": "^10.1.0",
+    "babel-jest": "23.6.0",
+    "babel-loader": "^7.1.5",
+    "babel-plugin-component": "^1.1.1",
+    "babel-plugin-dynamic-import-node": "^2.3.3",
+    "babel-plugin-import": "^1.13.1",
+    "cache-loader": "^4.1.0",
+    "clean-webpack-plugin": "^4.0.0",
+    "core-js": "^3.6.5",
+    "css-loader": "^2.1.0",
+    "eslint": "^7.4.0",
+    "eslint-config-alloy": "^3.7.3",
+    "eslint-plugin-vue": "^6.2.2",
+    "file-loader": "^1.1.11",
+    "gulp": "^4.0.0",
+    "gulp-autoprefixer": "^6.0.0",
+    "gulp-cssmin": "^0.2.0",
+    "gulp-sass": "^4.0.2",
+    "mini-css-extract-plugin": "^2.6.1",
+    "node-sass": "^4.14.1",
+    "postcss-loader": "^7.0.1",
+    "prettier": "^2.0.5",
+    "progress-bar-webpack-plugin": "^2.1.0",
+    "qs": "^6.9.4",
+    "sass-loader": "^9.0.2",
+    "style-loader": "^0.23.1",
+    "uglifyjs-webpack-plugin": "^2.2.0",
+    "url-loader": "^1.0.1",
+    "vue": "^2.6.11",
+    "vue-eslint-parser": "^7.1.0",
+    "vue-loader": "^15.7.0",
+    "vue-template-compiler": "^2.6.11",
+    "vue-template-es2015-compiler": "^1.6.0",
+    "webpack": "4.44.2",
+    "webpack-cli": "^4.10.0",
+    "webpack-node-externals": "^3.0.0"
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not dead"
+  ],
+  "env": {
+    "node": true
+  },
+  "engines": {
+    "node": ">=8.9",
+    "npm": ">= 3.0.0"
+  },
+  "license": "MIT"
+}

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,89 @@
+<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>

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,136 @@
+<template>
+    <div class="yks-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>
+        <div v-else-if="fileType === '2'">
+            <yks-video :src="data.content"></yks-video>
+            <i
+                v-if="visibleDel"
+                class="el-icon-error media-delfile"
+                @click.stop="handleCloseFile"
+            ></i>
+        </div>
+        <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 'yks/icon/ks-xslx.png'
+import pdf from 'yks/icon/ks-pdf.png'
+import docx from 'yks/icon/ks-word.png'
+import pptx from 'yks/icon/ks-ppt.png'
+
+export default {
+    name: 'YksMultimedia',
+    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>
+

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,111 @@
+<template>
+    <div :class="{ hidden: hidden }" class="yks-pagination 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>
+
+

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,20 @@
+<template>
+    <el-scrollbar class="yks-scrollbar" :style="{ height }" wrap-class="default-scrollbar__wrap">
+        <div class="yks-contents">
+            <slot></slot>
+        </div>
+    </el-scrollbar>
+</template>
+
+<script>
+export default {
+    name: 'YksScrollbar',
+    props: {
+        height: {
+            type: String,
+            default: 'auto'
+        }
+    }
+}
+</script>
+

package/packages/Select/index.js

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