This commit is contained in:
sakuya
parent
50566e73e4
commit
a5abbc578e
|
|
@ -55,22 +55,22 @@
|
|||
},
|
||||
"component": "template/blank"
|
||||
},
|
||||
{
|
||||
"path": "/template/normallist",
|
||||
"name": "normallist",
|
||||
"meta": {
|
||||
"title": "普通列表"
|
||||
},
|
||||
"component": "template/normallist"
|
||||
},
|
||||
{
|
||||
"path": "/template/list",
|
||||
"name": "list",
|
||||
"meta": {
|
||||
"title": "列表"
|
||||
"title": "普通列表"
|
||||
},
|
||||
"component": "template/list"
|
||||
},
|
||||
{
|
||||
"path": "/template/sideList",
|
||||
"name": "sideList",
|
||||
"meta": {
|
||||
"title": "分栏列表"
|
||||
},
|
||||
"component": "template/sideList"
|
||||
},
|
||||
{
|
||||
"path": "/template/show/:id",
|
||||
"name": "show",
|
||||
|
|
|
|||
|
|
@ -18,7 +18,8 @@ const T = {
|
|||
"axisLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
"color": "#999"
|
||||
"color": "#eee",
|
||||
"width": 1
|
||||
}
|
||||
},
|
||||
"axisTick": {
|
||||
|
|
@ -27,6 +28,11 @@ const T = {
|
|||
"color": "#333"
|
||||
}
|
||||
},
|
||||
"axisLabel": {
|
||||
"textStyle": {
|
||||
"color": "#999"
|
||||
}
|
||||
},
|
||||
"splitLine": {
|
||||
"show": true,
|
||||
"lineStyle": {
|
||||
|
|
|
|||
|
|
@ -14,3 +14,4 @@
|
|||
.el-main.nopadding {padding:0;background: #fff;}
|
||||
.el-drawer__body {overflow: auto;}
|
||||
.el-popconfirm__main {margin: 14px 0;}
|
||||
.el-card__header {border-bottom: 0}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
<component :is="allComps[element.com]" msg="demo"></component>
|
||||
<component :is="allComps[element.com]"></component>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -1,127 +1,245 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<div>
|
||||
<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary">默认按钮</el-button>
|
||||
<el-dropdown style="margin-left: 10px;">
|
||||
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<div class="left-panel">
|
||||
<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-dropdown>
|
||||
</el-popconfirm>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :data="tableData" row-key="name">
|
||||
<scTable ref="table" :apiObj="apiObj" @selection-change="selectionChange">
|
||||
<!-- 表格列开始 -->
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
|
||||
<el-table-column label="图标" width="80">
|
||||
<el-table-column label="序号" type="index" width="50"></el-table-column>
|
||||
<el-table-column label="头像" width="60">
|
||||
<template #default="scope">
|
||||
<i :class="scope.row.meta.icon"></i>
|
||||
<el-avatar size="small">{{ scope.row.name.substring(0,1) }}</el-avatar>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
|
||||
<el-table-column label="路由地址" prop="path" width="200">
|
||||
<el-table-column label="名称" prop="name" width="150"></el-table-column>
|
||||
<el-table-column label="进度" prop="progress" width="200">
|
||||
<template #default="scope">
|
||||
<el-tag>{{scope.row.path}}</el-tag>
|
||||
<el-progress :percentage="scope.row.progress" status="success"></el-progress>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
|
||||
<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
|
||||
<el-table-column label="邮箱" prop="yx" width="150"></el-table-column>
|
||||
<el-table-column label="状态" prop="audit" width="50">
|
||||
<template #default="scope">
|
||||
{{ scope.row.meta.hidden?"是":"否" }}
|
||||
<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">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
|
||||
<el-dropdown style="margin-left:10px;">
|
||||
<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
|
||||
<el-dropdown-item>更新数据</el-dropdown-item>
|
||||
<el-dropdown-item>转移</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
<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-dropdown>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
|
||||
<Show showid="我来自父组件"></Show>
|
||||
</el-drawer>
|
||||
|
||||
<!-- 弹窗开始 -->
|
||||
<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
||||
<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="yx">
|
||||
<el-input v-model="form.yx"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="进度" prop="progress">
|
||||
<el-input v-model.number="form.progress"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="audit">
|
||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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>
|
||||
import Show from './show.vue';
|
||||
|
||||
export default {
|
||||
name: 'list',
|
||||
components: {
|
||||
Show
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
search : {
|
||||
name: ""
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '状态',
|
||||
value: 'type',
|
||||
type: 'select',
|
||||
extend: {
|
||||
data:[
|
||||
{label: '桌面'},
|
||||
{label: '下载'},
|
||||
{label: '文档'},
|
||||
{label: '图片'},
|
||||
{label: '磁盘', id: 1, children:[
|
||||
{label: 'Windows (C)'},
|
||||
{label: '本地磁盘 (D)'},
|
||||
{label: '本地磁盘 (E)'}
|
||||
]}
|
||||
],
|
||||
tableData: [],
|
||||
drawer: false
|
||||
{
|
||||
label: "通过",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "1"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
var userInfo = await this.$API.user.info.get();
|
||||
this.tableData = userInfo.data.menuList;
|
||||
{
|
||||
label: '加入时间',
|
||||
value: 'date',
|
||||
type: 'daterange'
|
||||
}
|
||||
],
|
||||
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: '请输入完整的邮箱地址' },
|
||||
],
|
||||
progress: [
|
||||
{ required: true, message: '请输入进度' },
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data){
|
||||
console.log(data);
|
||||
//表格选择后回调事件
|
||||
selectionChange(selection){
|
||||
this.selection = selection;
|
||||
},
|
||||
table_show(row) {
|
||||
this.$router.push({
|
||||
path: '/template/show/' + row.meta.title
|
||||
//行删除
|
||||
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.unshift(newData)
|
||||
this.closeDialog();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
//编辑
|
||||
table_edit(row, index){
|
||||
this.editIndex = index;
|
||||
this.openDialog('edit');
|
||||
this.$nextTick(() => {
|
||||
this.form = {...row}
|
||||
});
|
||||
},
|
||||
table_edit(row) {
|
||||
console.log(row);
|
||||
this.drawer = true
|
||||
//编辑提交
|
||||
editForm(){
|
||||
this.$refs.dialogForm.validate((valid) => {
|
||||
if (valid) {
|
||||
Object.assign(this.$refs.table.tableData[this.editIndex], this.form)
|
||||
this.closeDialog();
|
||||
}else{
|
||||
return false;
|
||||
}
|
||||
})
|
||||
},
|
||||
//查看
|
||||
table_show(row){
|
||||
this.openDialog('show');
|
||||
this.$nextTick(() => {
|
||||
this.form = {...row}
|
||||
});
|
||||
},
|
||||
upsearch(){
|
||||
var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
|
||||
this.$refs.table.upData(data)
|
||||
},
|
||||
updata(val){
|
||||
var data = Object.assign({},this.search, val);
|
||||
this.$refs.table.upData(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,245 +0,0 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div class="left-panel">
|
||||
<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>
|
||||
</div>
|
||||
<div class="right-panel">
|
||||
<div class="right-panel-search">
|
||||
<el-input v-model="search.name" placeholder="请输入内容" clearable></el-input>
|
||||
<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
|
||||
</div>
|
||||
<scFilterBar ref="scFilterBar" :options="options" @change="updata"></scFilterBar>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :apiObj="apiObj" :params="{name:'demo',a:'1'}" @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">
|
||||
<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-main>
|
||||
</el-container>
|
||||
|
||||
<!-- 弹窗开始 -->
|
||||
<el-dialog :title="titleMap[dialogMode]" :width="600" v-model="showDialog" :before-close="closeDialog" append-to-body>
|
||||
<el-form :model="form" :rules="rules" :disabled="dialogMode=='show'" ref="dialogForm" label-width="80px" label-position="top">
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="form.name"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="邮箱" prop="yx">
|
||||
<el-input v-model="form.yx"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-row :gutter="20">
|
||||
<el-col :span="12">
|
||||
<el-form-item label="进度" prop="progress">
|
||||
<el-input v-model.number="form.progress"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="状态" prop="audit">
|
||||
<el-switch v-model="form.audit" active-value="1" inactive-value="0"></el-switch>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</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>
|
||||
export default {
|
||||
name: 'normallist',
|
||||
data() {
|
||||
return {
|
||||
search : {
|
||||
name: ""
|
||||
},
|
||||
options: [
|
||||
{
|
||||
label: '状态',
|
||||
value: 'type',
|
||||
type: 'select',
|
||||
extend: {
|
||||
data:[
|
||||
{
|
||||
label: "通过",
|
||||
value: "0"
|
||||
},
|
||||
{
|
||||
label: "失败",
|
||||
value: "1"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
{
|
||||
label: '加入时间',
|
||||
value: 'date',
|
||||
type: 'daterange'
|
||||
}
|
||||
],
|
||||
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: '请输入完整的邮箱地址' },
|
||||
],
|
||||
progress: [
|
||||
{ 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.unshift(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;
|
||||
}
|
||||
})
|
||||
},
|
||||
//查看
|
||||
table_show(row){
|
||||
this.openDialog('show');
|
||||
this.$nextTick(() => {
|
||||
this.form = {...row}
|
||||
});
|
||||
},
|
||||
upsearch(){
|
||||
var data = Object.assign({}, this.search, this.$refs.scFilterBar.getFilter());
|
||||
this.$refs.table.upData(data)
|
||||
},
|
||||
updata(val){
|
||||
var data = Object.assign({},this.search, val);
|
||||
this.$refs.table.upData(data)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<el-container>
|
||||
<el-aside width="200px">
|
||||
<div>
|
||||
<el-tree node-key="id" :data="data" :default-expanded-keys="[1]" :highlight-current="true" :expand-on-click-node="false" :show-checkbox="true" @node-click="handleNodeClick"></el-tree>
|
||||
</div>
|
||||
</el-aside>
|
||||
<el-container>
|
||||
<el-header>
|
||||
<div>
|
||||
<el-button type="primary" icon="el-icon-plus"></el-button>
|
||||
<el-button type="primary" icon="el-icon-delete"></el-button>
|
||||
<el-button type="primary">默认按钮</el-button>
|
||||
<el-dropdown style="margin-left: 10px;">
|
||||
<el-button type="primary" plain icon="el-icon-arrow-down"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item>黄金糕</el-dropdown-item>
|
||||
<el-dropdown-item>狮子头</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</div>
|
||||
</el-header>
|
||||
<el-main class="nopadding">
|
||||
<scTable ref="table" :data="tableData" row-key="name">
|
||||
<!-- 表格列开始 -->
|
||||
<el-table-column type="selection" width="50"></el-table-column>
|
||||
<el-table-column label="显示名称" prop="meta.title" width="200"></el-table-column>
|
||||
<el-table-column label="图标" width="80">
|
||||
<template #default="scope">
|
||||
<i :class="scope.row.meta.icon"></i>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由名称" prop="name" width="100"></el-table-column>
|
||||
<el-table-column label="路由地址" prop="path" width="200">
|
||||
<template #default="scope">
|
||||
<el-tag>{{scope.row.path}}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="路由组件" prop="component" width="100"></el-table-column>
|
||||
<el-table-column label="是否隐藏" prop="meta.hidden" width="100">
|
||||
<template #default="scope">
|
||||
{{ scope.row.meta.hidden?"是":"否" }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
|
||||
<el-table-column label="操作" fixed="right" align="right" width="140">
|
||||
<template #default="scope">
|
||||
<el-button @click="table_edit(scope.row)" type="text" size="mini">编辑</el-button>
|
||||
<el-dropdown style="margin-left:10px;">
|
||||
<el-button size="mini" type="primary" plain icon="el-icon-arrow-down"></el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="table_show(scope.row)">查看</el-dropdown-item>
|
||||
<el-dropdown-item>更新数据</el-dropdown-item>
|
||||
<el-dropdown-item>转移</el-dropdown-item>
|
||||
<el-dropdown-item>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- 表格列结束 -->
|
||||
</scTable>
|
||||
</el-main>
|
||||
</el-container>
|
||||
</el-container>
|
||||
|
||||
<el-drawer title="我是标题" v-model="drawer" :size="800" :append-to-body="true" direction="rtl" destroy-on-close>
|
||||
<Show showid="我来自父组件"></Show>
|
||||
</el-drawer>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Show from './show.vue';
|
||||
|
||||
export default {
|
||||
name: 'sideList',
|
||||
components: {
|
||||
Show
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
data: [
|
||||
{label: '桌面'},
|
||||
{label: '下载'},
|
||||
{label: '文档'},
|
||||
{label: '图片'},
|
||||
{label: '磁盘', id: 1, children:[
|
||||
{label: 'Windows (C)'},
|
||||
{label: '本地磁盘 (D)'},
|
||||
{label: '本地磁盘 (E)'}
|
||||
]}
|
||||
],
|
||||
tableData: [],
|
||||
drawer: false
|
||||
}
|
||||
},
|
||||
async created() {
|
||||
var userInfo = await this.$API.user.info.get();
|
||||
this.tableData = userInfo.data.menuList;
|
||||
},
|
||||
mounted(){
|
||||
|
||||
},
|
||||
methods: {
|
||||
handleNodeClick(data){
|
||||
console.log(data);
|
||||
},
|
||||
table_show(row) {
|
||||
this.$router.push({
|
||||
path: '/template/show/' + row.meta.title
|
||||
});
|
||||
},
|
||||
table_edit(row) {
|
||||
console.log(row);
|
||||
this.drawer = true
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
Loading…
Reference in New Issue