update
This commit is contained in:
Pan
@@ -3,8 +3,8 @@ import Vue from 'vue'
|
||||
// Flattened array
|
||||
export default function treeToArray(data, children = 'children') {
|
||||
let tmp = []
|
||||
data.forEach((item, idx) => {
|
||||
Vue.set(item, '_index', idx)
|
||||
data.forEach((item, index) => {
|
||||
Vue.set(item, '_index', index)
|
||||
tmp.push(item)
|
||||
if (item[children] && item[children].length > 0) {
|
||||
const res = treeToArray(item[children], children)
|
||||
@@ -14,8 +14,10 @@ export default function treeToArray(data, children = 'children') {
|
||||
return tmp
|
||||
}
|
||||
|
||||
export function addAttrs(data, { parent = null, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
|
||||
data.forEach(item => {
|
||||
export function addAttrs(data, { parent = null, preIndex = false, level = 0, expand = false, children = 'children', show = true, select = false } = {}) {
|
||||
data.forEach((item, index) => {
|
||||
const _id = (preIndex ? `${preIndex}-${index}` : index) + ''
|
||||
Vue.set(item, '_id', _id)
|
||||
Vue.set(item, '_level', level)
|
||||
Vue.set(item, '_expand', expand)
|
||||
Vue.set(item, '_parent', parent)
|
||||
@@ -26,6 +28,7 @@ export function addAttrs(data, { parent = null, level = 0, expand = false, child
|
||||
parent: item,
|
||||
level: level + 1,
|
||||
expand,
|
||||
preIndex: _id,
|
||||
children,
|
||||
status,
|
||||
select
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
<template>
|
||||
<el-table :data="tableData" :row-style="showRow" v-bind="$attrs">
|
||||
<slot name="selection" />
|
||||
<slot name="pre-column" />
|
||||
<el-table-column
|
||||
v-for="item in columns"
|
||||
:label="item.label"
|
||||
@@ -90,22 +91,47 @@ export default {
|
||||
return
|
||||
}
|
||||
console.log('render')
|
||||
if (this.guard > 0) {
|
||||
addAttrs(val, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
this.guard--
|
||||
}
|
||||
// if (this.guard > 0) {
|
||||
addAttrs(val, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
this.guard--
|
||||
// }
|
||||
|
||||
const retval = treeToArray(val, this.defaultChildren)
|
||||
this.tableData = retval
|
||||
console.log(retval)
|
||||
},
|
||||
// deep: true,
|
||||
deep: true,
|
||||
immediate: true
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addBrother(row, data) {
|
||||
if (row._parent) {
|
||||
row._parent.children.push(data)
|
||||
} else {
|
||||
this.data.push(data)
|
||||
}
|
||||
},
|
||||
addChild(row, data) {
|
||||
if (!row.children) {
|
||||
this.$set(row, 'children', [])
|
||||
}
|
||||
row.children.push(data)
|
||||
},
|
||||
delete(row) {
|
||||
const { _index, _parent } = row
|
||||
if (_parent) {
|
||||
_parent.children.splice(_index, 1)
|
||||
} else {
|
||||
this.data.splice(_index, 1)
|
||||
}
|
||||
},
|
||||
getData() {
|
||||
return this.tableData
|
||||
},
|
||||
showRow: function({ row }) {
|
||||
const parent = row._parent
|
||||
const show = parent ? parent._expand && parent._show : true
|
||||
|
||||
@@ -7,26 +7,31 @@
|
||||
target="_blank"
|
||||
>Documentation</a>
|
||||
</el-tag>
|
||||
<TreeTable
|
||||
:data="menus"
|
||||
|
||||
<tree-table
|
||||
ref="TreeTable"
|
||||
:data="tableData"
|
||||
:default-expand-all="true"
|
||||
:columns="columns"
|
||||
border
|
||||
default-children="sub_button"
|
||||
default-children="children"
|
||||
>
|
||||
|
||||
<template slot="selection">
|
||||
<el-table-column type="selection" width="55"/>
|
||||
<el-table-column type="selection" align="center" width="55"/>
|
||||
</template>
|
||||
<template slot="__expand">
|
||||
|
||||
<template slot="pre-column">
|
||||
<el-table-column type="expand" width="55">
|
||||
<template>
|
||||
<el-tag type="info">
|
||||
支持element-ui 的扩展和多选框事件哦
|
||||
Here is just a placeholder slot, you can display anything.
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</template>
|
||||
<template slot="name" slot-scope="{scope}">
|
||||
|
||||
<!-- <template slot="name" slot-scope="{scope}">
|
||||
<span :style="{'padding-left':+scope.row.__level*50 + 'px'} ">
|
||||
<a
|
||||
v-if="scope.row.type === 'view'"
|
||||
@@ -35,85 +40,65 @@
|
||||
>{{ scope.row.name }}</a>
|
||||
<span v-else>{{ scope.row.name }}</span>
|
||||
</span>
|
||||
</template>
|
||||
<template slot="__opt_parent" slot-scope="{scope}">
|
||||
</template> -->
|
||||
<template slot="append" slot-scope="{scope}">
|
||||
<el-button
|
||||
v-if="scope.row.__level === 0"
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="addMenuItem(defaultMenu,1,scope.row.__index)"
|
||||
>添加子菜单</el-button>
|
||||
@click="addMenuItem(scope.row,'brother',scope)"
|
||||
>Append Brother
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="primary"
|
||||
@click="addMenuItem(scope.row,'children')"
|
||||
>Append Child
|
||||
</el-button>
|
||||
</template>
|
||||
<template slot="__opt" slot-scope="{scope}">
|
||||
<el-button size="mini" type="primary" @click="editMenuItem(scope.row,'update')">编辑</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteMenuItem(scope.row)">删除</el-button>
|
||||
<template slot="operation" slot-scope="{scope}">
|
||||
<el-button size="mini" type="success" @click="editItem(scope.row)">Edit</el-button>
|
||||
<el-button size="mini" type="danger" @click="deleteItem(scope.row)">Delete</el-button>
|
||||
</template>
|
||||
</TreeTable>
|
||||
</tree-table>
|
||||
</div>
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="编辑菜单">
|
||||
<el-form ref="menuForm" :model="menu" :rules="rules" label-width="100px" style="width:600px">
|
||||
<el-form-item label="type">
|
||||
<el-select v-model="menu.type" clearable placeholder="请选择">
|
||||
<el-option label="view" value="view"/>
|
||||
<el-option label="click" value="click"/>
|
||||
<el-option label="miniprogram" value="miniprogram"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<template v-if="menu.type==='click'">
|
||||
<el-form-item label="key">
|
||||
<el-input v-model.trim="menu.key" placeholder="请输入key"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-form-item label="url">
|
||||
<el-input v-model.trim="menu.url" placeholder="请输入url"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
<el-form-item label="名称">
|
||||
<el-input v-model.trim="menu.name" placeholder="请输入name"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="appid">
|
||||
<el-input v-model.trim="menu.appid" placeholder="请输入appid"/>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="clickToUpsertMenuItem('menuForm')">确定</el-button>
|
||||
|
||||
<el-dialog :visible.sync="dialogFormVisible" title="Edit">
|
||||
<el-form :model="tempItem" label-width="100px" style="width:600px">
|
||||
<el-form-item label="Name">
|
||||
<el-input v-model.trim="tempItem.name" placeholder="Name"/>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="dialogFormVisible = false">Cancel</el-button>
|
||||
<el-button type="primary" @click="updateItem">Confirm</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
const defaultMenu = {
|
||||
name: undefined,
|
||||
appid: Math.random() * 10000,
|
||||
key: undefined,
|
||||
page_path: undefined,
|
||||
type: undefined,
|
||||
url: undefined
|
||||
}
|
||||
|
||||
import TreeTable from '@/components/TreeTable'
|
||||
import { data } from './data.js'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
TreeTable
|
||||
},
|
||||
components: { TreeTable },
|
||||
data() {
|
||||
return {
|
||||
defaultMenu,
|
||||
menus: [],
|
||||
menu: { ...defaultMenu },
|
||||
rules: {},
|
||||
tableData: [],
|
||||
tempItem: {},
|
||||
dialogFormVisible: false,
|
||||
columns: [
|
||||
// {
|
||||
// label: '',
|
||||
// // key: '__sperad'
|
||||
|
||||
// },
|
||||
{
|
||||
label: '',
|
||||
key: '__sperad'
|
||||
},
|
||||
{
|
||||
label: 'name',
|
||||
key: 'name'
|
||||
label: 'Name',
|
||||
key: 'name',
|
||||
expand: true
|
||||
},
|
||||
{
|
||||
label: 'type',
|
||||
@@ -128,123 +113,60 @@ export default {
|
||||
key: 'key'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
key: '__opt_parent'
|
||||
label: 'Append',
|
||||
key: 'append'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
key: '__opt',
|
||||
label: 'Operation',
|
||||
key: 'operation',
|
||||
width: '160px'
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
canAddMenuItem() {
|
||||
return this.menus.length < 3
|
||||
}
|
||||
|
||||
},
|
||||
created() {
|
||||
this.getWechatMenu()
|
||||
this.getData()
|
||||
},
|
||||
methods: {
|
||||
getWechatMenu() {
|
||||
this.menus = data.button
|
||||
getData() {
|
||||
this.tableData = data
|
||||
},
|
||||
// 如果你想对原来的数据进行更新的化
|
||||
updateMenu() {
|
||||
const button = JSON.parse(
|
||||
JSON.stringify(this.menus, [
|
||||
'name',
|
||||
'type',
|
||||
'appid',
|
||||
'url',
|
||||
'key',
|
||||
'media_id',
|
||||
'page_path',
|
||||
'sub_button'
|
||||
])
|
||||
)
|
||||
// 更新数据
|
||||
console.log('button', button)
|
||||
// upsertWechatMenu({ button }).then(() => {
|
||||
// this.$message.success('更新成功')
|
||||
// })
|
||||
},
|
||||
clickToUpsertMenuItem(formName) {
|
||||
this.$refs[formName].validate(valid => {
|
||||
if (valid) {
|
||||
this.updateMenuItem(this.menu)
|
||||
this.dialogFormVisible = false
|
||||
} else {
|
||||
console.log('error submit!!')
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
editMenuItem(menuItem) {
|
||||
editItem(row) {
|
||||
this.tempItem = Object.assign({}, row)
|
||||
this.dialogFormVisible = true
|
||||
this.menu = { ...menuItem }
|
||||
},
|
||||
// 增加单条数据，需要将其属性也手动添加上
|
||||
// 都是纯手动添加，后续会添加个方法
|
||||
addMenuItem(menuItem, level, index) {
|
||||
if (level === 0) {
|
||||
this.menus.push({
|
||||
...menuItem,
|
||||
sub_button: [],
|
||||
__level: 0,
|
||||
__expand: true,
|
||||
__parent: null,
|
||||
__show: true,
|
||||
__select: false
|
||||
})
|
||||
updateItem() {
|
||||
const data = this.$refs.TreeTable.getData()
|
||||
const { _id } = this.tempItem
|
||||
|
||||
let index
|
||||
for (let i = 0; i < data.length; i++) {
|
||||
if (data[i]._id === _id) {
|
||||
index = i
|
||||
break
|
||||
}
|
||||
}
|
||||
if (level === 1) {
|
||||
this.menus[index]['sub_button'].push({
|
||||
...menuItem,
|
||||
__level: 1,
|
||||
__expand: true,
|
||||
__parent: this.menus[index],
|
||||
__show: true,
|
||||
__select: false
|
||||
})
|
||||
|
||||
data.splice(index, 1, Object.assign({}, this.tempItem))
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
addMenuItem(row, type, a) {
|
||||
if (type === 'children') {
|
||||
this.$refs.TreeTable.addChild(row, { name: 'child' })
|
||||
}
|
||||
|
||||
if (type === 'brother') {
|
||||
this.$refs.TreeTable.addBrother(row, { name: 'brother' })
|
||||
}
|
||||
},
|
||||
deleteMenuItem(menuItem) {
|
||||
if (menuItem.__level === 0) {
|
||||
this.menus.splice(menuItem.__index, 1)
|
||||
}
|
||||
if (menuItem.__level === 1) {
|
||||
this.menus[menuItem.__parent.__index]['sub_button'].splice(
|
||||
menuItem.__index,
|
||||
1
|
||||
)
|
||||
}
|
||||
deleteItem(row) {
|
||||
this.$refs.TreeTable.delete(row)
|
||||
},
|
||||
updateMenuItem(menuItem) {
|
||||
if (menuItem.type === 'view') {
|
||||
if (!menuItem.url) {
|
||||
this.$message.error('请输入url')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (menuItem.type === 'click') {
|
||||
if (!menuItem.key) {
|
||||
this.$message.error('请输入key')
|
||||
return
|
||||
}
|
||||
}
|
||||
if (menuItem.__level === 0) {
|
||||
this.menus.splice(menuItem.__index, 1, menuItem)
|
||||
}
|
||||
if (menuItem.__level === 1) {
|
||||
this.menus[menuItem.__parent.__index]['sub_button'].splice(
|
||||
menuItem.__index,
|
||||
1,
|
||||
menuItem
|
||||
)
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,87 +1,31 @@
|
||||
export const data = {
|
||||
button: [
|
||||
{
|
||||
type: '',
|
||||
name: '账号绑定',
|
||||
key: '',
|
||||
url: '',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: [
|
||||
{
|
||||
type: 'view',
|
||||
name: '推送开关',
|
||||
key: '',
|
||||
url: 'https://activity.wallstreetcn.com/wechat-notice/#/',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
},
|
||||
{
|
||||
type: 'view',
|
||||
name: '绑定账号',
|
||||
key: '',
|
||||
url: 'https://m.wallstreetcn.com/bind/wechat',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: '',
|
||||
name: '兑礼品卡',
|
||||
key: '',
|
||||
url: '',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: [
|
||||
{
|
||||
type: 'view',
|
||||
name: '兑礼品卡',
|
||||
key: '',
|
||||
url: 'https://activity.wallstreetcn.com/giftredemption/?from=hrjsxk',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
},
|
||||
{
|
||||
type: 'view',
|
||||
name: '下载APP',
|
||||
key: '',
|
||||
url:
|
||||
'https://activity.wallstreetcn.com/newpackaget/receive.html?ngsem=111',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
},
|
||||
{
|
||||
type: 'view',
|
||||
name: '在线客服',
|
||||
key: '',
|
||||
url: 'https://wdl.wallstreetcn.com/WechatIMG26.jpeg',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
type: 'view',
|
||||
name: '关注我',
|
||||
key: '',
|
||||
url: 'https://liugq5713.github.io',
|
||||
media_id: '',
|
||||
appid: '',
|
||||
page_path: '',
|
||||
sub_button: []
|
||||
}
|
||||
]
|
||||
}
|
||||
export const data = [
|
||||
{
|
||||
name: '1',
|
||||
children: [
|
||||
{
|
||||
name: '1-1'
|
||||
},
|
||||
{
|
||||
name: '1-2'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
children: [
|
||||
{
|
||||
name: '2-1'
|
||||
},
|
||||
{
|
||||
name: '2-2'
|
||||
},
|
||||
{
|
||||
name: '2-3'
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '3'
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
Reference in New Issue
Block a user