XiaoMo/x-php-Admin
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

no message

Browse Source
This commit is contained in:
小陌 2023-07-29 23:25:30 +08:00
parent 4a77da9283
commit 6c9c3d2c79
26 changed files with 307 additions and 322 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
src/components/scFileExport/index.vue
View File

@ -1,10 +1,5 @@
<!-- <!--
* @Descripttion: 文件导出 * @Descripttion: 文件导出
* @version: 1.1
* @Author: sakuya
* @Date: 2022年5月24日16:20:12
* @LastEditors: sakuya
* @LastEditTime: 2022年6月13日17:32:05
--> -->
<template> <template>

5
src/components/scFileImport/index.vue
View File

@ -1,10 +1,5 @@
<!-- <!--
* @Descripttion: 文件导入 * @Descripttion: 文件导入
* @version: 1.0
* @Author: sakuya
* @Date: 2022年5月24日11:30:03
* @LastEditors:
* @LastEditTime:
--> -->
<template> <template>

92
src/components/scPasswordStrength/index.vue
View File

@ -1,92 +0,0 @@
<!--
* @Descripttion: 密码强度检测
* @version: 1.0
* @Author: sakuya
* @Date: 2022年6月2日15:36:01
* @LastEditors:
* @LastEditTime:
-->
<template>
<div class="sc-password-strength">
<div class="sc-password-strength-bar" :class="`sc-password-strength-level-${level}`"></div>
</div>
</template>
<script>
export default {
props: {
modelValue: { type: String, default: "" },
},
data() {
return {
level: 0
}
},
watch: {
modelValue() {
this.strength(this.modelValue)
}
},
mounted() {
this.strength(this.modelValue)
},
methods: {
strength(v){
var _level = 0
//长度
var has_length = v.length >= 6
//包含数字
var has_number = /\d/.test(v)
//包含小写英文
var has_lovercase = /[a-z]/.test(v)
//包含大写英文
var has_uppercase = /[A-Z]/.test(v)
//没有连续的字符3位
var no_continuity = !/(\w)\1{2}/.test(v)
//包含特殊字符
var has_special = /[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(v)
if(v.length <= 0){
_level = 0
this.level = _level
return false
}
if(!has_length){
_level = 1
this.level = _level
return false
}
if(has_number){
_level += 1
}
if(has_lovercase){
_level += 1
}
if(has_uppercase){
_level += 1
}
if(no_continuity){
_level += 1
}
if(has_special){
_level += 1
}
this.level = _level
}
}
}
</script>
<style scoped>
.sc-password-strength {height: 5px;width: 100%;background: var(--el-color-info-light-5);border-radius: 5px;position: relative;margin:10px 0;}
.sc-password-strength:before {left: 20%;}
.sc-password-strength:after {right: 20%;}
.sc-password-strength:before, .sc-password-strength:after {position: absolute;content: "";display: block;width: 20%;height: inherit;border: 5px solid var(--el-bg-color-overlay);border-top: 0;border-bottom: 0;z-index: 1;background-color: transparent;box-sizing: border-box;}
.sc-password-strength-bar {position: absolute;height: inherit;width: 0%;border-radius: inherit;transition: width .5s ease-in-out,background .25s;background: transparent;}
.sc-password-strength-level-1 {width: 20%;background-color: var(--el-color-error);}
.sc-password-strength-level-2 {width: 40%;background-color: var(--el-color-error);}
.sc-password-strength-level-3 {width: 60%;background-color: var(--el-color-warning);}
.sc-password-strength-level-4 {width: 80%;background-color: var(--el-color-success);}
.sc-password-strength-level-5 {width: 100%;background-color: var(--el-color-success);}
</style>

6
src/components/scCodeEditor/index.vue → src/components/xCodeEditor/index.vue
View File

@ -3,7 +3,7 @@
--> -->
<template> <template>
<div class="sc-code-editor" :style="{'height':_height}"> <div class="x-code-editor" :style="{'height':_height}">
<textarea ref="textarea" v-model="contentValue"></textarea> <textarea ref="textarea" v-model="contentValue"></textarea>
</div> </div>
</template> </template>
@ -105,6 +105,6 @@
</script> </script>
<style scoped> <style scoped>
.sc-code-editor {font-size: 14px;border: 1px solid #ddd;line-height: 150%;} .x-code-editor {font-size: 14px;border: 1px solid #ddd;line-height: 150%;}
.sc-code-editor:deep(.CodeMirror) {height: 100%;} .x-code-editor:deep(.CodeMirror) {height: 100%;}
</style> </style>

24
src/components/scContextmenu/index.vue → src/components/xContextmenu/index.vue
View File

@ -1,11 +1,11 @@
<!-- <!--
* @Descripttion: scContextmenu组件 * @Descripttion: Contextmenu组件
--> -->
<template> <template>
<transition name="el-zoom-in-top"> <transition name="el-zoom-in-top">
<div v-if="visible" ref="contextmenu" class="sc-contextmenu" :style="{left:left+'px',top:top+'px'}" @contextmenu.prevent="fun"> <div v-if="visible" ref="contextmenu" class="x-contextmenu" :style="{left:left+'px',top:top+'px'}" @contextmenu.prevent="fun">
<ul class="sc-contextmenu__menu"> <ul class="x-contextmenu__menu">
<slot></slot> <slot></slot>
</ul> </ul>
</div> </div>
@ -82,13 +82,13 @@
</script> </script>
<style> <style>
.sc-contextmenu {position: fixed;z-index: 3000;font-size: 12px;} .x-contextmenu {position: fixed;z-index: 3000;font-size: 12px;}
.sc-contextmenu__menu {display: inline-block;min-width: 120px;border: 1px solid #e4e7ed;background: #fff;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);z-index: 3000;list-style-type: none;padding: 10px 0;} .x-contextmenu__menu {display: inline-block;min-width: 120px;border: 1px solid #e4e7ed;background: #fff;box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);z-index: 3000;list-style-type: none;padding: 10px 0;}
.sc-contextmenu__menu > hr {margin:5px 0;border: none;height: 1px;font-size: 0px;background-color: #ebeef5;} .x-contextmenu__menu > hr {margin:5px 0;border: none;height: 1px;font-size: 0px;background-color: #ebeef5;}
.sc-contextmenu__menu > li {margin:0;cursor: pointer;line-height: 30px;padding: 0 17px 0 10px;color: #606266;display: flex;justify-content: space-between;white-space: nowrap;text-decoration: none;position: relative;} .x-contextmenu__menu > li {margin:0;cursor: pointer;line-height: 30px;padding: 0 17px 0 10px;color: #606266;display: flex;justify-content: space-between;white-space: nowrap;text-decoration: none;position: relative;}
.sc-contextmenu__menu > li:hover {background-color: #ecf5ff;color: #66b1ff;} .x-contextmenu__menu > li:hover {background-color: #ecf5ff;color: #66b1ff;}
.sc-contextmenu__menu > li.disabled {cursor: not-allowed;color: #bbb;background: transparent;} .x-contextmenu__menu > li.disabled {cursor: not-allowed;color: #bbb;background: transparent;}
.sc-contextmenu__icon {display: inline-block;width: 14px;font-size: 14px;margin-right: 10px;} .x-contextmenu__icon {display: inline-block;width: 14px;font-size: 14px;margin-right: 10px;}
.sc-contextmenu__suffix {margin-left: 40px;color: #999;} .x-contextmenu__suffix {margin-left: 40px;color: #999;}
.sc-contextmenu__menu li ul {position: absolute;top:0px;left:100%;display: none;margin: -11px 0;} .x-contextmenu__menu li ul {position: absolute;top:0px;left:100%;display: none;margin: -11px 0;}
</style> </style>

10
src/components/scContextmenu/item.vue → src/components/xContextmenu/item.vue
View File

@ -2,14 +2,14 @@
<hr v-if="divided"> <hr v-if="divided">
<li :class="disabled?'disabled':''" @click.stop="liClick" @mouseenter="openSubmenu($event)" @mouseleave="closeSubmenu($event)"> <li :class="disabled?'disabled':''" @click.stop="liClick" @mouseenter="openSubmenu($event)" @mouseleave="closeSubmenu($event)">
<span class="title"> <span class="title">
<el-icon class="sc-contextmenu__icon"><component v-if="icon" :is="icon" /></el-icon> <el-icon class="x-contextmenu__icon"><component v-if="icon" :is="icon" /></el-icon>
{{title}} {{title}}
</span> </span>
<span class="sc-contextmenu__suffix"> <span class="x-contextmenu__suffix">
<el-icon v-if="$slots.default"><el-icon-arrow-right /></el-icon> <el-icon v-if="$slots.default"><el-icon-arrow-right /></el-icon>
<template v-else>{{suffix}}</template> <template v-else>{{suffix}}</template>
</span> </span>
<ul v-if="$slots.default" class="sc-contextmenu__menu"> <ul v-if="$slots.default" class="x-contextmenu__menu">
<slot></slot> <slot></slot>
</ul> </ul>
</li> </li>
@ -72,7 +72,3 @@
} }
} }
</script> </script>
<style>
</style>

2
src/components/scEditor/index.vue → src/components/xEditor/index.vue
View File

@ -1,5 +1,5 @@
<template> <template>
<div class="sceditor"> <div class="x-editor">
<Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" /> <Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
</div> </div>
</template> </template>

100
src/components/scFileSelect/index.vue → src/components/xFileSelect/index.vue
View File

@ -1,17 +1,17 @@
<template> <template>
<div class="sc-file-select"> <div class="x-file-select">
<div class="sc-file-select__side" v-loading="menuLoading"> <div class="x-file-select__side" v-loading="menuLoading">
<div class="sc-file-select__side-menu"> <div class="x-file-select__side-menu">
</div> </div>
<div class="sc-file-select__side-msg" v-if="multiple"> <div class="x-file-select__side-msg" v-if="multiple">
已选择 <b>{{value.length}}</b> / <b>{{max}}</b> 项 已选择 <b>{{value.length}}</b> / <b>{{max}}</b> 项
</div> </div>
</div> </div>
<div class="sc-file-select__files" v-loading="listLoading"> <div class="x-file-select__files" v-loading="listLoading">
<div class="sc-file-select__top"> <div class="x-file-select__top">
<div class="upload" v-if="!hideUpload"> <div class="upload" v-if="!hideUpload">
<el-upload class="sc-file-select__upload" action="" multiple :show-file-list="false" :accept="accept" :on-change="uploadChange" :before-upload="uploadBefore" :on-progress="uploadProcess" :on-success="uploadSuccess" :on-error="uploadError" :http-request="uploadRequest"> <el-upload class="x-file-select__upload" action="" multiple :show-file-list="false" :accept="accept" :on-change="uploadChange" :before-upload="uploadBefore" :on-progress="uploadProcess" :on-success="uploadSuccess" :on-error="uploadError" :http-request="uploadRequest">
<el-button type="primary" icon="el-icon-upload">本地上传</el-button> <el-button type="primary" icon="el-icon-upload">本地上传</el-button>
</el-upload> </el-upload>
<span class="tips"><el-icon><el-icon-warning /></el-icon>大小不超过{{maxSize}}MB</span> <span class="tips"><el-icon><el-icon-warning /></el-icon>大小不超过{{maxSize}}MB</span>
@ -20,27 +20,27 @@
<el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="文件名搜索" clearable @keyup.enter="search" @clear="search"></el-input> <el-input v-model="keyword" prefix-icon="el-icon-search" placeholder="文件名搜索" clearable @keyup.enter="search" @clear="search"></el-input>
</div> </div>
</div> </div>
<div class="sc-file-select__list"> <div class="x-file-select__list">
<el-scrollbar ref="scrollbar"> <el-scrollbar ref="scrollbar">
<el-empty v-if="fileList.length==0 && data.length==0" description="无数据" :image-size="80"></el-empty> <el-empty v-if="fileList.length==0 && data.length==0" description="无数据" :image-size="80"></el-empty>
<div v-for="(file, index) in fileList" :key="index" class="sc-file-select__item"> <div v-for="(file, index) in fileList" :key="index" class="x-file-select__item">
<div class="sc-file-select__item__file"> <div class="x-file-select__item__file">
<div class="sc-file-select__item__upload"> <div class="x-file-select__item__upload">
<el-progress type="circle" :percentage="file.progress" :width="70"></el-progress> <el-progress type="circle" :percentage="file.progress" :width="70"></el-progress>
</div> </div>
<el-image :src="file.tempImg" fit="contain"></el-image> <el-image :src="file.tempImg" fit="contain"></el-image>
</div> </div>
<p>{{file.name}}</p> <p>{{file.name}}</p>
</div> </div>
<div v-for="item in data" :key="item[fileProps.key]" class="sc-file-select__item" :class="{active: value.includes(item[fileProps.url]) }" @click="select(item)"> <div v-for="item in data" :key="item[fileProps.key]" class="x-file-select__item" :class="{active: value.includes(item[fileProps.url]) }" @click="select(item)">
<div class="sc-file-select__item__file"> <div class="x-file-select__item__file">
<div class="sc-file-select__item__checkbox" v-if="multiple"> <div class="x-file-select__item__checkbox" v-if="multiple">
<el-icon><el-icon-check /></el-icon> <el-icon><el-icon-check /></el-icon>
</div> </div>
<div class="sc-file-select__item__select" v-else> <div class="x-file-select__item__select" v-else>
<el-icon><el-icon-check /></el-icon> <el-icon><el-icon-check /></el-icon>
</div> </div>
<div class="sc-file-select__item__box"></div> <div class="x-file-select__item__box"></div>
<el-image v-if="_isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain" lazy></el-image> <el-image v-if="_isImg(item[fileProps.url])" :src="item[fileProps.url]" fit="contain" lazy></el-image>
<div v-else class="item-file item-file-doc"> <div v-else class="item-file item-file-doc">
<i v-if="files[_getExt(item[fileProps.url])]" :class="files[_getExt(item[fileProps.url])].icon" :style="{color:files[_getExt(item[fileProps.url])].color}"></i> <i v-if="files[_getExt(item[fileProps.url])]" :class="files[_getExt(item[fileProps.url])].icon" :style="{color:files[_getExt(item[fileProps.url])].color}"></i>
@ -51,10 +51,10 @@
</div> </div>
</el-scrollbar> </el-scrollbar>
</div> </div>
<div class="sc-file-select__pagination"> <div class="x-file-select__pagination">
<el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination> <el-pagination small background layout="prev, pager, next" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
</div> </div>
<div class="sc-file-select__do"> <div class="x-file-select__do">
<slot name="do"></slot> <slot name="do"></slot>
<el-button type="primary" :disabled="value.length<=0" @click="submit">确 定</el-button> <el-button type="primary" :disabled="value.length<=0" @click="submit">确 定</el-button>
</div> </div>
@ -232,41 +232,41 @@
</script> </script>
<style scoped> <style scoped>
.sc-file-select {display: flex; height: 100%} .x-file-select {display: flex; height: 100%}
.sc-file-select__files {flex: 1;} .x-file-select__files {flex: 1;}
.sc-file-select__list {height:400px;} .x-file-select__list {height:400px;}
.sc-file-select__item {display: inline-block;float: left;margin:0 15px 25px 0;width:110px;cursor: pointer;} .x-file-select__item {display: inline-block;float: left;margin:0 15px 25px 0;width:110px;cursor: pointer;}
.sc-file-select__item__file {width:110px;height:110px;position: relative;} .x-file-select__item__file {width:110px;height:110px;position: relative;}
.sc-file-select__item__file .el-image {width:110px;height:110px;} .x-file-select__item__file .el-image {width:110px;height:110px;}
.sc-file-select__item__box {position: absolute;top:0;right:0;bottom:0;left:0;border: 2px solid var(--el-color-success);z-index: 1;display: none;} .x-file-select__item__box {position: absolute;top:0;right:0;bottom:0;left:0;border: 2px solid var(--el-color-success);z-index: 1;display: none;}
.sc-file-select__item__box::before {content: '';position: absolute;top:0;right:0;bottom:0;left:0;background: var(--el-color-success);opacity: 0.2;display: none;} .x-file-select__item__box::before {content: '';position: absolute;top:0;right:0;bottom:0;left:0;background: var(--el-color-success);opacity: 0.2;display: none;}
.sc-file-select__item:hover .sc-file-select__item__box {display: block;} .x-file-select__item:hover .x-file-select__item__box {display: block;}
.sc-file-select__item.active .sc-file-select__item__box {display: block;} .x-file-select__item.active .x-file-select__item__box {display: block;}
.sc-file-select__item.active .sc-file-select__item__box::before {display: block;} .x-file-select__item.active .x-file-select__item__box::before {display: block;}
.sc-file-select__item p {margin-top: 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;text-align: center;} .x-file-select__item p {margin-top: 10px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;-webkit-text-overflow:ellipsis;text-align: center;}
.sc-file-select__item__checkbox {position: absolute;width: 20px;height: 20px;top:7px;right:7px;z-index: 2;background: rgba(0,0,0,0.2);border: 1px solid #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;} .x-file-select__item__checkbox {position: absolute;width: 20px;height: 20px;top:7px;right:7px;z-index: 2;background: rgba(0,0,0,0.2);border: 1px solid #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-file-select__item__checkbox i {font-size: 14px;color: #fff;font-weight: bold;display: none;} .x-file-select__item__checkbox i {font-size: 14px;color: #fff;font-weight: bold;display: none;}
.sc-file-select__item__select {position: absolute;width: 20px;height: 20px;top:0px;right:0px;z-index: 2;background: var(--el-color-success);display: none;flex-direction: column;align-items: center;justify-content: center;} .x-file-select__item__select {position: absolute;width: 20px;height: 20px;top:0px;right:0px;z-index: 2;background: var(--el-color-success);display: none;flex-direction: column;align-items: center;justify-content: center;}
.sc-file-select__item__select i {font-size: 14px;color: #fff;font-weight: bold;} .x-file-select__item__select i {font-size: 14px;color: #fff;font-weight: bold;}
.sc-file-select__item.active .sc-file-select__item__checkbox {background: var(--el-color-success);} .x-file-select__item.active .x-file-select__item__checkbox {background: var(--el-color-success);}
.sc-file-select__item.active .sc-file-select__item__checkbox i {display: block;} .x-file-select__item.active .x-file-select__item__checkbox i {display: block;}
.sc-file-select__item.active .sc-file-select__item__select {display: flex;} .x-file-select__item.active .x-file-select__item__select {display: flex;}
.sc-file-select__item__file .item-file {width:110px;height:110px;display: flex;flex-direction: column;align-items: center;justify-content: center;} .x-file-select__item__file .item-file {width:110px;height:110px;display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-file-select__item__file .item-file i {font-size: 40px;} .x-file-select__item__file .item-file i {font-size: 40px;}
.sc-file-select__item__file .item-file.item-file-doc {color: #409eff;} .x-file-select__item__file .item-file.item-file-doc {color: #409eff;}
.sc-file-select__item__upload {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;background: rgba(255,255,255,0.7);display: flex;flex-direction: column;align-items: center;justify-content: center;} .x-file-select__item__upload {position: absolute;top:0;right:0;bottom:0;left:0;z-index: 1;background: rgba(255,255,255,0.7);display: flex;flex-direction: column;align-items: center;justify-content: center;}
.sc-file-select__side {width: 200px;margin-right: 15px;border-right: 1px solid rgba(128,128,128,0.2);display: flex;flex-flow: column;} .x-file-select__side {width: 200px;margin-right: 15px;border-right: 1px solid rgba(128,128,128,0.2);display: flex;flex-flow: column;}
.sc-file-select__side-menu {flex: 1;} .x-file-select__side-menu {flex: 1;}
.sc-file-select__side-msg {height:32px;line-height: 32px;} .x-file-select__side-msg {height:32px;line-height: 32px;}
.sc-file-select__top {margin-bottom: 15px;display: flex;justify-content: space-between;} .x-file-select__top {margin-bottom: 15px;display: flex;justify-content: space-between;}
.sc-file-select__upload {display: inline-block;} .x-file-select__upload {display: inline-block;}
.sc-file-select__top .tips {font-size: 12px;margin-left: 10px;color: #999;} .x-file-select__top .tips {font-size: 12px;margin-left: 10px;color: #999;}
.sc-file-select__top .tips i {font-size: 14px;margin-right: 5px;position: relative;bottom: -0.125em;} .x-file-select__top .tips i {font-size: 14px;margin-right: 5px;position: relative;bottom: -0.125em;}
.sc-file-select__pagination {margin:15px 0;} .x-file-select__pagination {margin:15px 0;}
.sc-file-select__do {text-align: right;} .x-file-select__do {text-align: right;}
</style> </style>

6
src/components/xForm/item.vue
View File

@ -78,7 +78,7 @@
</template> </template>
<!-- editor --> <!-- editor -->
<template v-else-if="item.component=='editor'"> <template v-else-if="item.component=='editor'">
<sc-editor v-model="data[item.name]" v-bind="item.options"></sc-editor> <x-editor v-model="data[item.name]" v-bind="item.options"></x-editor>
</template> </template>
<template v-else-if="item.component=='text'"> <template v-else-if="item.component=='text'">
<el-link type="info" :underline="false">{{ data[item.name] }}</el-link> <el-link type="info" :underline="false">{{ data[item.name] }}</el-link>
@ -99,7 +99,7 @@
<script> <script>
import { defineAsyncComponent } from 'vue' import { defineAsyncComponent } from 'vue'
const tableselectRender = defineAsyncComponent(() => import('./items/tableselect')) const tableselectRender = defineAsyncComponent(() => import('./items/tableselect'))
const scEditor = defineAsyncComponent(() => import('@/components/scEditor')) const xEditor = defineAsyncComponent(() => import('@/components/xEditor'))
export default { export default {
props: { props: {
@ -108,7 +108,7 @@
}, },
components: { components: {
tableselectRender, tableselectRender,
scEditor xEditor
}, },
data() { data() {
return { return {

87
src/components/xPasswordStrength/index.vue Normal file
View File

@ -0,0 +1,87 @@
<!--
* @Descripttion: 密码强度检测
-->
<template>
<div class="x-password-strength">
<div class="x-password-strength-bar" :class="`x-password-strength-level-${level}`"></div>
</div>
</template>
<script>
export default {
props: {
modelValue: { type: String, default: "" },
},
data() {
return {
level: 0
}
},
watch: {
modelValue() {
this.strength(this.modelValue)
}
},
mounted() {
this.strength(this.modelValue)
},
methods: {
strength(v){
var _level = 0
//长度
var has_length = v.length >= 6
//包含数字
var has_number = /\d/.test(v)
//包含小写英文
var has_lovercase = /[a-z]/.test(v)
//包含大写英文
var has_uppercase = /[A-Z]/.test(v)
//没有连续的字符3位
var no_continuity = !/(\w)\1{2}/.test(v)
//包含特殊字符
var has_special = /[`~!@#$%^&*()_+<>?:"{},./;'[\]]/.test(v)
if(v.length <= 0){
_level = 0
this.level = _level
return false
}
if(!has_length){
_level = 1
this.level = _level
return false
}
if(has_number){
_level += 1
}
if(has_lovercase){
_level += 1
}
if(has_uppercase){
_level += 1
}
if(no_continuity){
_level += 1
}
if(has_special){
_level += 1
}
this.level = _level
}
}
}
</script>
<style scoped>
.x-password-strength {height: 5px;width: 100%;background: var(--el-color-info-light-5);border-radius: 5px;position: relative;margin:10px 0;}
.x-password-strength:before {left: 20%;}
.x-password-strength:after {right: 20%;}
.x-password-strength:before, .x-password-strength:after {position: absolute;content: "";display: block;width: 20%;height: inherit;border: 5px solid var(--el-bg-color-overlay);border-top: 0;border-bottom: 0;z-index: 1;background-color: transparent;box-sizing: border-box;}
.x-password-strength-bar {position: absolute;height: inherit;width: 0%;border-radius: inherit;transition: width .5s ease-in-out,background .25s;background: transparent;}
.x-password-strength-level-1 {width: 20%;background-color: var(--el-color-error);}
.x-password-strength-level-2 {width: 40%;background-color: var(--el-color-error);}
.x-password-strength-level-3 {width: 60%;background-color: var(--el-color-warning);}
.x-password-strength-level-4 {width: 80%;background-color: var(--el-color-success);}
.x-password-strength-level-5 {width: 100%;background-color: var(--el-color-success);}
</style>

6
src/components/xUser/components/password.vue
View File

@ -8,7 +8,7 @@
</el-form-item> </el-form-item>
<el-form-item label="新密码" prop="newPassword"> <el-form-item label="新密码" prop="newPassword">
<el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码"></el-input> <el-input v-model="form.newPassword" type="password" show-password placeholder="请输入新密码"></el-input>
<sc-password-strength v-model="form.newPassword"></sc-password-strength> <x-password-strength v-model="form.newPassword"></x-password-strength>
<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div> <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
</el-form-item> </el-form-item>
<el-form-item label="确认新密码" prop="confirmNewPassword"> <el-form-item label="确认新密码" prop="confirmNewPassword">
@ -22,11 +22,11 @@
</template> </template>
<script> <script>
import scPasswordStrength from '@/components/scPasswordStrength' import xPasswordStrength from '@/components/xPasswordStrength'
export default { export default {
components: { components: {
scPasswordStrength xPasswordStrength
}, },
data() { data() {
return { return {

28
src/layout/components/search.vue
View File

@ -1,11 +1,11 @@
<template> <template>
<div class="sc-search"> <div class="x-search">
<el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/> <el-input ref="input" v-model="input" placeholder="搜索" size="large" clearable prefix-icon="el-icon-search" :trigger-on-focus="false" @input="inputChange"/>
<div class="sc-search-history" v-if="history.length>0"> <div class="x-search-history" v-if="history.length>0">
<el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag> <el-tag closable effect="dark" type="info" v-for="(item, index) in history" :key="item" @click="historyClick(item)" @close="historyClose(index)">{{item}}</el-tag>
</div> </div>
<div class="sc-search-result"> <div class="x-search-result">
<div class="sc-search-no-result" v-if="result.length<=0">暂无搜索结果</div> <div class="x-search-no-result" v-if="result.length<=0">暂无搜索结果</div>
<ul v-else> <ul v-else>
<el-scrollbar max-height="366px"> <el-scrollbar max-height="366px">
<li v-for="item in result" :key="item.path" @click="to(item)"> <li v-for="item in result" :key="item.path" @click="to(item)">
@ -128,12 +128,16 @@
</script> </script>
<style scoped> <style scoped>
.sc-search {} .x-search {}
.sc-search-no-result {text-align: center;margin: 40px 0;color: #999;} .el-tag.is-closable {
.sc-search-history {margin-top: 10px;} padding-right: 5px;
.sc-search-history .el-tag {cursor: pointer;} margin-right: 5px;
.sc-search-result {margin-top: 15px;} }
.sc-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;} .x-search-no-result {text-align: center;margin: 40px 0;color: #999;}
.sc-search-result li i {font-size: 20px;margin-right: 15px;} .x-search-history {margin-top: 10px;}
.sc-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);} .x-search-history .el-tag {cursor: pointer;}
.x-search-result {margin-top: 15px;}
.x-search-result li {height:56px;padding:0 15px;background: var(--el-bg-color-overlay);border: 1px solid var(--el-border-color-light);list-style:none;border-radius: 4px;margin-bottom: 5px;font-size: 14px;display: flex;align-items: center;cursor: pointer;}
.x-search-result li i {font-size: 20px;margin-right: 15px;}
.x-search-result li:hover {background: var(--el-color-primary);color: #fff;border-color: var(--el-color-primary);}
</style> </style>

27
src/layout/other/404.vue
View File

@ -1,14 +1,18 @@
<template> <template>
<div class="router-err"> <div class="x">
<div class="router-err__icon"> <div class="y">
<img src="@/assets/img/404.png" /> <div class="router-err">
</div> <div class="router-err__icon">
<div class="router-err__content"> <img src="@/assets/img/404.png" />
<h2>无权限或找不到页面</h2> </div>
<p>当前页面无权限访问或者打开了一个不存在的链接，请检查当前账户权限和链接的可访问性。</p> <div class="router-err__content">
<el-button type="primary" plain round @click="gohome">返回首页</el-button> <h2>无权限或找不到页面</h2>
<el-button type="primary" plain round @click="gologin">重新登录</el-button> <p>当前页面无权限访问或者打开了一个不存在的链接，请检查当前账户权限和链接的可访问性。</p>
<el-button type="primary" round @click="goback">返回上一页</el-button> <el-button type="primary" plain round @click="gohome">返回首页</el-button>
<!-- <el-button type="primary" plain round @click="gologin">重新登录</el-button> -->
<el-button type="primary" round @click="goback">返回上一页</el-button>
</div>
</div>
</div> </div>
</div> </div>
</template> </template>
@ -30,13 +34,14 @@
</script> </script>
<style scoped> <style scoped>
.x {display: table;position: fixed;left: 0;top: 0;width: 100%;height: 100%;}
.x .y {display: table-cell;vertical-align: middle;}
.router-err {display: flex;width: 900px;margin: 50px auto;align-items: center;} .router-err {display: flex;width: 900px;margin: 50px auto;align-items: center;}
.router-err__icon {width: 400px;} .router-err__icon {width: 400px;}
.router-err__icon img {width: 100%;} .router-err__icon img {width: 100%;}
.router-err__content {flex: 1;padding:40px;} .router-err__content {flex: 1;padding:40px;}
.router-err__content h2 {font-size: 26px;} .router-err__content h2 {font-size: 26px;}
.router-err__content p {font-size: 14px;color: #999;margin: 15px 0 30px 0;line-height: 1.5;} .router-err__content p {font-size: 14px;color: #999;margin: 15px 0 30px 0;line-height: 1.5;}
@media (max-width: 992px){ @media (max-width: 992px){
.router-err {display: block;width: 100%;margin-top: 10px;text-align: center;} .router-err {display: block;width: 100%;margin-top: 10px;text-align: center;}
.router-err__icon {width: 280px;margin: 0 auto;} .router-err__icon {width: 280px;margin: 0 auto;}

14
src/router/index.js
View File

@ -56,7 +56,9 @@ router.beforeEach(async (to, from, next) => {
if (!token) { if (!token) {
next({ next({
path: '/login', path: '/login',
query: { redirect: to.fullPath } query: {
redirect: to.fullPath
}
}); });
return false; return false;
} }
@ -68,11 +70,11 @@ router.beforeEach(async (to, from, next) => {
if (!isGetRouter) { if (!isGetRouter) {
// 重新获取菜单路 // 重新获取菜单路
api.system.index.get().then((response) => { api.system.index.get().then((response) => {
if (response.code==200) { if (response.code == 200) {
// 缓存 // 缓存
for (const key in response.data) { for (const key in response.data) {
tool.data.set(key, response.data[key]); tool.data.set(key, response.data[key]);
if (key=='layout') { if (key == 'layout') {
store.commit("SET_layout", response.data[key]) store.commit("SET_layout", response.data[key])
} }
} }
@ -88,7 +90,6 @@ router.beforeEach(async (to, from, next) => {
} }
isGetRouter = true; isGetRouter = true;
} }
}).catch((error) => { }).catch((error) => {
console.log(error); console.log(error);
}); });
@ -107,7 +108,6 @@ router.onError((error) => {
message: error.message message: error.message
}); });
}); });
//入侵追加自定义方法、对象 //入侵追加自定义方法、对象
router.sc_getMenu = () => { router.sc_getMenu = () => {
var apiMenu = tool.data.get("menu") || [] var apiMenu = tool.data.get("menu") || []
@ -143,16 +143,14 @@ function filterAsyncRouter(routerMap) {
} }
function loadComponent(component) { function loadComponent(component) {
if (component) { if (component) {
return () => return () =>
import ( /* webpackChunkName: "[request]" */ `@/views/${component}`) import (`@/views/${component}`)
} else { } else {
return () => return () =>
import (`@/layout/other/empty`) import (`@/layout/other/empty`)
} }
} }
//路由扁平化 //路由扁平化
function flatAsyncRoutes(routes, breadcrumb = []) { function flatAsyncRoutes(routes, breadcrumb = []) {
let res = [] let res = []

42
src/router/scrollBehavior.js
View File

@ -1,22 +1,26 @@
import store from '@/store' import store from '@/store'
import { nextTick } from 'vue' import {
nextTick
export function beforeEach(to, from){ } from 'vue'
var adminMain = document.querySelector('#adminui-main') export function beforeEach(to, from) {
if(!adminMain){return false} var adminMain = document.querySelector('#adminui-main')
store.commit("updateViewTags", { if (!adminMain) {
fullPath: from.fullPath, return false
scrollTop: adminMain.scrollTop }
}) store.commit("updateViewTags", {
fullPath: from.fullPath,
scrollTop: adminMain.scrollTop
})
} }
export function afterEach(to) {
export function afterEach(to){ var adminMain = document.querySelector('#adminui-main')
var adminMain = document.querySelector('#adminui-main') if (!adminMain) {
if(!adminMain){return false} return false
nextTick(()=>{ }
var beforeRoute = store.state.viewTags.viewTags.filter(v => v.fullPath == to.fullPath)[0] nextTick(() => {
if(beforeRoute){ var beforeRoute = store.state.viewTags.viewTags.filter(v => v.fullPath == to.fullPath)[0]
adminMain.scrollTop = beforeRoute.scrollTop || 0 if (beforeRoute) {
} adminMain.scrollTop = beforeRoute.scrollTop || 0
}) }
})
} }

61
src/router/systemRouter.js
View File

@ -1,35 +1,32 @@
import config from "@/config" import config from "@/config"
//系统路由 //系统路由
const routes = [ const routes = [{
{ name: "layout",
name: "layout", path: "/",
path: "/", component: () =>
component: () => import(/* webpackChunkName: "layout" */ '@/layout'), import ('@/layout'),
redirect: config.DASHBOARD_URL || '/dashboard', redirect: config.DASHBOARD_URL || '/dashboard',
children: [] children: []
}, }, {
{ path: "/login",
path: "/login", component: () =>
component: () => import(/* webpackChunkName: "login" */ '@/views/login'), import ('@/views/login'),
meta: { meta: {
title: "登录" title: "登录"
} }
}, }, {
{ path: "/user_register",
path: "/user_register", component: () =>
component: () => import(/* webpackChunkName: "userRegister" */ '@/views/login/userRegister'), import ('@/views/login/userRegister'),
meta: { meta: {
title: "注册" title: "注册"
} }
}, }, {
{ path: "/reset_password",
path: "/reset_password", component: () =>
component: () => import(/* webpackChunkName: "resetPassword" */ '@/views/login/resetPassword'), import ('@/views/login/resetPassword'),
meta: { meta: {
title: "重置密码" title: "重置密码"
} }
} }]
]
export default routes; export default routes;

2
src/style/media.scss
View File

@ -46,7 +46,7 @@
.adminui-main > .el-container > .el-container > .el-header .left-panel {display: block;} .adminui-main > .el-container > .el-container > .el-header .left-panel {display: block;}
.adminui-main > .el-container > .el-container > .el-header .right-panel {} .adminui-main > .el-container > .el-container > .el-header .right-panel {}
.sc-page {width: 100%;margin: 0;} .x-page {width: 100%;margin: 0;}
.common-main .el-form {width: 100% !important;} .common-main .el-form {width: 100% !important;}
.common-header-logo label {display: none;} .common-header-logo label {display: none;}

5
src/utils/request.js
View File

@ -48,13 +48,12 @@ axios.interceptors.response.use(
}); });
} else if (error.response.status == 401) { } else if (error.response.status == 401) {
if (!MessageBox_401_show) { if (!MessageBox_401_show) {
MessageBox_401_show = true MessageBox_401_show = true
ElMessageBox.confirm('当前用户已被登出或无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', { ElMessageBox.confirm(error.response.data.message || '当前用户已被登出或无权限访问当前资源，请尝试重新登录后再操作。', '无权限访问', {
type: 'error', type: 'error',
closeOnClickModal: false, closeOnClickModal: false,
center: true, // center: true,
confirmButtonText: '重新登录', confirmButtonText: '重新登录',
beforeClose: (action, instance, done) => { beforeClose: (action, instance, done) => {
MessageBox_401_show = false MessageBox_401_show = false

6
src/views/login/userRegister.vue
View File

@ -12,7 +12,7 @@
</el-form-item> </el-form-item>
<el-form-item label="登录密码" prop="password"> <el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input> <el-input v-model="form.password" type="password" show-password placeholder="请输入登录密码"></el-input>
<sc-password-strength v-model="form.password"></sc-password-strength> <x-password-strength v-model="form.password"></x-password-strength>
<div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div> <div class="el-form-item-msg">请输入包含英文、数字的8位以上密码</div>
</el-form-item> </el-form-item>
<el-form-item label="确认密码" prop="password2"> <el-form-item label="确认密码" prop="password2">
@ -66,13 +66,13 @@
</template> </template>
<script> <script>
import scPasswordStrength from '@/components/scPasswordStrength'; import xPasswordStrength from '@/components/xPasswordStrength';
import commonPage from './components/commonPage' import commonPage from './components/commonPage'
export default { export default {
components: { components: {
commonPage, commonPage,
scPasswordStrength xPasswordStrength
}, },
data() { data() {
return { return {

8
src/views/system/avatar/index.vue
View File

@ -3,11 +3,11 @@
<el-main> <el-main>
<el-card shadow="never" style="height: 100%;"> <el-card shadow="never" style="height: 100%;">
<!-- <el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert> --> <!-- <el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert> -->
<sc-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit"> <x-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit">
<template #do> <template #do>
<el-button>自定义插槽</el-button> <el-button>自定义插槽</el-button>
</template> </template>
</sc-file-select> </x-file-select>
</el-card> </el-card>
<!-- <el-card shadow="never" header="参数和方法"> <!-- <el-card shadow="never" header="参数和方法">
<el-button type="primary" @click="multiple = !multiple">切换multiple</el-button> <el-button type="primary" @click="multiple = !multiple">切换multiple</el-button>
@ -18,12 +18,12 @@
</template> </template>
<script> <script>
import scFileSelect from '@/components/scFileSelect' import xFileSelect from '@/components/xFileSelect'
export default { export default {
name: 'fileselect', name: 'fileselect',
components: { components: {
scFileSelect xFileSelect
}, },
data() { data() {
return { return {

6
src/views/system/tablegen/options.vue
View File

@ -5,7 +5,7 @@
<el-alert title="扩展配置为系统业务所有的配置" type="warning" style="margin-bottom: 15px;"></el-alert> <el-alert title="扩展配置为系统业务所有的配置" type="warning" style="margin-bottom: 15px;"></el-alert>
<el-input placeholder="请填写JSON" type="textarea" rows="20" v-model="jsonData"></el-input> <el-input placeholder="请填写JSON" type="textarea" rows="20" v-model="jsonData"></el-input>
<!-- <sc-code-editor ref="editor" v-model="jsonData" mode="javascript" :height="500"></sc-code-editor> --> <!-- <x-code-editor ref="editor" v-model="jsonData" mode="javascript" :height="500"></x-code-editor> -->
</el-main> </el-main>
<el-footer> <el-footer>
<el-button @click="submit" type="primary"> <el-button @click="submit" type="primary">
@ -18,7 +18,7 @@
<script> <script>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor')); const xCodeEditor = defineAsyncComponent(() => import('@/components/xCodeEditor'));
export default { export default {
@ -36,7 +36,7 @@
} }
}, },
components: { components: {
scCodeEditor xCodeEditor
}, },
mounted() { mounted() {

10
src/views/vab/codeeditor.vue
View File

@ -4,7 +4,7 @@
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="24"> <el-col :lg="24">
<el-card shadow="never" header="JSON"> <el-card shadow="never" header="JSON">
<sc-code-editor ref="editor" v-model="json" mode="javascript" :height="200"></sc-code-editor> <x-code-editor ref="editor" v-model="json" mode="javascript" :height="200"></x-code-editor>
<div style="margin-top: 15px;"> <div style="margin-top: 15px;">
<el-button type="primary" @click="getCode">获取v-model</el-button> <el-button type="primary" @click="getCode">获取v-model</el-button>
<el-button type="primary" @click="getValue">getValue()</el-button> <el-button type="primary" @click="getValue">getValue()</el-button>
@ -14,13 +14,13 @@
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-card shadow="never" header="javascript Darcula主题"> <el-card shadow="never" header="javascript Darcula主题">
<sc-code-editor v-model="js" mode="javascript" theme="darcula"></sc-code-editor> <x-code-editor v-model="js" mode="javascript" theme="darcula"></x-code-editor>
</el-card> </el-card>
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-card shadow="never" header="SQL"> <el-card shadow="never" header="SQL">
<sc-code-editor v-model="sql" mode="sql"></sc-code-editor> <x-code-editor v-model="sql" mode="sql"></x-code-editor>
</el-card> </el-card>
</el-col> </el-col>
</el-row> </el-row>
@ -29,12 +29,12 @@
<script> <script>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
const scCodeEditor = defineAsyncComponent(() => import('@/components/scCodeEditor')); const xCodeEditor = defineAsyncComponent(() => import('@/components/xCodeEditor'));
export default { export default {
name: "codeeditor", name: "codeeditor",
components: { components: {
scCodeEditor xCodeEditor
}, },
data(){ data(){
return { return {

41
src/views/vab/contextmenu.vue
View File

@ -36,32 +36,32 @@
</el-row> </el-row>
</el-main> </el-main>
<sc-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange"> <x-contextmenu ref="contextmenu" @command="handleCommand" @visible-change="visibleChange">
<sc-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></sc-contextmenu-item> <x-contextmenu-item command="a" title="返回(B)" suffix="Alt+←"></x-contextmenu-item>
<sc-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></sc-contextmenu-item> <x-contextmenu-item command="b" title="重新加载(R)" suffix="Ctrl+R" icon="el-icon-refresh"></x-contextmenu-item>
<sc-contextmenu-item title="切换兼容性模式" divided> <x-contextmenu-item title="切换兼容性模式" divided>
<sc-contextmenu-item command="c1" title="二级菜单1"></sc-contextmenu-item> <x-contextmenu-item command="c1" title="二级菜单1"></x-contextmenu-item>
<sc-contextmenu-item title="二级菜单2"> <x-contextmenu-item title="二级菜单2">
<sc-contextmenu-item command="c2-1" title="三级菜单1"></sc-contextmenu-item> <x-contextmenu-item command="c2-1" title="三级菜单1"></x-contextmenu-item>
<sc-contextmenu-item command="c2-2" title="三级菜单2"></sc-contextmenu-item> <x-contextmenu-item command="c2-2" title="三级菜单2"></x-contextmenu-item>
<sc-contextmenu-item command="c2-3" title="三级菜单3"></sc-contextmenu-item> <x-contextmenu-item command="c2-3" title="三级菜单3"></x-contextmenu-item>
</sc-contextmenu-item> </x-contextmenu-item>
<sc-contextmenu-item command="c3" title="二级菜单3"></sc-contextmenu-item> <x-contextmenu-item command="c3" title="二级菜单3"></x-contextmenu-item>
</sc-contextmenu-item> </x-contextmenu-item>
<sc-contextmenu-item command="d" title="属性(P)" divided :disabled="row&&row.state==0"></sc-contextmenu-item> <x-contextmenu-item command="d" title="属性(P)" divided :disabled="row&&row.state==0"></x-contextmenu-item>
<sc-contextmenu-item command="e" title="设置state=1" v-if="row&&row.state==0"></sc-contextmenu-item> <x-contextmenu-item command="e" title="设置state=1" v-if="row&&row.state==0"></x-contextmenu-item>
</sc-contextmenu> </x-contextmenu>
</template> </template>
<script> <script>
import scContextmenu from '@/components/scContextmenu' import xContextmenu from '@/components/xContextmenu'
import scContextmenuItem from '@/components/scContextmenu/item' import xContextmenuItem from '@/components/xContextmenu/item'
export default { export default {
name: 'contextmenu', name: 'contextmenu',
components: { components: {
scContextmenu, xContextmenu,
scContextmenuItem xContextmenuItem
}, },
data() { data() {
return { return {
@ -115,6 +115,3 @@
} }
} }
</script> </script>
<style scoped>
</style>

6
src/views/vab/editor.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<el-main> <el-main>
<el-card shadow="never"> <el-card shadow="never">
<sc-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></sc-editor> <x-editor v-model="html" placeholder="请输入" :templates="templates" :height="400"></x-editor>
</el-card> </el-card>
<el-card shadow="never" header="配置" style="margin-top: 20px;"> <el-card shadow="never" header="配置" style="margin-top: 20px;">
<el-descriptions border :column="1"> <el-descriptions border :column="1">
@ -21,12 +21,12 @@
<script> <script>
import { defineAsyncComponent } from 'vue'; import { defineAsyncComponent } from 'vue';
const scEditor = defineAsyncComponent(() => import('@/components/scEditor')); const xEditor = defineAsyncComponent(() => import('@/components/xEditor'));
export default { export default {
name: "editor", name: "editor",
components: { components: {
scEditor xEditor
}, },
data(){ data(){
return { return {

8
src/views/vab/fileselect.vue
View File

@ -4,11 +4,11 @@
<el-col :lg="18"> <el-col :lg="18">
<el-card shadow="never"> <el-card shadow="never">
<el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert> <el-alert title="资源库选择器即将弃用,将不会维护更新,与1.7版本之后将移除此组件" type="error" style="margin-bottom:20px;"></el-alert>
<sc-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit"> <x-file-select v-model="file" :multiple="multiple" :hideUpload="hideUpload" :max="99" @submit="submit">
<template #do> <template #do>
<el-button>自定义插槽</el-button> <el-button>自定义插槽</el-button>
</template> </template>
</sc-file-select> </x-file-select>
</el-card> </el-card>
</el-col> </el-col>
<el-col :lg="6"> <el-col :lg="6">
@ -22,12 +22,12 @@
</template> </template>
<script> <script>
import scFileSelect from '@/components/scFileSelect' import xFileSelect from '@/components/xFileSelect'
export default { export default {
name: 'fileselect', name: 'fileselect',
components: { components: {
scFileSelect xFileSelect
}, },
data() { data() {
return { return {

16
src/views/vab/importexport.vue
View File

@ -3,8 +3,8 @@
<el-row :gutter="15"> <el-row :gutter="15">
<el-col :lg="12"> <el-col :lg="12">
<el-card shadow="never" header="导入(使用mock,有50%几率导入失败)"> <el-card shadow="never" header="导入(使用mock,有50%几率导入失败)">
<sc-file-import :apiObj="$api.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></sc-file-import> <x-file-import :apiObj="$api.common.importFile" templateUrl="http://www.scuiadmin/file.xlsx" @success="success"></x-file-import>
<sc-file-import :apiObj="$api.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success"> <x-file-import :apiObj="$api.common.importFile" :data="{otherData:'demo'}" templateUrl="http://www.scuiadmin/file.xlsx" accept=".xls, .xlsx" :maxSize="30" tip="请上传小于或等于 30M 的 .xls, .xlsx 格式文件(自定义TIP)" @success="success">
<template #default="{open}"> <template #default="{open}">
<el-button type="primary" icon="x-icon-upload" @click="open">导入(全配置)</el-button> <el-button type="primary" icon="x-icon-upload" @click="open">导入(全配置)</el-button>
</template> </template>
@ -22,7 +22,7 @@
<el-switch v-model="formData.skipError" /> <el-switch v-model="formData.skipError" />
</el-form-item> </el-form-item>
</template> </template>
</sc-file-import> </x-file-import>
<el-descriptions :column="1" border size="small" style="margin-top: 15px;"> <el-descriptions :column="1" border size="small" style="margin-top: 15px;">
<el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item> <el-descriptions-item label="apiObj" :width="200">Object 文件上传接口对象</el-descriptions-item>
<el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item> <el-descriptions-item label="data">Object 上传时附带的额外参数</el-descriptions-item>
@ -39,13 +39,13 @@
</el-col> </el-col>
<el-col :lg="12"> <el-col :lg="12">
<el-card shadow="never" header="导出"> <el-card shadow="never" header="导出">
<sc-file-export :apiObj="$api.common.exportFile"></sc-file-export> <x-file-export :apiObj="$api.common.exportFile"></x-file-export>
<sc-file-export :apiObj="$api.common.exportFile" fileName="人员列表(异步)" async> <x-file-export :apiObj="$api.common.exportFile" fileName="人员列表(异步)" async>
<template #default="{open}"> <template #default="{open}">
<el-button type="primary" icon="x-icon-download" @click="open">导出(异步)</el-button> <el-button type="primary" icon="x-icon-download" @click="open">导出(异步)</el-button>
</template> </template>
</sc-file-export> </x-file-export>
<sc-file-export :apiObj="$api.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']"> <x-file-export :apiObj="$api.common.exportFile" blob fileName="人员列表" :data="{otherData:'demo'}" showData :column="column" :fileTypes="['xlsx','docx','pdf']">
<template #default="{open}"> <template #default="{open}">
<el-button type="primary" icon="x-icon-download" @click="open">导出(blob文件流)</el-button> <el-button type="primary" icon="x-icon-download" @click="open">导出(blob文件流)</el-button>
</template> </template>
@ -60,7 +60,7 @@
</el-select> </el-select>
</el-form-item> </el-form-item>
</template> </template>
</sc-file-export> </x-file-export>
<el-descriptions :column="1" border size="small" style="margin-top: 15px;"> <el-descriptions :column="1" border size="small" style="margin-top: 15px;">
<el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item> <el-descriptions-item label="apiObj" :width="200">Object 文件导出接口对象，通过apiObj.url请求文件</el-descriptions-item>
<el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item> <el-descriptions-item label="data">Object 上传时附带的额外参数(可为数据表格的过滤项)</el-descriptions-item>