开发说明

1. 如何进行开发调试？

1.1 工程启动

# 启动本地预览并进入监听模式
yarn dev --watch

1.2 平台浏览

# 访问平台域名，并键入物料库名称与对应版本
http://low-code.qianjiangcloud.com/visual?mode={mode}&debug={namepsace}&version={version}&saas-token={saas-token}&modelTagvalueId={modelTagvalueId}&saas-membercode={saas-membercode}&saas-tenantcode={saas-tenantcode}&domain={domain}

URL query必须完整填写，否则平台显示会出现错误。

示例URL：

http://low-code.qianjiangcloud.com/visual?mode=mobox&debug=qj-material-official&version=0.3.21&id=-1&saas-token=5DB16DDE38293E138356FEF5836CC559&modelTagvalueId=482&saas-membercode=20021000097768&saas-tenantcode=00000000&domain=https://b2copt-dev2021112700000085.qjclouds.com

参数配置说明

2. 工程介绍

2.1 目录结构

.
├─ `index.js`: 入口文件
├─ `vue.config.js`: 环境配置文件（更多配置请参考: https://cli.vuejs.org/）
├─ `/dist`: 编译输出目录
└─ `/src`: 源码目录
   └─ `<material-name>`: 组件目录（目录名即组件名）
      └─` index.vue`: 组件主文件
      └─ `option.vue`: 组件配置文件

2.2 数据结构

{
  /* 组件名称 */
  "name": <string>,

  /* 源信息 */
  "meta": <object>,

  /* 坐标信息 */
  "axes": <object>,

  /* 数源 */
  "source": <object>,

  /* 配置 */
  "option": {
    /* 样式类 */
    "css": <object>,

    /* 预设类 */
    "preset": <object>,

    /* 表单类 */
    "formic": <object>,

    /* 存续类 - （高阶）于 非编辑时态 使用 */
    "vars": <object>
  }
}

2.3 组件结构

index.vue

export default {
  // 组件注册名
  name: "m-sample",

  // 组件源信息
  meta: {
    // 唯一身份标识
    id: "200800",
    // 图标（取自 Antv）
    icon: "FormOutlined",
    // 组件名称
    label: "文本",
    // 排序权重
    index: 100,
    // 可用性
    disabled: false
  },

  // 可不定义 props, 环境提供缺省兼容
  props: {
    // 数源
    source: {
      type: [Object],
      default() {
        return {};
      }
    },

    // 配置
    option: {
      type: [Object],
      default() {
        return {};
      }
    }
  }
};

option.vue

// 默认接收 `index.vue` 中定义的 `source` 与 `option`
export default {};

3. 开发经验

3.1 平台侧内置共享数仓

// 注：`visual` 是平台缺省关键字
this.$store.update(`visual`, {
  namespace: `mobox`
})

3.2 平台环境标识

// 平台提供标识，以便区分物料运行环境
global.skylla // boolean

3.3 平台内置状态

# 通过 `this` 关键字访问，例：this.query

`query`: url 参数
`keeper`: 运行时数仓信息（可用于 debug）
`preset`: 属性预设
`setting`: 全局配置
`materials`: 物料信息

3.4 HTTP 请求

// Send a Get Request
await this.$http(<address>).get(<params>, <option>);

// Send a Post Request
await this.$http(<address>).post(<params>, <option>);

3.5 更多支持

更多支持详见：vue-scaff 开发指南

4. 版本发布

# 打包编译命令
yarn build

# 注：官方物料库使用 ali-oss 作为静态资源访问服务器，私域项目亦可根据自身情况选择其他途径