Oneric/admin-fe
1
0
Fork 0
forked from AkkomaGang/admin-fe
Code Pull requests Activity

reactor:refine code&&demo

Browse source
This commit is contained in:
Pan 2017-11-02 17:58:35 +08:00
parent ac5d087ea4
commit bb1d939a94
18 changed files with 138 additions and 139 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/components/ThemePicker/index.vue
View file

@ -54,7 +54,6 @@ export default {
}) })
styles.forEach(style => { styles.forEach(style => {
const { innerText } = style const { innerText } = style
console.log(style)
if (typeof innerText !== 'string') return if (typeof innerText !== 'string') return
style.innerText = this.updateStyle(innerText, originalCluster, themeCluster) style.innerText = this.updateStyle(innerText, originalCluster, themeCluster)
}) })

1
src/icons/svg/dashboard.svg Normal file
View file

@ -0,0 +1 @@
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1509611822979" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10379" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32"><defs><style type="text/css"></style></defs><path d="M219.428571 658.285714q0-30.285714-21.428571-51.714285T146.285714 585.142857t-51.714285 21.428572T73.142857 658.285714t21.428572 51.714286T146.285714 731.428571t51.714286-21.428571T219.428571 658.285714z m109.714286-256q0-30.285714-21.428571-51.714285T256 329.142857t-51.714286 21.428572T182.857143 402.285714t21.428571 51.714286T256 475.428571t51.714286-21.428571T329.142857 402.285714z m244.571429 274.857143l57.714285-218.285714q3.428571-14.857143-4.285714-27.714286T605.142857 414.285714t-27.428571 3.714286-17.142857 22.571429l-57.714286 218.285714q-34.285714 2.857143-61.142857 24.857143t-36 56.285714q-11.428571 44 11.428571 83.428571t66.857143 50.857143 83.428571-11.428571 50.857143-66.857143q9.142857-34.285714-3.428571-66.857143t-41.142857-52z m377.142857-18.857143q0-30.285714-21.428572-51.714285T877.714286 585.142857t-51.714286 21.428572-21.428571 51.714285 21.428571 51.714286 51.714286 21.428571 51.714285-21.428571 21.428572-51.714286z m-365.714286-365.714285q0-30.285714-21.428571-51.714286T512 219.428571t-51.714286 21.428572T438.857143 292.571429t21.428571 51.714285T512 365.714286t51.714286-21.428572T585.142857 292.571429z m256 109.714285q0-30.285714-21.428571-51.714285T768 329.142857t-51.714286 21.428572T694.857143 402.285714t21.428571 51.714286T768 475.428571t51.714286-21.428571T841.142857 402.285714z m182.857143 256q0 149.142857-80.571429 276-10.857143 16.571429-30.857142 16.571429H111.428571q-20 0-30.857142-16.571429Q0 808 0 658.285714q0-104 40.571429-198.857143t109.142857-163.428571 163.428571-109.142857 198.857143-40.571429 198.857143 40.571429 163.428571 109.142857 109.142857 163.428571 40.571429 198.857143z" p-id="10380"></path></svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

7
src/router/index.js
View file

@ -26,15 +26,14 @@ export const constantRouterMap = [
{ path: '/401', component: _import('errorPage/401'), hidden: true }, { path: '/401', component: _import('errorPage/401'), hidden: true },
{ {
path: '/', path: '',
component: Layout, component: Layout,
redirect: '/dashboard', redirect: 'dashboard',
hidden: true,
children: [{ children: [{
path: 'dashboard', path: 'dashboard',
component: _import('dashboard/index'), component: _import('dashboard/index'),
name: 'dashboard', name: 'dashboard',
meta: { title: '首页' } meta: { title: '首页', icon: 'dashboard' }
}] }]
}, },

2
src/styles/element-ui.scss
View file

@ -12,7 +12,7 @@
.cell { .cell {
.el-tag { .el-tag {
margin-right: 8px; margin-right: 0px;
} }
} }

195
src/styles/sidebar.scss
View file

@ -1,113 +1,104 @@
// 主体区域 .app-wrapper {
.main-container { // 主体区域
min-height: 100%;
transition: margin-left 0.28s;
margin-left: 180px;
}
// 侧边栏
.hideSidebar {
.sidebar-container {
width: 36px!important;
overflow: inherit;
}
.main-container { .main-container {
margin-left: 36px; min-height: 100%;
transition: margin-left 0.28s;
margin-left: 180px;
} }
} // 侧边栏
.hideSidebar {
.sidebar-container { .sidebar-container {
transition: width 0.28s; width: 36px!important;
width: 180px!important; overflow: inherit;
height: 100%; }
position: fixed; .main-container {
top: 0; margin-left: 36px;
bottom: 0; }
left: 0;
z-index: 1001;
overflow-y: auto;
&::-webkit-scrollbar {
display: none
} }
} .sidebar-container {
transition: width 0.28s;
.sidebar-container>.el-menu { width: 180px!important;
width: 100%!important; height: 100%;
min-height: 100%; position: fixed;
} top: 0;
bottom: 0;
.sidebar-container .svg-icon { left: 0;
margin-right: 16px; z-index: 1001;
} overflow-y: auto;
&::-webkit-scrollbar {
.hideSidebar .el-submenu>.el-submenu__title, display: none
.hideSidebar .submenu-title-noDropdown { }
padding-left: 10px!important;
}
.hideSidebar .submenu-title-noDropdown span,
.hideSidebar .el-submenu>.el-submenu__title>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.hideSidebar .nest-menu .el-submenu__title {
text-align: initial!important;
padding-left: 20px!important;
span {
height: auto;
width: auto;
visibility: visible;
display: inline;
} }
.el-submenu__icon-arrow { .sidebar-container>.el-menu {
display: block!important; width: 100%!important;
min-height: 100%;
} }
} .sidebar-container .svg-icon {
margin-right: 16px;
.hideSidebar .menu-wrapper>.el-menu-item,
.hideSidebar .submenu-title-noDropdown,
.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
text-align: center;
}
.hideSidebar .el-menu-item .el-submenu__icon-arrow,
.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.hideSidebar .submenu-title-noDropdown {
position: relative;
span {
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
opacity: 0;
} }
&:hover { .hideSidebar .el-submenu>.el-submenu__title,
.hideSidebar .submenu-title-noDropdown {
padding-left: 10px!important;
}
.hideSidebar .submenu-title-noDropdown span,
.hideSidebar .el-submenu>.el-submenu__title>span {
height: 0;
width: 0;
overflow: hidden;
visibility: hidden;
display: inline-block;
}
.hideSidebar .nest-menu .el-submenu__title {
text-align: initial!important;
padding-left: 20px!important;
span { span {
display: block; height: auto;
border-radius: 3px; width: auto;
z-index: 1002;
width: 140px;
height: 56px;
visibility: visible; visibility: visible;
position: absolute; display: inline;
right: -145px; }
text-align: left; .el-submenu__icon-arrow {
text-indent: 20px; display: block!important;
top: 0px; }
background-color: #2B2C2D!important; }
opacity: 1; .hideSidebar .menu-wrapper>.el-menu-item,
.hideSidebar .submenu-title-noDropdown,
.hideSidebar .menu-wrapper>.el-submenu .el-submenu__title {
text-align: center;
}
.hideSidebar .el-menu-item .el-submenu__icon-arrow,
.hideSidebar .el-submenu .el-submenu__title .el-submenu__icon-arrow {
display: none;
}
.hideSidebar .submenu-title-noDropdown {
position: relative;
span {
transition: opacity .3s cubic-bezier(.55, 0, .1, 1);
opacity: 0;
}
&:hover {
span {
display: block;
border-radius: 3px;
z-index: 1002;
width: 140px;
height: 56px;
visibility: visible;
position: absolute;
right: -145px;
text-align: left;
text-indent: 20px;
top: 0px;
background-color: #2B2C2D!important;
opacity: 1;
}
}
}
.el-submenu .el-menu-item {
min-width: 180px!important;
background-color: #2B2C2D!important;
&:hover {
background-color: rgb(67, 74, 80)!important;
} }
} }
} }
.el-submenu .el-menu-item {
min-width: 180px!important;
background-color: #2B2C2D!important;
&:hover {
background-color: rgb(67, 74, 80)!important;
}
}

2
src/vendor/Export2Excel.js vendored
View file

@ -155,6 +155,6 @@ export function export_json_to_excel(th, jsonData, defaultTitle) {
wb.Sheets[ws_name] = ws; wb.Sheets[ws_name] = ws;
var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'}); var wbout = XLSX.write(wb, {bookType: 'xlsx', bookSST: false, type: 'binary'});
var title = defaultTitle || '列表' var title = defaultTitle || 'excel-list'
saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx") saveAs(new Blob([s2ab(wbout)], {type: "application/octet-stream"}), title + ".xlsx")
} }

4
src/vendor/Export2Zip.js vendored
View file

@ -4,8 +4,8 @@ import JSZip from 'jszip'
export function export_txt_to_zip(th, jsonData, txtName, zipName) { export function export_txt_to_zip(th, jsonData, txtName, zipName) {
const zip = new JSZip() const zip = new JSZip()
const txt_name = txtName || '文本' const txt_name = txtName || 'file'
const zip_name = zipName || '压缩包' const zip_name = zipName || 'file'
const data = jsonData const data = jsonData
let txtData = `${th}\r\n` let txtData = `${th}\r\n`
data.forEach((row) => { data.forEach((row) => {

4
src/views/example/tab/components/tabPane.vue
View file

@ -1,5 +1,5 @@
<template> <template>
<el-table :data="list" border fit highlight-current-row style="width: 100%"> <el-table :data="list"border fit highlight-current-row style="width: 100%">
<el-table-column align="center" label="序号" width="65" v-loading="loading" <el-table-column align="center" label="序号" width="65" v-loading="loading"
element-loading-text="请给我点时间！"> element-loading-text="请给我点时间！">
@ -39,7 +39,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="状态" width="90"> <el-table-column class-name="status-col" label="状态" width="110">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>

14
src/views/example/table/complexTable.vue
View file

@ -19,10 +19,10 @@
</el-option> </el-option>
</el-select> </el-select>
<el-button class="filter-item" type="primary" v-waves icon="search" @click="handleFilter">搜索</el-button> <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜索</el-button>
<el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="edit">添加</el-button> <el-button class="filter-item" style="margin-left: 10px;" @click="handleCreate" type="primary" icon="el-icon-edit">添加</el-button>
<el-button class="filter-item" type="primary" icon="document" @click="handleDownload">导出</el-button> <el-button class="filter-item" type="primary" icon="el-icon-download" @click="handleDownload">导出</el-button>
<el-checkbox class="filter-item" @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox> <el-checkbox class="filter-item" style='margin-left:15px;' @change='tableKey=tableKey+1' v-model="showAuditor">显示审核人</el-checkbox>
</div> </div>
<el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%"> <el-table :key='tableKey' :data="list" v-loading="listLoading" element-loading-text="给我一点时间" border fit highlight-current-row style="width: 100%">
@ -39,7 +39,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column min-width="300px" label="标题"> <el-table-column min-width="150px" label="标题">
<template slot-scope="scope"> <template slot-scope="scope">
<span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span> <span class="link-type" @click="handleUpdate(scope.row)">{{scope.row.title}}</span>
<el-tag>{{scope.row.type | typeFilter}}</el-tag> <el-tag>{{scope.row.type | typeFilter}}</el-tag>
@ -70,7 +70,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="状态" width="90"> <el-table-column class-name="status-col" label="状态" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>
@ -121,7 +121,7 @@
</el-form-item> </el-form-item>
<el-form-item label="重要性"> <el-form-item label="重要性">
<el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']"></el-rate> <el-rate style="margin-top:8px;" v-model="temp.importance" :colors="['#99A9BF', '#F7BA2A', '#FF9900']" :max='3'></el-rate>
</el-form-item> </el-form-item>
<el-form-item label="点评"> <el-form-item label="点评">

2
src/views/example/table/dragTable.vue
View file

@ -39,7 +39,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="状态" width="90"> <el-table-column class-name="status-col" label="状态" width="110">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>

2
src/views/example/table/dynamicTable/fixedThead.vue
View file

@ -9,7 +9,7 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<el-table :data="tableData" :key='key' style="width: 100%"> <el-table :data="tableData" :key='key' border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180"></el-table-column> <el-table-column prop="name" label="fruitName" width="180"></el-table-column>
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit"> <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">
<template slot-scope="scope"> <template slot-scope="scope">

2
src/views/example/table/dynamicTable/unfixedThead.vue
View file

@ -9,7 +9,7 @@
</el-checkbox-group> </el-checkbox-group>
</div> </div>
<el-table :data="tableData" style="width: 100%"> <el-table :data="tableData" border fit highlight-current-row style="width: 100%">
<el-table-column prop="name" label="fruitName" width="180"> <el-table-column prop="name" label="fruitName" width="180">
</el-table-column> </el-table-column>
<el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit"> <el-table-column :key='fruit' v-for='(fruit,index) in formThead' :label="fruit">

2
src/views/example/table/inlineEditTable.vue
View file

@ -27,7 +27,7 @@
</template> </template>
</el-table-column> </el-table-column>
<el-table-column class-name="status-col" label="状态" width="100"> <el-table-column class-name="status-col" label="状态" width="110">
<template slot-scope="scope"> <template slot-scope="scope">
<el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag> <el-tag :type="scope.row.status | statusFilter">{{scope.row.status}}</el-tag>
</template> </template>

6
src/views/excel/exportExcel.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button> <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出excel</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95"> <el-table-column align="center" label='ID' width="95">
@ -42,7 +43,8 @@ export default {
return { return {
list: null, list: null,
listLoading: true, listLoading: true,
downloadLoading: false downloadLoading: false,
filename: ''
} }
}, },
created() { created() {
@ -64,7 +66,7 @@ export default {
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list const list = this.list
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel') export_json_to_excel(tHeader, data, this.filename)
this.downloadLoading = false this.downloadLoading = false
}) })
}, },

6
src/views/excel/selectExcel.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认excel-list)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button> <el-button style='margin-bottom:20px' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出已选择项</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange" <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row @selection-change="handleSelectionChange"
ref="multipleTable"> ref="multipleTable">
@ -44,7 +45,8 @@ export default {
list: null, list: null,
listLoading: true, listLoading: true,
multipleSelection: [], multipleSelection: [],
downloadLoading: false downloadLoading: false,
filename: ''
} }
}, },
created() { created() {
@ -70,7 +72,7 @@ export default {
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.multipleSelection const list = this.multipleSelection
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
export_json_to_excel(tHeader, data, '列表excel') export_json_to_excel(tHeader, data, this.filename)
this.$refs.multipleTable.clearSelection() this.$refs.multipleTable.clearSelection()
this.downloadLoading = false this.downloadLoading = false
}) })

2
src/views/layout/components/Levelbar.vue
View file

@ -25,7 +25,7 @@ export default {
return return
} }
const first = matched[0] const first = matched[0]
if (first && (first.name !== '首页' || first.path !== '')) { if (first && first.name !== 'dashboard') {
matched = [{ path: '/', meta: { title: '首页' }}].concat(matched) matched = [{ path: '/', meta: { title: '首页' }}].concat(matched)
} }
this.levelList = matched this.levelList = matched

19
src/views/svg-icons/index.vue
View file

@ -1,19 +1,22 @@
<template> <template>
<div class="icons-container"> <div class="icons-container">
<div class="icons-wrapper"> <div class="icons-wrapper">
<div v-for='item of iconsMap' :key='item' class='icon-item' @click='handleClipboard(generateIconCode(item),$event)'> <div v-for='item of iconsMap' :key='item' @click='handleClipboard(generateIconCode(item),$event)'>
<el-tooltip placement="top" effect="light"> <el-tooltip placement="top">
<div slot="content"> <div slot="content">
{{generateIconCode(item)}} {{generateIconCode(item)}}
</div> </div>
<svg-icon :icon-class="item" /> <div class='icon-item'>
<svg-icon :icon-class="item" />
<span>{{item}}</span>
</div>
</el-tooltip> </el-tooltip>
<span>{{item}}</span>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import icons from './generateIconsView' import icons from './generateIconsView'
import clipboard from '@/utils/clipboard' // use clipboard directly import clipboard from '@/utils/clipboard' // use clipboard directly
@ -50,12 +53,12 @@ export default {
} }
.icon-item { .icon-item {
margin: 20px; margin: 20px;
height: 137px; height: 110px;
text-align: center; text-align: center;
width: 120px; width: 110px;
float: left; float: left;
font-size: 40px; font-size: 30px;
color: #666; color: #24292e;
cursor: pointer; cursor: pointer;
} }
span { span {

6
src/views/zip/index.vue
View file

@ -1,5 +1,6 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-input style='width:240px;' placeholder="请输入文件名(默认file)" prefix-icon="el-icon-document" v-model="filename"></el-input>
<el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button> <el-button style='margin-bottom:20px;' type="primary" icon="document" @click="handleDownload" :loading="downloadLoading">导出zip</el-button>
<el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row> <el-table :data="list" v-loading.body="listLoading" element-loading-text="拼命加载中" border fit highlight-current-row>
<el-table-column align="center" label='ID' width="95"> <el-table-column align="center" label='ID' width="95">
@ -41,7 +42,8 @@ export default {
return { return {
list: null, list: null,
listLoading: true, listLoading: true,
downloadLoading: false downloadLoading: false,
filename: ''
} }
}, },
created() { created() {
@ -63,7 +65,7 @@ export default {
const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time'] const filterVal = ['id', 'title', 'author', 'pageviews', 'display_time']
const list = this.list const list = this.list
const data = this.formatJson(filterVal, list) const data = this.formatJson(filterVal, list)
export_txt_to_zip(tHeader, data, '列表文本', '压缩文本') export_txt_to_zip(tHeader, data, this.filename, this.filename)
this.downloadLoading = false this.downloadLoading = false
}) })
}, },