zcdsj
/
factory_web
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

UP 1.0.2

This commit is contained in:
sc 2021-05-08 15:43:46 +08:00
parent a5abbc578e
commit c4ef61612f
9 changed files with 140 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "SCUI-Admin",
"version": "0.1.1",
"version": "1.0.2",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",

2
public/config.js
View File

@ -1,8 +1,6 @@
const APP_CONFIG = {
//标题
APP_NAME: "SCUI",
//版本号
APP_VER: "1.0",
//接口地址
API_URL: ""
}

2
src/components/scEcharts/echarts-theme-T.js
View File

@ -29,9 +29,7 @@ const T = {
}
},
"axisLabel": {
"textStyle": {
"color": "#999"
}
},
"splitLine": {
"show": true,

75
src/components/scTable/columnSetting.vue Normal file
View File

@ -0,0 +1,75 @@
<template>
<div class="setting-column">
<div class="sys">
<h4>隐藏</h4>
<ul>
<draggable v-model="sys" animation="200" group="people" :sort="false" item-key="prop">
<template #item="{ element }">
<li>{{ element.label }}</li>
</template>
<template #footer>
<el-empty v-if="sys.length == 0" description="没有隐藏列" :image-size="50"></el-empty>
</template>
</draggable>
</ul>
</div>
<div class="user">
<h4>显示</h4>
<ul>
<draggable v-model="user" animation="200" group="people" @change="change" item-key="prop">
<template #item="{ element }">
<li>{{ element.label }}</li>
</template>
<template #footer>
<el-empty v-if="user.length == 0" description="没有显示列" :image-size="50"></el-empty>
</template>
</draggable>
</ul>
</div>
</div>
</template>
<script>
import draggable from 'vuedraggable'
export default {
components: {
draggable
},
props: {
column: { type: Object, default: () => {} }
},
data() {
return {
sys: [
{label: "姓名", prop: "name"},
{label: "性别", prop: "sex"},
{label: "头像", prop: "a"},
{label: "加入时间", prop: "time"}
],
user: []
}
},
mounted() {
this.sys = this.column || []
},
methods: {
change(){
this.$emit('userChange', this.user)
},
remove(index){
this.sys.push(this.user[index]);
this.user.splice(index, 1);
}
}
}
</script>
<style scoped>
.setting-column {display:flex;}
.setting-column > div > ul {margin-top: 15px;height:300px;overflow: auto;}
.setting-column > div > ul > div {height: 100%;}
.setting-column > div > ul li {cursor: move;font-size: 12px;list-style-type: none;height:32px;line-height: 32px;background: #ecf5ff;color: #409EFF;border: 1px solid #d9ecff;border-radius: 4px;padding: 0 8px;margin-bottom:5px;}
.setting-column .sys {flex:1;margin-right:15px;padding-right:15px;border-right: 1px solid #eee;}
.setting-column .user {flex:1;}
.sortable-ghost {opacity: 0.5;}
</style>

44
src/components/scTable/index.vue
View File

@ -1,8 +1,17 @@
<template>
<div class="scTable" ref="scTableMain" v-loading="loading">
<div class="scTable-table">
<el-table :data="tableData" :row-key="rowKey" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
<el-table :data="tableData" :row-key="rowKey" :key="toggleIndex" ref="scTable" :height="tableHeight" stripe @selection-change="selectionChange">
<slot></slot>
<el-table-column v-for="(item, index) in userColumn" :key="index" :label="item.label" :prop="item.prop" :width="item.width">
<template #default="scope">
{{scope.row[item.prop]}}
</template>
<template #header>
{{item.label}}
<i class="el-icon-remove" style="color: #F56C6C;cursor: pointer;" @click="removeColumn(index)"></i>
</template>
</el-table-column>
<el-table-column min-width="1"></el-table-column>
<template #empty>
<el-empty description="暂无数据" :image-size="100"></el-empty>
@ -17,7 +26,7 @@
<template #reference>
<el-button icon="el-icon-setting" circle style="margin-left:15px"></el-button>
</template>
<div style="padding:50px 0;text-align: center;">表格设置,开发中...</div>
<columnSetting ref="columnSetting" @userChange="columnSettingChange" :column="column"></columnSetting>
</el-popover>
</div>
</div>
@ -25,13 +34,18 @@
</template>
<script>
import columnSetting from './columnSetting'
export default {
name: 'scTable',
components: {},
components: {
columnSetting
},
props: {
apiObj: { type: Object, default: () => {} },
data: { type: Object, default: () => {} },
rowKey: { type: String, default: "" }
rowKey: { type: String, default: "" },
column: { type: Object, default: () => {} }
},
watch: {
//监听从props里拿到值了
@ -42,13 +56,15 @@
},
data() {
return {
toggleIndex: 0,
tableData: [],
pageSize: 20,
total: 0,
currentPage: 1,
loading: false,
tableHeight:'100%',
tableParams: {}
tableParams: {},
userColumn: []
}
},
created() {
@ -98,6 +114,15 @@
this.tableParams = params;
this.getData()
},
//自定义变化事件
columnSettingChange(userColumn){
this.userColumn = userColumn;
this.toggleIndex += 1;
},
removeColumn(index){
this.$refs.columnSetting.remove(index)
this.toggleIndex += 1;
},
//转发原装方法&事件
selectionChange(selection){
this.$emit('selection-change', selection)
@ -110,13 +135,4 @@
.scTable {display:flex;flex-direction:column;height:100%;}
.scTable-table {flex:1;}
.scTable-page {height:50px;display: flex;align-items: center;justify-content: space-between;padding:0 15px;}
.setting-column {display:flex;padding:0 20px;}
.setting-column > div {border: 1px solid #eee;height: 250px;}
.setting-column .all {width: 300px;margin-right:20px;}
.setting-column .all span {display: inline-block;width: 100%;height:30px;line-height: 30px;padding:0 15px;}
.setting-column .all span:hover {background: #ecf5ff;}
.setting-column .user {flex:1;padding:20px;}
.setting-column .user>div {width: 100%;height: 100%;}
.setting-column .user .el-tag {margin:0 8px 8px 0;}
</style>

2
src/config/index.js
View File

@ -3,7 +3,7 @@ const DEFAULT_CONFIG = {
//标题
APP_NAME: "SCUI",
//版本号
APP_VER: "0.0.0",
APP_VER: "1.0.2",
//接口地址
API_URL: ""
}

4
src/layout/components/head.vue
View File

@ -74,13 +74,13 @@
{
id: 1,
title: "关于版本发布的通知",
describe: "当前版本号Ver0.1.0,最后更新日期2021年4月27日",
describe: "点进去Gitee获取最新开源版本",
link: "https://gitee.com/lolicode/scui"
},
{
id: 2,
title: "感谢登录SCUI Admin",
describe: "Vue 3.0 + Vue-Router 4.0 + Element-Plus + Axios 后台管理系统。",
describe: "Vue 3.0 + Vue-Router 4.0 + ElementPlus + Axios 后台管理系统。",
link: "https://gitee.com/lolicode/scui"
}
]

4
src/views/home/components/C2.vue
View File

@ -22,6 +22,10 @@
data() {
return {
activities: [
{
content: '1.0.2 增加自定义隐藏排序列，修复scEcharts组件主题警告',
timestamp: '2021-05-08'
},
{
content: '1.0.1 提升部分组件为全局组件',
timestamp: '2021-05-07'

26
src/views/template/list.vue
View File

@ -18,27 +18,34 @@
</div>
</el-header>
<el-main class="nopadding">
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
<scTable ref="table" :apiObj="apiObj" :column="column" @selection-change="selectionChange">
<!-- 表格列开始 -->
<el-table-column type="selection" width="50"></el-table-column>
<el-table-column label="序号" type="index" width="50"></el-table-column>
<el-table-column label="头像" width="60">
<template #default="scope">
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
</template>
</el-table-column>
<el-table-column label="名称" prop="name" width="150"></el-table-column>
<el-table-column label="进度" prop="progress" width="200">
<template #default="scope">
<el-progress :percentage="scope.row.progress" status="success"></el-progress>
</template>
</el-table-column>
<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
<el-table-column label="状态" prop="audit" width="50">
<template #default="scope">
<el-tag>{{scope.row.audit}}</el-tag>
</template>
</el-table-column>
<el-table-column label="加入时间" prop="date" width="170"></el-table-column>
<el-table-column label="操作" fixed="right" align="right" width="140">
@ -152,7 +159,24 @@
progress: [
{ required: true, message: '请输入进度' },
]
},
column: [
{
label: "NAME",
prop: "name",
width: 150
},
{
label: "PROGRESS",
prop: "progress",
width: 150
},
{
label: "AUDIT",
prop: "audit",
width: 150
}
]
}
},
mounted() {