# 自定义页面-拖拽

## 导入使用

```code[javascript]
import seDragTemplate02 from "ss-universal-client-web/comp/data/su-drag-template-02";
```

## 基本用法

:::demo
```html
<template>
    <div>
        <su-code-viewer :code="codeContent"></su-code-viewer>
        <el-button @click="verify">校验</el-button>
        <el-button @click="getData">获取数据</el-button>
        <el-button @click="showRightTab">打开页面属性tab</el-button>
        <su-drag-template-02
            ref="dragTemplateObj"
            :templates="templates"
            :tabs="tabs"
        >
            <div slot="tplTop" style="height: 100px;background-color: red"></div>
            <div slot="tplBottom" style="height: 100px;background-color: red"></div>
        </su-drag-template-02>
    </div>
</template>

<script>

export default {
    name: "advTemplate",
    components: {
        seDragTemplate02,seCodeViewer
    },
    data () {
        return {
            defaultImg: '',
            templates: [
                {
                    name: "文字标题",
                    type: "title",
                    max: 4,
                    show:{mask:false},
                    component:()=>import("./demo/template")
                },
                {
                    name: "文字标题1",
                    type: "title1",
                    fixTop:true,
                    component:()=>import("./demo/template")
                },
                {
                    name: "文字标题3",
                    type: "title3",
                    fixBottom:true,
                    component:()=>import("./demo/template")
                },
            ],
            tabs:[{
                label:"页面属性",
                name:"right",
                component:()=>import("./demo/component-page"),
            }],
            defData: {
                 "templates": [{
                     "type": "title",
                     "data": "1"
                 }, {
                     "type": "title",
                     "data": "2"
                 }, {
                     "type": "title",
                     "data": "3"
                 }],
                 "right": {
                    "name": "11",
                    "title": "222",
                    "img": "https://i.ibb.co/BsJ9gnj/20210925153003.png"
                }
             }
        };
    },
    computed:{
        codeContent(){
            return JSON.stringify(this.defData)
        }
    },
    mounted () {
        this.initData(this.defData);
    },
    methods: {
        async showRightTab(){
            let dragTemplateObj = await this.getRef("dragTemplateObj");
            dragTemplateObj.showTab("right")
        },
        async initData() {
            let dragTemplateObj = await this.getRef("dragTemplateObj");
            dragTemplateObj.initData(this.defData);
        },
        async verify(){
            let dragTemplateObj = await this.getRef("dragTemplateObj");
            let bool = await dragTemplateObj.verify();
            if(!bool){
                alert("校验失败！数据不完整！");
            }else{
                alert("校验通过");
            }   
            return bool;
        }, 
        async getData() {
            let dragTemplateObj = await this.getRef("dragTemplateObj");
            this.defData = await dragTemplateObj.getData();
        },
    }
};
</script>
```
:::


## json数据结构

```code[javascript]
{
    templates:[
        {
            type:"xxx",//组件type
            data:null,//组件数据
        }
    ]
    [tabName]:tabData,//组件数据
}
```
## Attribute

| 名称 | 说明 | 备注 | 默认值|
|---------- |-------- |---------- |---------- |
| templates | 用来拖拽的组件Array列表 | 列表内子项的详情见下方 | — |
| show     | 功能按钮显示配置 | -- | {delete:true,up:true,down:true,copy:true,mask:true} |
| tabs | 右侧tab数组配置 | 参考tab配置标准  | [] |
| justActiveShow     | 仅显示激活的tab	 | - | false |

### templates-子项

| 名称      | 说明         | 备注              | 默认值 |
| --------- | ------------ | ----------------- | ------ |
| name      | 组件名称     |                   |        |
| type      | 组件类型     |                   |        |
| max     | 组件限制个数 | 传0或不传为不限制 | 0      |
| fixTop     | 是否限制置顶 | max会重置为1 | false      |
| fixBottom     | 是否限制置低 | max会重置为1 | false      |
| show     | 功能按钮显示配置 | -- | {delete:true,up:true,down:true,copy:true,mask:true} |
| options     | 组件功能配置 | -- | {}     |
| component | 组件模板封装对象     |                   |        |
| component.view | 组件视图模板     |       参考view组件标准           |        |
| component.edit | 组件编辑模板     |       参考edit组件标准            |        |
| listeners | 组件监听器     |       --            |   {}     |


## Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| initData | 初始化数据 | data | -- |
| getData(ops) | 获取数据 | ops:默认{},参考 getData_ops 介绍 | Promise[data] |
| verify(ops) | 校验是否完整 | ops:默认{},参考 verity_ops 介绍 | Promise[Boolean] |
| showTab(tabName) | 展示某个tab | -- | 获取某个tab实例 |
### getData_ops介绍
| 名称 | 说明 | 备注 | 默认值|
|---------- |-------- |---------- |---------- |
| templates | 组件区域 | 是否获取 | true |
| tabs | tab区域 | 是否获取  | true |
### verity_ops介绍
| 名称 | 说明 | 备注 | 默认值|
|---------- |-------- |---------- |---------- |
| templates | 组件区域 | 是否校验 | true |
| templatesMode     | 校验模式 | current/all | all |
| tabs | tab区域 | 是否校验,如果为boolean值则全部控制，如果为配置值则分别控制  | true |
```code[javascript]
    /**
     * verfiy({templates:false,tabs:true})
     * verfiy({templates:false,templatesMode:'current|all',tabs:true})
     * verfiy({templates:true,tabs:false})
     * verfiy({templates:false,tabs:{home:true}})
     */
```
## Slot
| 名称      | 描述   |
|---------- |-------------- |
| contentEmpty      |  模板显示区域无内容时呈现  | 
| tplTop      |  模板显示区域头部  | 
| tplBottom      |  模板显示区域底部  | 

## tab配置标准
### Attribute
| 名称 | 说明 | 备注 | 默认值|
|---------- |-------- |---------- |---------- |
| label | tab显示名称 | -- | — |
| name     | tab数据名称 | -- | -- |
| component | tab渲染组件 | --  | -- |
| listeners | 监听器 | --  | -- |
| attrs | 需要绑定的属性 | --  | -- |

### component-Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| initData | 初始化数据 | data | -- |
| getData | 获取数据 | -- | Promise[data] |
| verify | 校验是否完整 | -- | Promise |

## view组件标准
### Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| initData | 初始化数据 | data | -- |
| getData | 获取数据 | -- | Promise[data] |

### Events

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| onEvent | view相关事件会自动派发给edit的onEvent方法 | data | -- |

## edit组件标准
### Methods

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| initData | 初始化数据 | data | -- |
| getData | 获取数据 | -- | Promise[data] |
| verify | 校验是否完整 | -- | Promise |
| onEvent(data) | 接收view组件派发的事件 | -- | -- |

### Events

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| change | 数据变化事件,外层组件主动通过getData获取edit数据| -- | -- |