# # 从云盘添加图层/工程文件

> mapgis-ui-clouddisk-dataselect

## # 何时使用

需要从云盘选取已导入的图层文件，或已保存的工程样式文件时。

选取图层文件支持多选和单选，选取工程文件仅支持单选。

## # 1、组件引用示例

    <template>
      <mapgis-ui-clouddisk-dataselect
        ref="dataselect"
        :multiDatas="true" // 是否可多选
        :currentDocument="currentDocument" // 当前在线制图的document
        :handleNewDocument="handleNewDocument" // 新的document获取成功时的回调
      />
    </template>

## # 2、LocalStorage 要求

由于该组件为业务组件，在引用前需要在 LocalStorage 中存入关键业务信息。

### # LocalStorage 设置方式（以设置‘mapgis_clouddisk_ip’为例）

    // window.localStorage.setItem(key, value)

    window.localStorage.setItem('mapgis_clouddisk_ip', '192.168.199.53')

### # LocalStorage 设置项汇总

key | value(示例) | 说明 | 是否必填 | 备注
--- | --- | --- | --- | ---
mapgis_clouddisk_http | http | 服务 | 必填项 |
mapgis_clouddisk_ip | 192.168.199.53 | 服务 | 必填项 |
mapgis_clouddisk_socket | 9011 | 服务 | 必填项 |
mapgis_clouddisk_group_path | f79ae7b1-8dca-4d37-bd87-14834b1cbf2e | 云盘存储的根路径 | 必填项 |
mapgis_clouddisk_token | eyJhbGciOiJIUzUxMiJ9...... | 用户 token | 必填项 | 需要删除 Bearer

## # 3、API（参数使用说明）

参数 | 说明 | 是否必填 | 类型 | 默认值
--- | --- | --- | --- | ---
multiDatas | 是否多选（选择图层文件时可设为 true 或 false,选择工程文件时只可设为 false） | 可选项 | 布尔型 | false
currentDocument | 当前在线制图的 document | 必填项 | 对象型 |
handleNewDocument | 组件内部更新 document 时的回调，第一个参数为 payload（payload={document: 新 doc}） | 必填项 | 函数型 |
handleAddLayer | 外部组件通过 ref 调用，下面有示例 |  |  |

## # 4、示例代码

    <template>
      <mapgis-ui-modal
        title="从云盘添加数据"
        class="modal-add-clouddisk"
        :width="800"
        :visible="visible"
        :confirm-loading="confirmLoading"
        destroyOnClose
        @ok="handleOk"
        @cancel="handleCancel"
      >
        <mapgis-ui-clouddisk-dataselect
          ref="dataselect"
          :multiDatas="true"
          :currentDocument="currentDocument"
          :handleNewDocument="handleNewDocument"
        />
      </mapgis-ui-modal>
    </template>

    <script>
    export default {
      name: "mapgis-modal-add-clouddisk",
      data() {
        return {
          visible: false,
          confirmLoading: false
        };
      },
      watch: {
        "$store.state.modal.addclouddisk": function(visible) {
          this.visible = visible;
        }
      },
      computed: {
        currentDocument() {
          return this.$store.state.document;
        }
      },
      mounted() {
        const vm = this;
      },
      methods: {
        handleOk(e) {
          if (this.$refs.dataselect) {
            console.warn("发送回调：确定按钮");
            this.$refs.dataselect.handleAddLayer(); // ref示例
          }
          this.closeDialog();
        },
        handleCancel(e) {
          this.closeDialog();
        },
        handleNewDocument(payload) {
          console.warn("得到新document信息：", payload.document);
          this.$store.commit("DOCUMENT_SET_DOCUMENT", payload.document);
        },
        closeDialog() {
          this.$store.commit("MODAL_ADDCLOUDDISK_SET_VISIBLE", false);
        }
      }
    };
    </script>