树

## DataSet 数据集
数据集类，用于本地数据管理(新增、删除、修改、提交)
### 何时使用
需要客户端管理数据时。
批量提交数据。
### 初始化
<div class="textDiv">
new DataSetContainer({ request: request, saveUrl: "/data/save", queryUrl: "/data/query", exportUrl:"/export/dataexcelnew", exportPathUrl: "/export/dataexcel/path", datasetUrl: "/data/GetEntityConfig", });

------------
创建数据集容器

------------
代码示例如下
```javascript
new DataSetContainer({
    request: request,
    saveUrl: "/data/save",
    queryUrl: "/data/query",
    exportUrl:"/export/dataexcelnew",
    exportPathUrl: "/export/dataexcel/path",
    datasetUrl: "/data/GetEntityConfig",
});
```

</div>

### 代码演示
<div class="textDiv">

![](/media/202404/2024-04-30_104208_628661.png)

------------
数据维护: 新增、删除、修改 && personStore

------------
代码示例如下
```html
<template>
    <div v-if="deptStore ">
        <hi-toolbar :source="deptStore" v-bind="toolbar" ref="dbtoolbar"></hi-toolbar>
        <div class="toolbar">
            <ul>
                <li>
                    <el-button size="mini" @click="addMasterSlave()">添加主从</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="setMasterSlave()">初始主从数据</el-button>
                </li>
                 <li>
                    <el-button size="mini" @click="setMasterSlave1()">修改主从数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="deptStore.clear()">clear</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="deptStore.removeAll()">removeAll</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="deptStore.setDirty(true)">dirty(true)</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="deptStore.setDirty(false)">dirty(false)</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="push">push添加数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="unshift">unshift添加数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="addData">添加数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="pop">pop删除数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="shift">shift删除数据</el-button>
                </li>

<li>
                    <el-button size="mini" @click="delData">删除数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="splice">splice数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="editData">修改数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="editDesc">修改desc</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="editData1">修改多字段数据</el-button>
                </li>

<li>
                    <el-button size="mini" @click="reset">还原数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="save">保存数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="query">查询数据</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="clearUp">清洗状态</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="addSubData">添加从表</el-button>
                </li>
            </ul>
        </div>
        <br /><br /><br />
        <div>
            <hi-tree style="height:300px;width:300px" isEdit :data-source="deptStore" v-bind="treeCfg"></hi-tree>
        </div>
        <div v-html="deptStore.curRecord"></div>
        <hi-form
        :dataSource="deptStore"
        ref="detailForm"
        :model="deptStore.curRecord"
        v-bind="formcfg"
        ></hi-form>
        <div style="height:300px">
            <hi-table isFill v-if="deptStore" :data-source="deptStore" :model="deptStore.data" v-bind="tableCfg" size="mini" isEdit></hi-table>
        </div>
        <div class="toolbar">
            <ul>
                <li>
                    <el-button size="mini" @click="subremove">从表删除</el-button>
                </li>
                <li>
                    <el-button size="mini" @click="subpush">从表push添加</el-button>
                </li>
            </ul>
        </div>
        <div style="height:300px">
            <hi-table isFill v-if="personStore" :data-source="personStore" :model="personStore.data" v-bind="subTableCfg" size="mini" isEdit></hi-table>
        </div>

</div>
</template>
<script>
    export default {
        data() {
            return {
                treeCfg:{
                    
                    localfilternode:true,
                    // isTreeQuery:true,
                    size:"mini",
                    root:"-1",
                    "treeField": "name",
                    "joinField": "name",
                    "idField": "fguid",
                    "nameField": "name",
                    "pidField": "fid",
                    "leafField": "leaf",
                    numberField:"fc1",
                    // numberFieldType:"guid",
                },
                formcfg:{
                    items: [
                        {
                        name: "id",
                    },{
                        name: "fid",
                    },{
                        name: "name",
                    },{
                        name: "id",
                    },{
                        name: "fc1",
                    }]
                },
                tableCfg: {
                    columns: [{
                        name: "id", label: "id",
                    }, {
                        name: "fguid",label: "fguid",   
                    }, 
                    {
                        name:"fid",label: "fid",
                    }, 
                    {
                        name:"name",label: "name",
                    },
                    {
                        name: "updateTime",
                        label: "更新时间",
                        format: "yyyy 年 MM 月 dd 日"
                    }],

},
                subTableCfg: {
                    columns: [{
                        name: "name",

}, {
                        name: "desc",

}, 
                    {
                        name:"totalDesc",
                    },
                    {
                        name: "updateTime",
                        label: "更新时间",
                        format: "yyyy 年 MM 月 dd 日"
                    }],

},
                toolbar: {
                    style: {
                        "margin-bottom": "10px"
                    },
                    buttons: [{
                            kind: "add",
                            icon: "el-icon-circle-plus",
                        },
                        {
                            kind: "del",
                            icon: "el-icon-delete",
                        },
                        {
                            kind: "reset",
                            icon: "el-icon-refresh-left",
                        },
                        {
                            kind: "save",
                            type: "danger",
                            icon: "el-icon-upload",
                        },
                    ],
                },
                dsContainer: null,
                //部门数据集实例
                deptStore: null,
                //部门数据集配置
                deptCfg: {
                    modelFile: "eap5csxm.pro/KongJianCeShi.dir/ShuJuZuJian.dir/ShuKongJian.moduledir/dataset.datadir/ShuKongJianw_shukongj.bizstore|fDgHULTF.BizEntity~_extFile",
                    //数据集配置  部门
                    id: "dept",
                    //主键
                    primary: ["id"],
                    //操作权限
                    operations: ["oinsert", "odelete", "oquery", "omodify"],
                    //字段顺序,自动填充的顺充
                    sortFields: ["id", "name"],

fields: {
                        fguid: {
                            name: "fguid", //字段ID
                            label: "fguid", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,
                            readonly: true,
                            length: 50,
                            rules: [],
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + new Date().valueOf()
                                },
                            },
                        },
                        id: {
                            name: "id", //字段ID
                            label: "部门ID", //字段描述
                            dbtype: "dbString", //数据类型
                            required: true,
                            readonly: true,
                            length: 50,
                            rules: [],
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + new Date().valueOf()
                                },
                            },
                        },
                        desc: {
                            name: "desc", //字段ID
                            label: "部门描述", //字段描述
                            dbtype: "dbString", //数据类型
                            fireTarget: ["name"],
                            validateList: [{
                                "expr": function(value, store, data) {
                                    //throw new Error("出错了")
                                }
                            }],
                           
                            length: 10,
                        },
                        fc1:{
                            name: "fc1", //字段ID
                            label: "fc1", //字段描述
                            dbtype: "dbString", //数据类型
                            //redundant:true,
                        },
                        totalDesc:{
                            name: "totalDesc", //字段ID
                            label: "汇总子部门", //字段描述
                            dbtype: "dbString", //数据类型
                            //redundant:true,
                            readonly:true,
                        },
                        name: {
                            name: "name", //字段ID
                            label: "部门名称", //字段描述
                            length:50,
                            dbtype: "dbString", //数据类型
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + (data.desc || data.id);
                                },
                            },
                        },
                        updateTime: {
                            name: "updateTime", //字段ID
                            label: "更新时间", //字段描述
                            dbtype: "dbDatetime", //数据类型
                        },
                    },
                },
                //部门数据集实例
                personStore: null,
                //人员数据集配置
                personCfg: {
                    modelFile: "person.xml",
                    relation: {
                        //parentId:"dept"
                        selfField: ["id","FNUMBER"],
                        parentField: ["id","FC1"]
                    },
                    //数据集配置  部门
                    id: "person",
                    //主键
                    primary: ["id"],
                    //操作权限
                    operation: ["insert", "delete", "query", "modify"],
                    //字段元素
                    element: {
                        eleSort: {
                            field: "FSORT",
                        },
                        eleNumber: {
                            field: "FNUMBER"
                        }
                    },
                    //字段顺序,自动填充的顺充
                    sortFields: ["id", "name"],
                    fields: {
                        id: {
                            name: "id", //字段ID
                            label: "部门ID", //字段描述
                            dbtype: "dbString", //数据类型

default: {
                                //默认值
                                rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "人员" + new Date().valueOf();
                                },
                            },
                        },
                        desc: {
                            name: "desc", //字段ID
                            label: "部门1111", //字段描述
                            dbtype: "dbString", //数据类型
                            fireTarget: ["name"],
                             default:{
                                exps: (data) => {
                                    //填充表达式
                                    return 9;
                                },
                            },
                            summaryUpdates:[{
                                summaryType:"sum",
                                targetEntity:"dept",
                                targetField:"totalDesc"
                            }]
                        },
                        totalDesc:{
                            name: "totalDesc", //字段ID
                            label: "汇总部门", //字段描述
                            dbtype: "dbString", //数据类型
                            redundant:true,
                        },
                        name: {
                            name: "name", //字段ID
                            label: "部门名称", //字段描述
                            dbtype: "dbString", //数据类型
                            default: {
                                //默认值
                                //rule: "first", //prior   填充规则
                                exps: (data) => {
                                    //填充表达式
                                    return "部门" + data.desc || data.id;
                                },
                            },
                        },
                        updateTime: {
                            name: "updateTime", //字段ID
                            label: "更新时间", //字段描述
                            dbtype: "dbDatetime", //数据类型
                        },
                    },
                },
            };
        },
        methods: {
            addMasterSlave(){
                let data=[
                    {
                        id:(new Date()).valueOf(),
                        desc:"主表部门",
                        person:[
                            { 
                                id:(new Date()).valueOf(),
                                desc:20
                            }
                        ]
                    },
                    {
                        id:(new Date()).valueOf()+"mm",
                        desc:"主表部门1",
                        person:[
                            { 
                                id:(new Date()).valueOf()+"mm",
                                desc:10
                            },
                             {  id:(new Date()).valueOf()+"mm",
                                desc:30,
                            }
                        ]
                    }
                ]
                this.deptStore.add(data);
                console.log(this.deptStore.curRecord)
            },
            setMasterSlave1(){
                 this.deptStore.models[0].set({
                        id:"11111",
                        desc:"主表部门2",
                        person:[
                            { id:"99",
                            desc:99,},
                             { id:(new Date()).valueOf()+"2",
                            desc:10,}
                        ]
                    },{childrenClear:true})
                    
                    console.log(this.deptStore.getSavePack())
            },
            setMasterSlave(){
                let data=[
                    {
                        id:"11111",
                        desc:"主表部门",
                        person:[
                            { id:"99",
                            desc:20,}
                        ]
                    },
                    {
                        id:(new Date()).valueOf()+"mm",
                        desc:"主表部门1",
                        person:[
                            { id:(new Date()).valueOf()+"mm",
                            desc:10},
                             { id:(new Date()).valueOf()+"mm",
                            desc:30,}
                        ]
                    }
                ]
                this.deptStore.setData(data);
                console.log(this.deptStore.curRecord)
            },
            //从表删除
            subremove() {
                let curData = this.personStore.curRecord
                if (curData) {
                    this.personStore.remove(curData)
                }
            },
            subpush(){
                this.personStore.data.hiPush({})
            },
            setData() {

},
            query() {
                console.log(this.deptStore.createEmptyData());
                this.deptStore.load({
                    fid: "-1",
                });
            },
            //添加数据
            addData() {
                let val = new Date().valueOf();
                this.deptStore.add({
                    // name: val,
                    desc: "34"
                });
                //this.deptStore.data.hiPush({name:val+"1"},{name:val+"2"})
                this.showData();
            },
            push() {
                let val = new Date().valueOf();
                
                this.deptStore.data.hiPush({
                    name: val + "push1",
                }, {
                    name: val + "push2",
                });
            },
            unshift() {
                let val = new Date().valueOf();
                this.deptStore.data.hiUnshift({
                    name: val + "unshift1",
                }, {
                    name: val + "unshift2",
                });
            },
            pop() {
                this.deptStore.data.hiPop();
            },
            shift() {
                this.deptStore.data.hiShift();
            },
            splice() {
                let val = new Date().valueOf();
                this.deptStore.data.hiSplice(
                    1,
                    1, {
                        name: val + "splice1",
                    }, {
                        name: val + "splice2",
                    }
                );
            },
            //修改数据
            editData() {
                let val = this.deptStore.curRecord.name;
                this.deptStore.curRecord.name = val + 1;
                this.showData();
            },
            editDesc() {

this.deptStore.curRecord.desc = "abc";
                this.showData();
            },
            //修改数据
            editData1() {
                let curModel = this.deptStore.getCurModel();
                let editData = Object.assign({}, curModel.data);

this.deptStore.curRecord.name = "asfdasdf";
                this.deptStore.clearUp();

editData.name = new Date().valueOf();
                curModel.set(editData);
                this.showData();
            },
            //删除数据
            delData() {
                let val = this.deptStore.curRecord;
                this.deptStore.remove(this.deptStore.models)
                //this.deptStore.remove(val);
                this.showData();
            },
            //保存
            save() {
                this.deptStore
                    .save()
                    .then((res) => {
                        console.log(res);
                    })
                    .catch((res) => {
                        console.log(res);
                    });
            },
            clearUp() {
                this.deptStore.clearUp();
                this.deptStore.remove(this.deptStore.first());
                this.deptStore.save();
            },
            //还原
            reset() {
                this.deptStore.reset();
                this.showData();
            },
            addSubData() {

this.personStore.add({})
            },
            // 显示数据
            showData() {
                var data = this.deptStore.data;
                console.log(JSON.parse(JSON.stringify(data)));
            },
            _adjustOrderTest() {
                let configs = [{
                        "id": "a",

},
                    {
                        "id": "b",

}, {
                        "id": "c"
                    }, {
                        "id": "d",
                        "relation": {
                            "parentId": "e",

},
                    },
                    {
                        "id": "e",
                        "relation": {
                            "parentId": "f",

},
                    },
                    {
                        "id": "f",
                    }
                ]

let orderConfigs = this.$dsContainer._adjustOrder(configs);
            }
        },
        mounted() {
            this._adjustOrderTest();
            this.deptStore = this.$dsContainer.createDataSet(this.deptCfg);

this.deptStore.on("fieldvalidateerror", function(value, store, model, rule) {

})
           // this.personStore = this.$dsContainer.createDataSet(this.personCfg, this.deptStore);
            // this.deptStore = this.$dsContainer.createDataSet({
            //     modelFile: "entity",
            //     sortFields: ["id","name"],
            // });

this.deptStore.on("beforesave", (store, options) => {

//store.cancel=true;
            });

this.deptStore.on("beforeadd", (data, store) => {
                console.log("beforeadd");
                console.log(data);
                console.log(store);
            });

this.deptStore.on("afteradd", (data, store) => {
                console.log("afteradd");
                console.log(data);
                console.log(store);
            });
            this.deptStore.on("dirtychange", (store, dirty) => {

});
        },
    };
</script>
<style>
    ul {
        padding: 0;
        margin: 0;
    }

li {
        list-style: none;
        display: inline-block;
    }

.toolbar {
        height: 30px;
        line-height: 30px;
    }
</style>
```

</div>

### Attributes

| 参数              | 说明                 | 类型      | 可选值    | 默认值 |
|-----------------|--------------------|---------|--------|-----|
| dataSource      | 数据集                | Object  |        |     |
| idField         | 字段ID               | string  |        |     |
| pidField        | 父Id字段              | string  | string |     |
| nameField       | 名称字段               | string  | string |     |
| leafField       | 是否叶子节点字段           | string  |        |     |
| targetSource    | 关联数据集              | Object  |        |     |
| treeField       | 关联树Id字段            | string  | string |     |
| joinField       | 关联字段               | string  | string |     |
| joinType        | 关联类型字段             | string  | string |     |
| isTreeQuery     | 树过滤                | boolean |        |     |
| localfilternode | 本地过滤               | boolean |        |     |
| searchField     | 查询字段（默认用nameField） | string  |        |     |

详细 API 请<a href="https://doc.hieap.cn/web/#/8?page_id=933">查看 API 文档</a>

</style>