## 附件

### 基础用法
1. 必须指定`action-url`后端地址属性，默认有一个测试地址，实际开发时需指定对应的附件上传地址，如果附件上传地址又权限认证时还需要配置`header`或`with-credentials`属性；
  * `with-credentials`支持发送 cookie 凭证信息；
  * `header`设置上传的请求头部。
2. 附件上传成功后要执行预览、下载、删除操作时，都通过事件回调来实现;
3. 当前演示demo中允许上传10KB左右文件，太大的附件可能会上传失败。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>附件上传</label>
      <cl-file
        v-model="fileList"
        :sortable="false"
        display-style="block"
        @remove="remove"
        @download="download"
        @preview="preview"
      ></cl-file>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        fileList: '[{"name":"cat.jpg","size":75068,"status":"success","state":"success","type":"jpg","uid":1626851973725,"prop1":"","prop2":"","prop3":"","prop4":"","prop5":"","prop6":"","response":{"success":true,"fileId":"1417746032036548608","fileName":"cat.jpg","size":75068,"username":"超级管理员"},"username":"超级管理员"}]',
      };
    },
    methods: {
      // 删除
      remove(file, fileList) {
        // 自行发送删除请求
        this.$message(`删除${file.name}成功`);
      },
      // 下载
      download(file, fileList) {
        // 自行发送下载请求
        this.$message(`下载${file.name}成功`);
      },
      // 预览
      preview(file, fileList) {
        this.$message(`预览附件${file.name}`)
      },
    },
  };
</script>
<style>
  .main-content {
    width: 100%;
  }
  .main-content .flex-line:last-child {
    margin-bottom: 0;
  }
  .flex-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label {
    width: 110px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- file-1.vue -->
```

### 列表模式
通过`type="list"`可以设置为列表模式，该模式下只显示附件名，鼠标`hover`时显示更多的功能按钮，`is-simple`属性为`true`时也会设置为列表模式。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>附件上传</label>
      <cl-file 
        v-model="fileList" 
        type="list" />
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        fileList: ''
      }
    },
  }
</script>
<!-- file-2.vue -->
```

### 图片墙模式
当`type="card"`时为图片墙模式，该模式下所上传的附件会显示缩略图。如果安装了全局预览组件，且附件中未添加`@preview="preview"`事件处理器时，附件组件会默认调用全局预览组件进行预览。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>附件上传</label>
      <cl-file
        v-model="fileList"
        type="card"
        display-style="block"
        :header="header"
        :action-url="actionUrl"
        @remove="remove"
        @download="download"
      ></cl-file>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        header: {
          Authorization: "Basic YWRtaW46NEFmeTJzNENiKzhCN2RFWFpIc08vdz09",
        },
        fileList: '[{"name":"cat.jpg","size":75068,"status":"success","state":"success","type":"jpg","uid":1626851973725,"prop1":"","prop2":"","prop3":"","prop4":"","prop5":"","prop6":"","response":{"success":true,"fileId":"1417746032036548608","fileName":"cat.jpg","size":75068,"username":"超级管理员"},"username":"超级管理员"}]',
        actionUrl: "http://www.chenlongkeji.com:8280/system/file/v1/upload",
      };
    },
    methods: {
      // 删除
      remove(file, fileList) {
        // 自行发送删除请求
        this.$message(`删除${file.name}成功`);
      },
      // 下载
      download(file, fileList) {
        // 自行发送下载请求
        this.$message(`下载${file.name}成功`);
      },
    },
  };
</script>
<style>
  .main-content {
    width: 100%;
  }
  .main-content .flex-line:last-child {
    margin-bottom: 0;
  }
  .flex-line {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label {
    width: 110px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- file-3.vue -->
```

### 其他配置
`multiple`支持多选，`limit`限制上传个数，`size`限制上传文件大小，`column-show`配置是否显示大小和类型列，`prop-conf-list`配置自定义列。

```html
<template>
  <div class="main-content">
    <div class="flex-line">
      <label>附件上传</label>
      <cl-file  
        v-model="fileList" 
        multiple 
        display-style="block"
        :limit="2" 
        :size="1" 
        :column-show="{fileType: false, fileSize: true}" 
        :prop-conf-list="[{desc: '自定义列', name: 'name'}]"
        accept="jpg,jpeg,png"
      ></cl-file>
    </div>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        fileList: ''
      }
    }
  }
</script>
<style>
  .main-content{
    width: 100%;
  }
  .main-content .flex-line:last-child{
    margin-bottom:0;
  }
  .flex-line{
    display: flex;
    align-items: center;
    margin-bottom: 20px;
  }
  .flex-line > label{
    width: 110px;
    text-align: right;
    margin-right: 20px;
  }
</style>
<!-- file-4.vue -->
```

### 属性说明
| 属性 | 类型 | 默认值 | 说明 |
| :--- | :--- | :--- | :--- |
| type | string | table | 附件上传的模式，可选值有：table,list,card |
| is-simple/simplicity | boolean | false | 是否显示简单信息，即type="list"模式 |
| with-credentials | boolean | false | 支持发送 cookie 凭证信息 |
| action-url | string | - | 必选参数，上传的地址 |
| validate | object | - | 校验规则 |
| permission | string | w | 控件显示权限分为无权限(n)、只读(r)、编辑(w)、必填(b)权限，而且权限在变更后对输入框的影响会立即生效。 |
| multiple | boolean | false | 是否支持多选文件 |
| accept | string | - | 接受上传的文件类型（thumbnail-mode 模式下此参数无效），大小写敏感，多种类型之间逗号分隔。 |
| limit | number | - | 最大允许上传个数 |
| header | object | - | 设置上传的请求头部 |
| size | number | 50 | 允许上传的文件大小，单位MB |
| previewable/allow-preview | boolean | true | 是否允许预览 |
| downloadable/allow-download | boolean | true | 是否允许下载 |
| sortable | boolean | true | 是否允许对多个附件进行排序操作 |
| card-badge | boolean | true | 图片墙模式下是否显示右上角的徽章 |
| prop-conf-list | array | - | 自定义表格列[{desc:'列名', name: '文件对象某个key名'}] |
| column-show | object | - | 定义表格列附件类型、附件大小是否显示，格式为{fileType: false, fileSize: false} |
| before-upload | function(file) | - | 上传文件之前的钩子，参数为上传的文件，若返回 false 或者返回 Promise 且被 reject，则停止上传。 |
| on-success | function(response, file, fileList) | - | 文件上传成功时的钩子 |
| on-error | function(err, file, fileList) | - | 文件上传失败时的钩子 |
| thumbnail | function(file, actionUrl) | - | 图片墙模式下，图片缩略图生成的方法，该方法需要返回一个图片缩略图的地址。|
### 事件说明
| 事件名称 | 说明 | 回调参数 |
| :--- | :--- | :--- |
| onSuccess | 上传成功事件 | response, file, fileList |
| remove | 删除文件 | file(文件信息),files(当前文件列表) |
| download | 下载按钮点击事件 | file(文件信息),files(当前文件列表) |
| preview | 附件名称点击预览事件 params为queryFilter, cb为加载数据后的回调函数 | file(文件信息),files(当前文件列表) |


