This commit is contained in:
sc
parent
7393678055
commit
9d50fca203
|
|
@ -0,0 +1,31 @@
|
|||
{
|
||||
"code": 200,
|
||||
"count": 85,
|
||||
"data": [
|
||||
{
|
||||
"id": "1",
|
||||
"name": "Sakuya",
|
||||
"audit": "1",
|
||||
"date": "2021-04-01 13:56:38",
|
||||
"yx": "81883387@qq.com",
|
||||
"progress": 89.5
|
||||
},
|
||||
{
|
||||
"id": "2",
|
||||
"name": "John Martinez",
|
||||
"audit": "1",
|
||||
"date": "2020-10-14 17:21:20",
|
||||
"yx": "k.luhkpev@zdgtfd.ma",
|
||||
"progress": 65.5
|
||||
},
|
||||
{
|
||||
"id": "3",
|
||||
"name": "Karen Miller",
|
||||
"audit": "0",
|
||||
"date": "2020-07-05 09:30:00",
|
||||
"yx": "h.hgvwmw@xjuf.pa",
|
||||
"progress": 65.5
|
||||
}
|
||||
],
|
||||
"message": ""
|
||||
}
|
||||
|
|
@ -26,6 +26,15 @@ const api = {
|
|||
get: async function(data){
|
||||
return await http.get(this.url, data);
|
||||
}
|
||||
},
|
||||
demolist: {
|
||||
list: {
|
||||
url: `${config.apiUrl}/json/list.json`,
|
||||
name: "列表数据",
|
||||
get: async function(data){
|
||||
return await http.get(this.url, data);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div class="scTable">
|
||||
<div class="scTable" ref="scTableMain" v-loading="loading">
|
||||
<div class="scTable-table">
|
||||
<el-table :data="tableData" ref="scTable" height="100%">
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="ID" prop="id" width="80"></el-table-column>
|
||||
<el-table-column label="显示名称" prop="name" width="200"></el-table-column>
|
||||
<el-table-column label="类型" prop="type"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="100">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_show(scope.row)" type="text" size="small">查看</el-button>
|
||||
<el-button @click="table_show(scope.row)" type="text" size="small">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table :data="tableData" ref="scTable" :height="tableHeight" stripe highlight-current-row
|
||||
@selection-change="selectionChange"
|
||||
>
|
||||
<slot></slot>
|
||||
<template #empty>
|
||||
<el-empty description="暂无数据" :image-size="100"></el-empty>
|
||||
</template>
|
||||
</el-table>
|
||||
</div>
|
||||
<div class="scTable-page">
|
||||
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="1000"></el-pagination>
|
||||
<el-pagination background :small="true" layout="total, prev, pager, next, jumper" :total="total" :page-size="pageSize" v-model:currentPage="currentPage" @current-change="reload"></el-pagination>
|
||||
<div>
|
||||
<el-button @click="refresh" icon="el-icon-refresh" circle style="margin-left:15px"></el-button>
|
||||
<el-button @click="setting" icon="el-icon-setting" circle style="margin-left:15px"></el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -23,28 +23,63 @@
|
|||
<script>
|
||||
export default {
|
||||
name: 'scTable',
|
||||
props: {},
|
||||
props: {
|
||||
apiObj: { type: Object, default: () => {} },
|
||||
//apiObj: { type: String, default: "" },
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData:[
|
||||
{
|
||||
id: 1,
|
||||
name: "sakuya",
|
||||
type: 1
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: "Ali",
|
||||
type: 21
|
||||
}
|
||||
]
|
||||
tableData: [],
|
||||
pageSize: 20,
|
||||
total: 0,
|
||||
currentPage: 1,
|
||||
loading: false,
|
||||
tableHeight:'100%'
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.$nextTick(() => {
|
||||
this.upTableHeight()
|
||||
})
|
||||
},
|
||||
mounted() {
|
||||
|
||||
this.getData();
|
||||
window.onresize = () => {
|
||||
this.upTableHeight()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
//更新表格高度
|
||||
upTableHeight(){
|
||||
this.tableHeight = (this.$refs.scTableMain.offsetHeight - 50 ) + "px"
|
||||
},
|
||||
//获取数据
|
||||
async getData(page=1){
|
||||
this.loading = true;
|
||||
var reqData = {
|
||||
page: page
|
||||
}
|
||||
var res = await this.apiObj.get(reqData);
|
||||
this.tableData = res.data;
|
||||
this.total = res.count;
|
||||
this.loading = false;
|
||||
},
|
||||
//分页点击
|
||||
reload(page){
|
||||
this.getData(page);
|
||||
},
|
||||
//刷新数据
|
||||
refresh(){
|
||||
this.getData(this.currentPage);
|
||||
},
|
||||
//表格设置
|
||||
setting(){
|
||||
|
||||
},
|
||||
//转发原装方法&事件
|
||||
selectionChange(selection){
|
||||
this.$emit('selection-change', selection)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -52,5 +87,5 @@
|
|||
<style scoped>
|
||||
.scTable {display:flex;flex-direction:column;height:100%;}
|
||||
.scTable-table {flex:1;}
|
||||
.scTable-page {height:50px;}
|
||||
.scTable-page {margin-top: 20px;height:50px;display: flex;align-items: center;justify-content: space-between;}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -96,5 +96,5 @@ a,button,input,textarea{-webkit-tap-highlight-color:rgba(0,0,0,0);box-sizing: bo
|
|||
.el-header {background: #fff;border-bottom: 1px solid #e6e6e6;padding:13px 15px;}
|
||||
.el-footer {background: #fff;border-top: 1px solid #e6e6e6;padding:13px 15px;}
|
||||
.el-main {padding:15px;}
|
||||
.el-pagination {margin-top: 20px;}
|
||||
.el-drawer__body {overflow: auto;}
|
||||
.el-popconfirm__main {margin: 14px 0;}
|
||||
|
|
|
|||
|
|
@ -1,15 +1,73 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<el-button type="primary" icon="el-icon-plus">新增</el-button>
|
||||
<el-button type="danger" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary" icon="el-icon-plus" @click="openDialog('add')">新增</el-button>
|
||||
<el-popconfirm :title="'确定删除选中的 '+selection.length+' 项吗？'" @confirm="batch_del">
|
||||
<template #reference>
|
||||
<el-button type="danger" plain icon="el-icon-delete" :disabled="selection.length==0"></el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</el-header>
|
||||
<el-main>
|
||||
<el-card shadow="never" class="scTable-card" body-style="height:100%">
|
||||
<scTable></scTable>
|
||||
<scTable ref="table" :apiObj="apiObj" @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" align="right" width="150"></el-table-column>
|
||||
<el-table-column label="状态" prop="audit" width="100"></el-table-column>
|
||||
<el-table-column label="加入时间" prop="date" min-width="300"></el-table-column>
|
||||
<el-table-column label="操作" fixed="right" width="120">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_show(scope.row, scope.$index)" type="text" size="small">查看</el-button>
|
||||
<el-button @click="table_edit(scope.row, scope.$index)" type="text" size="small">编辑</el-button>
|
||||
<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.$index)">
|
||||
<template #reference>
|
||||
<el-button type="text" size="small">删除</el-button>
|
||||
</template>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</el-card>
|
||||
</el-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 弹窗开始 -->
|
||||
<el-dialog :title="titleMap[dialogMode]" :width="400" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
||||
<el-form :model="form" :rules="rules" ref="dialogForm" label-width="80px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="邮箱" prop="yx">
|
||||
<el-input v-model="form.yx"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="进度" prop="progress">
|
||||
<el-slider v-model="form.progress"></el-slider>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态" prop="audit">
|
||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<template #footer>
|
||||
<el-button @click="closeDialog">取 消</el-button>
|
||||
<el-button v-if="dialogMode=='add'" type="primary" @click="submitForm()">创 建</el-button>
|
||||
<el-button v-if="dialogMode=='edit'" type="primary" @click="editForm()">保 存</el-button>
|
||||
</template>
|
||||
</el-dialog>
|
||||
<!-- 弹窗结束 -->
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -22,7 +80,101 @@
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
apiObj: this.$API.demo.demolist.list,
|
||||
selection: [],
|
||||
showDialog: false,
|
||||
dialogMode: "add",
|
||||
editIndex: null,
|
||||
titleMap: {
|
||||
add: "新增",
|
||||
edit: "编辑",
|
||||
show: "查看"
|
||||
},
|
||||
form: {
|
||||
name: "",
|
||||
audit: "1",
|
||||
yx: "",
|
||||
progress: 0
|
||||
},
|
||||
rules: {
|
||||
name: [
|
||||
{ required: true, message: '请输入名称' },
|
||||
],
|
||||
yx: [
|
||||
{ required: true, message: '请输入完整的邮箱地址' },
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
//行删除
|
||||
table_del(index){
|
||||
this.$refs.table.tableData.splice(index, 1);
|
||||
},
|
||||
//批量删除
|
||||
batch_del(){
|
||||
var _this = this;
|
||||
_this.selection.forEach(function (item) {
|
||||
_this.$refs.table.tableData.forEach(function (itemI, indexI) {
|
||||
if (item.id === itemI.id) {
|
||||
_this.$refs.table.tableData.splice(indexI, 1)
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
//关闭弹窗
|
||||
closeDialog(){
|
||||
this.showDialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dialogForm.resetFields();
|
||||
})
|
||||
},
|
||||
//打开弹窗
|
||||
openDialog(mode){
|
||||
this.dialogMode = mode;
|
||||
this.showDialog = true;
|
||||
},
|
||||
//新增提交
|
||||
submitForm(){
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
if (valid) {
|
||||
var newData = {
|
||||
...this.form,
|
||||
id: new Date().getTime(),
|
||||
date: "2021-04-30 13:57:00"
|
||||
}
|
||||
this.$refs.table.tableData.push(newData)
|
||||
this.closeDialog();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
//编辑
|
||||
table_edit(row, index){
|
||||
this.editIndex = index;
|
||||
this.openDialog('edit');
|
||||
this.$nextTick(() => {
|
||||
this.form = {...row}
|
||||
});
|
||||
},
|
||||
//编辑提交
|
||||
editForm(){
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
if (valid) {
|
||||
Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
|
||||
this.closeDialog();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -41,6 +41,7 @@
|
|||
<el-form ref="form" :model="form" label-width="80px" style="width: 460px;margin-top:20px;">
|
||||
<el-form-item label="账号">
|
||||
<el-input v-model="form.user" disabled></el-input>
|
||||
<div class="el-form-item-msg">账号信息用于登录，系统不允许修改</div>
|
||||
</el-form-item>
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
|
|
|
|||
Loading…
Reference in New Issue