Merge branch 'master' of github.com:Liugq5713/vue-element-admin
This commit is contained in:
liugq
commit
c687a3f329
|
|
@ -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">
|
||||
<el-table :data="tableData" :row-style="showRow" v-bind="$attrs" v-on="$listeners" >
|
||||
<slot name="selection" />
|
||||
<slot name="pre-column" />
|
||||
<el-table-column
|
||||
v-for="item in columns"
|
||||
:label="item.label"
|
||||
|
|
@ -11,7 +12,7 @@
|
|||
<template slot-scope="scope">
|
||||
<slot :scope="scope" :name="item.key">
|
||||
<template v-if="item.expand">
|
||||
<span :style="{'padding-left':+scope.row._level*spreadOffset + 'px'} "/>
|
||||
<span :style="{'padding-left':+scope.row._level*indent + 'px'} "/>
|
||||
<span v-show="showSperadIcon(scope.row)" class="tree-ctrl" @click="toggleExpanded(scope.$index)">
|
||||
<i v-if="!scope.row._expand" class="el-icon-plus" />
|
||||
<i v-else class="el-icon-minus" />
|
||||
|
|
@ -20,13 +21,13 @@
|
|||
<template v-if="item.checkbox">
|
||||
<el-checkbox
|
||||
v-if="scope.row[defaultChildren]&&scope.row[defaultChildren].length>0"
|
||||
:style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
|
||||
:style="{'padding-left':+scope.row._level*indent + 'px'} "
|
||||
:indeterminate="scope.row._select"
|
||||
v-model="scope.row._select"
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
<el-checkbox
|
||||
v-else
|
||||
:style="{'padding-left':+scope.row._level*checkboxOffset + 'px'} "
|
||||
:style="{'padding-left':+scope.row._level*indent + 'px'} "
|
||||
v-model="scope.row._select"
|
||||
@change="handleCheckAllChange(scope.row)" />
|
||||
</template>
|
||||
|
|
@ -52,7 +53,6 @@ export default {
|
|||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
/* eslint-enable */
|
||||
defaultExpandAll: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
|
|
@ -61,51 +61,59 @@ export default {
|
|||
type: String,
|
||||
default: 'children'
|
||||
},
|
||||
spreadOffset: {
|
||||
type: Number,
|
||||
default: 50
|
||||
},
|
||||
checkboxOffset: {
|
||||
indent: {
|
||||
type: Number,
|
||||
default: 50
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tableData: [],
|
||||
guard: 1
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
children() {
|
||||
return this.defaultChildren
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
data: {
|
||||
// deep watch，监听树表的数据的增删，如果仅仅是展示，可以不用deep watch
|
||||
handler(val) {
|
||||
if (val.length === 0) {
|
||||
this.tableData = []
|
||||
return
|
||||
}
|
||||
console.log('render')
|
||||
if (this.guard > 0) {
|
||||
addAttrs(val, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
this.guard--
|
||||
}
|
||||
},
|
||||
tableData() {
|
||||
const data = this.data
|
||||
if (this.data.length === 0) {
|
||||
return []
|
||||
}
|
||||
addAttrs(data, {
|
||||
expand: this.defaultExpandAll,
|
||||
children: this.defaultChildren
|
||||
})
|
||||
|
||||
const retval = treeToArray(val, this.defaultChildren)
|
||||
this.tableData = retval
|
||||
},
|
||||
// deep: true,
|
||||
immediate: true
|
||||
const retval = treeToArray(data, this.defaultChildren)
|
||||
return retval
|
||||
}
|
||||
},
|
||||
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,244 +7,158 @@
|
|||
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"
|
||||
@selection-change ="selectChange"
|
||||
>
|
||||
|
||||
<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}">
|
||||
<span :style="{'padding-left':+scope.row.__level*50 + 'px'} ">
|
||||
<a
|
||||
v-if="scope.row.type === 'view'"
|
||||
:href="scope.row.url"
|
||||
class="link-type"
|
||||
>{{ scope.row.name }}</a>
|
||||
<span v-else>{{ scope.row.name }}</span>
|
||||
</span>
|
||||
|
||||
<template slot="timeline" slot-scope="{scope}">
|
||||
|
||||
<el-tooltip :content="scope.row.timeLine+'ms'" effect="dark" placement="left">
|
||||
<div class="processContainer">
|
||||
<div
|
||||
:style="{ width:(scope.row.timeLine||0) * 3+'px',
|
||||
background:scope.row.timeLine>50?'rgba(233,0,0,.5)':'rgba(0,0,233,0.5)',
|
||||
marginLeft:scope.row._level * 50+'px' }"
|
||||
class="process">
|
||||
<span style="display:inline-block"/>
|
||||
</div>
|
||||
</div>
|
||||
</el-tooltip>
|
||||
|
||||
</template>
|
||||
<template slot="__opt_parent" slot-scope="{scope}">
|
||||
|
||||
<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')"
|
||||
>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: 'Name',
|
||||
key: 'name',
|
||||
expand: true
|
||||
},
|
||||
{
|
||||
label: 'name',
|
||||
key: 'name'
|
||||
label: 'Timeline',
|
||||
key: 'timeline'
|
||||
},
|
||||
{
|
||||
label: 'type',
|
||||
key: 'type'
|
||||
label: 'Append',
|
||||
key: 'append',
|
||||
width: 300
|
||||
},
|
||||
{
|
||||
label: 'appid',
|
||||
key: 'appid'
|
||||
},
|
||||
{
|
||||
label: 'key',
|
||||
key: 'key'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
key: '__opt_parent'
|
||||
},
|
||||
{
|
||||
label: '操作',
|
||||
key: '__opt',
|
||||
width: '160px'
|
||||
label: 'Operation',
|
||||
key: 'operation',
|
||||
width: 160
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
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
|
||||
})
|
||||
}
|
||||
if (level === 1) {
|
||||
this.menus[index]['sub_button'].push({
|
||||
...menuItem,
|
||||
__level: 1,
|
||||
__expand: true,
|
||||
__parent: this.menus[index],
|
||||
__show: true,
|
||||
__select: false
|
||||
})
|
||||
}
|
||||
},
|
||||
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
|
||||
)
|
||||
}
|
||||
},
|
||||
updateMenuItem(menuItem) {
|
||||
if (menuItem.type === 'view') {
|
||||
if (!menuItem.url) {
|
||||
this.$message.error('请输入url')
|
||||
return
|
||||
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 (menuItem.type === 'click') {
|
||||
if (!menuItem.key) {
|
||||
this.$message.error('请输入key')
|
||||
return
|
||||
}
|
||||
|
||||
data.splice(index, 1, Object.assign({}, this.tempItem))
|
||||
this.dialogFormVisible = false
|
||||
},
|
||||
addMenuItem(row, type) {
|
||||
if (type === 'children') {
|
||||
this.$refs.TreeTable.addChild(row, { name: 'child' })
|
||||
}
|
||||
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
|
||||
)
|
||||
|
||||
if (type === 'brother') {
|
||||
this.$refs.TreeTable.addBrother(row, { name: 'brother' })
|
||||
}
|
||||
},
|
||||
deleteItem(row) {
|
||||
this.$refs.TreeTable.delete(row)
|
||||
},
|
||||
selectChange(val) {
|
||||
console.log(val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,87 +1,49 @@
|
|||
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',
|
||||
timeLine: 100,
|
||||
children: [
|
||||
{
|
||||
name: '1-1',
|
||||
timeLine: 20
|
||||
},
|
||||
{
|
||||
name: '1-2',
|
||||
timeLine: 60,
|
||||
children: [
|
||||
{
|
||||
name: '1-2-1',
|
||||
timeLine: 35
|
||||
},
|
||||
{
|
||||
name: '1-2-2',
|
||||
timeLine: 25
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '2',
|
||||
timeLine: 80,
|
||||
children: [
|
||||
{
|
||||
name: '2-1',
|
||||
timeLine: 30
|
||||
},
|
||||
{
|
||||
name: '2-2',
|
||||
timeLine: 50
|
||||
},
|
||||
{
|
||||
name: '2-3',
|
||||
timeLine: 60
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
name: '3',
|
||||
timeLine: 40
|
||||
}
|
||||
]
|
||||
|
||||
|
|
|
|||
|
|
@ -8,7 +8,7 @@
|
|||
</el-button>
|
||||
|
||||
<div class="option-item">
|
||||
<el-tag>默认展开所有</el-tag>
|
||||
<el-tag>Expand All</el-tag>
|
||||
<el-switch
|
||||
v-model="defaultExpandAll"
|
||||
active-color="#13ce66"
|
||||
|
|
@ -17,7 +17,7 @@
|
|||
</div>
|
||||
|
||||
<div class="option-item">
|
||||
<el-tag>显示Checkbox</el-tag>
|
||||
<el-tag>Show Checkbox</el-tag>
|
||||
<el-switch
|
||||
v-model="showCheckbox"
|
||||
active-color="#13ce66"
|
||||
|
|
|
|||
Loading…
Reference in New Issue