用iview做树形控件功能

<template>
    <div class="menu">
        <div class="add">
            <Button type="primary" size="small" @click="addMenu">创建一级菜单</Button>
        </div>
        <Tree :data="dataTree" :render="renderContent"></Tree>
        <!--新增/修改-->
        <Modal
            v-model="isVisibleModal"
            footer-hide
            :title="modelTitle"
            class-name="vertical-center-modal"
        >
            <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="120">
                <Row type="flex"  class="code-row-bg">
                    <Col span="19">
                        <FormItem label="排序:">
                            <InputNumber :min= "0" v-model="formValidate.position"></InputNumber>
                        </FormItem>
                    </Col>
                    <!-- <Col>
                        <sac-input v-model="formValidate.content"  label="币种详细介绍"   type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}" prop="content">
                        </sac-input>
                    </Col> -->
                    <Col span="19">
                        <sac-input v-model="formValidate.requestUrl"  label="接口url"  prop="requestUrl"></sac-input>
                    </Col>
                    <Col span="19">
                        <sac-input v-model="formValidate.name"  label="功能名称"  prop="name"></sac-input>
                    </Col>
                    <Col span="19">
                        <sac-input v-model="formValidate.menuUrl"  label="页面路由"  prop="menuUrl"></sac-input>
                    </Col>
                    <Col span="19">
                        <sac-input v-model="formValidate.desctext"  label="描述"   type="textarea"
                            :autosize="{minRows: 2,maxRows: 5}" prop="desctext">
                        </sac-input>
                    </Col>
                    <!-- <FormItem label="接口url:" prop="requestUrl">
                        <Input v-model="formValidate.requestUrl" placeholder="请输入接口url"></Input>
                    </FormItem>
                    <FormItem label="功能名称:" prop="name">
                        <Input v-model="formValidate.name" placeholder="请输入功能名称"></Input>
                    </FormItem>
                    <FormItem label="页面路由:">
                        <Input v-model="formValidate.menuUrl" placeholder="请输入页面路由"></Input>
                    </FormItem> -->
                    
                    <FormItem>
                        <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
                    </FormItem>
                </Row>
            </Form>
        </Modal>
    </div>
</template>
<script>
  export default {
    name: "menuName",
    data() {
      return {
        isAdd:false,
        modelTitle:'',
        isVisibleModal: false,
        formValidate: {
          id:'',
          position: 0,
          requestUrl: '',
          name: '',
          menuUrl: '',
          desctext:'',
          parentId:'',//一级菜单填0
        },
        ruleValidate: {
          requestUrl: [
            { required: true, message: '请输入接口url', trigger: 'blur' }
          ],
          name: [
            { required: true, message: '请输入功能名称', trigger: 'blur' }
          ]
        },
        dataTree: [],
      };
    },
    methods: {
        renderContent(h, { root, node, data }) {
            return h('span', {
                style: {
                    display: 'inline-block',
                    width: '100%'
                }
            }, [
                h('span', {
                    style: {
                    display: 'inline-block',
                    width:'50%'
                    
                    }
                },
                [
                    h('Icon', {
                        props: {
                            type: 'ios-folder-outline'
                        },
                        style: {
                            marginRight: '8px',
                            
                        }
                    }),
                    h('span', {
                        style: {
                            fontSize: '16px'/* ,
                            display:inline-block,
                            minWidth:'200px', */
                        }
                    },data.name)
                ]),
                /* h('span', {
                    style: {
                    fontSize: '16px'
                    }
                }, data.title), */
                h('span', {
                    style: {
                    display: 'inline-block',
                    //marginLeft: '120px',
                    color: '#409eff'
                    }
                }, [
                    h('span', {
                    style: {
                        marginRight: '15px',
                        cursor: 'pointer'
                    },
                    on: {
                        click: () => {
                        this.append(data)
                        }
                    }
                    }, '新增'),
                    h('span', {
                    style: {
                        marginRight: '15px',
                        cursor: 'pointer'
                    },
                    on: {
                        click: () => {
                        this.modify(root, node, data)
                        }
                    }
                    }, '修改'),
                    h('span', {
                    style: {
                        cursor: 'pointer'
                    },
                    on: {
                        click: () => {
                        this.remove(root, node, data)
                        }
                    }
                    }, '删除')
                ])
            ]);
        },
        append(data) {
            console.log(data)
            this.isAdd=true
            this.modelTitle='新增子菜单'
           
            this.$refs.formValidate.resetFields();
            this.formValidate.parentId=data.id
          
            
            this.isVisibleModal = true;
        },
        //修改菜单
        modify(root, node, data) {
            console.log(1111)
            console.log(data)
             this.$refs.formValidate.resetFields();
            this.isAdd=false
            this.modelTitle='编辑菜单';
          // debugger
       
            this.formValidate.position=data.position
            this.formValidate.id=data.id
            this.formValidate.parentId=data.parentId
            this.formValidate.desctext=data.desctext
            this.formValidate.name=data.name
            this.formValidate.menuUrl=data.menuUrl
            this.formValidate.requestUrl=data.requestUrl
            console.log(this.formValidate)
                 this.isVisibleModal = true;

        },
        remove(root, node, data) {
            if(node.children.length>0){
                this.$Notice.error({
                    title: '请先删除子菜单'
                });
                return false
            }
            this.$Modal.confirm({
                title: `提示 :`,
                content: `<p>是否删除菜单名为 ${data.name} 的菜单?</p>`,
                loading: true,
                onOk: () => {
                    const postData = {
                        id: data.id
                    };
                    this.$http.get("/privilege/deleteSysUrl", postData).then(res => {
                        this.$Notice.success({
                            title: `删除${data.name}菜单成功`
                        });
                        this.getData();
                        this.$Modal.remove();
                    });
                }
            });
       
            // const parentKey = root.find(el => el === node).parent;
            // const parent = root.find(el => el.nodeKey === parentKey).node;
            // const index = parent.children.indexOf(data);
            // parent.children.splice(index, 1);
        },
        //新增一级菜单
        addMenu() {
            this.isAdd=true
            this.modelTitle='新增一级菜单'
            this.isVisibleModal = true;
            this.$refs.formValidate.resetFields();
            this.formValidate.id=''
            this.formValidate.parentId=0
        },
        handleSubmit() {
            console.log(this.formValidate)
            /* alert(this.formValidate.id) */
            this.$refs.formValidate.validate((valid) => {
                if (valid) {
                    if(!this.isAdd){
                        this.$http.post('/privilege/updateSysUrl', this.formValidate).then(res => {
                            this.$Notice.success({
                                title: '编辑菜单成功'
                            });
                            this.getData()
                            this.isVisibleModal = false;
                        })
                        //this.isVisibleModal = false;
                    }else{
                        this.formValidate.id=''
                        this.$http.post('/privilege/createSysUrl', this.formValidate).then(res => {
                            this.$Notice.success({
                                title: '新增菜单成功'
                            });
                            this.getData()
                            this.isVisibleModal = false;
                        })
                    }
                }
            })
        },
        getData(){
            this.$http.get('privilege/getAllSysUrl', this.filterForm).then(res => {
                const { data } = res.resultMap;
                this.dataTree=data
                console.log(data,"data");
                
            })
        }
    },
    mounted () {
      this.getData()
    }
  };
</script>
<style lang="less">
    .menu {
        .add {
            margin-bottom: 10px;
            text-align: right;
        }
        .ivu-tree {
            width: 600px;
            margin: 0 auto;
        }
    }
</style>

 

转载于:https://my.oschina.net/u/4004801/blog/3031310