# 模板-拖拽

## 导入使用

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

## 基本用法

:::demo
```html
<template>
    <div style="width: 600px">
        <su-code-viewer :code="codeContent"></su-code-viewer>
        <el-button @click="verify">校验</el-button>
        <el-button @click="getData">获取数据</el-button>
        <su-drag-template
            ref="dragTemplateObj"
            :templates="templates"
            :show="{delete:true,up:true,down:false,copy:true}"
        >   
            <div slot="tplTop">模板固定显示区域头部</div>
            <div slot="tplBottom">模板固定显示区域底部</div>
        </su-drag-template>
    </div>
</template>

<script>
export default {
    name: "advTemplate",
    components: {
        seDragTemplate,seCodeViewer
    },
    data () {
        let vm = this;
        return {
            defaultImg: '',
            templates: [
                {
                    name: "示例组件1",
                    type: "singleImg",
                    count: 2,
                    fixTop: true,
                    component: () => import("./demo/singleImg"),
                    show: {delete:false,up:true,down:true,copy:false},
                    options: {applet: 'BEIKAO'}
                },
                {
                    name: "示例组件2",
                    type: "singleImg2",
                    count: 2,
                    component: () => import("./demo/singleImg2"),
                    show: {delete:true,up:true,down:true,copy:false},
                    options: {applet: 'BEIKAO'},
                    listeners: {
                        setTemplates(data) {
                           vm.handleData(data);
                       }
                    }
                },
            ],  
            defData: []
        };
    },
    computed:{
        codeContent(){
            return JSON.stringify(this.defData)
        }
    },
    mounted () {
        this.initData(this.defData);
    },
    methods: {
        handleData(data) {
            console.log(data, '处理数据')
        },      
       async initData (defData) {
            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 vm = this;
            let dragTemplateObj = await this.getRef("dragTemplateObj")
            vm.defData = dragTemplateObj.getData();
        },
    }
};
</script>
```
:::


## json数据结构

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

| 名称 | 说明 | 备注 | 默认值|
|---------- |-------- |---------- |---------- |
| templates | 用来拖拽的组件Array列表 | 列表内子项的详情见下方 | — |
| show     | 功能按钮显示配置 | -- | {delete:true,up:true,down:true,copy:true} |


#### templates-子项

| 名称      | 说明         | 备注              | 默认值 |
| --------- | ------------ | ----------------- | ------ |
| name      | 组件名称     |                   |        |
| type      | 组件类型     |                   |        |
| count     | 组件限制个数 | 传0或不传为不限制 | 0      |
| fixTop     | 是否限制置顶 | count会重置为1 | false      |
| fixBottom     | 是否限制置低 | count会重置为1 | false      |
| show     | 功能按钮显示配置 | -- | -- |
| show.delete | 删除按钮 | -- | true |
| show.onDelete | 删除回调 | -- | function(){return Promise.resolve()} |
| show.up | 上移按钮 | -- | true |
| show.down | 下移按钮 | -- | true |
| show.copy | 复制按钮 | -- | true |
| options     | 组件配置 | -- | {}     |
| component | 组件模板     |    参考component组件标准    |        |
| listeners | 组件事件     |        |      {}  |

## Methods

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

## Slot
| 名称      | 描述   |
|---------- |-------------- |
| contentEmpty      |  模板显示区域无内容时呈现  | 
| tplTop      |  模板显示区域头部  | 
| tplBottom      |  模板显示区域底部  | 

## component组件标准
### attribute

| 方法名称 | 说明 | 参数 | 返回值
|---------- |-------- |---------- |---------- |
| options     | 组件配置 | -- | {}     |

### Methods

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