拖拽方式生成Vue使用者介面

白菜園發表於2021-03-29

前一陣子拜訪了一些小夥伴，大家都表示苦前端太久了，需要花費不少時間在前端開發上。本著在不損失靈活性的前提下儘可能提高開發效率的原則，作者嘗試在框架內整合了拖拽方式生成Vue使用者介面的功能作為補充，以方便快速生成增刪改查介面，也可以用於大屏展示及簡單的網頁製作。

一、技術原理

1.1 佈局

目前僅實現了基於vue-grid-layout的網格佈局，設計畫布上的每個元件動態載入至對應的GridItem內，同時根據元件配置繫結相應的prop及事件。

<!--src/components/Designers/View/VueVisualDesigner.vue-->
<grid-layout ref="gridLayout" class="editorCanvas" :layout.sync="layout"
                             :col-num="layoutOption.colNum" :row-height="layoutOption.rowHeight"
                             :is-draggable="!preview" :is-resizable="!preview" @dragover.native="onDragOverGrid">
    <grid-item class="widgetPanel" v-for="item in layout" :x="item.x" :y="item.y" :w="item.w"
               :h="item.h" :i="item.i" :key="item.i"
               @resize="onItemResize(item)" @container-resized="onItemResize(item)">
        <div v-if="!preview" class="widgetOverlay" @click="onSelectWidget(item)"></div>
        <!-- 動態widget -->
        <component :ref="item.i" :is="item.c" :style="makeWidgetStyle(item)"
                   v-model="runState[item.m]" v-bind="item.p" v-on="item.a">
            {{ item.t }}
        </component>
    </grid-item>
</grid-layout>

1.2 元件

每個元件的配置抽象為以下示例的介面，用於描述元件的屬性及相關的佈局位置資訊，注意分為設計時與執行時屬性，執行時屬性僅在預覽與執行時動態生成。

//src/runtime/IVueVisual.ts
export interface IVueLayoutItem {
    /** 元件名稱 eg: Input */
    n: string;
    /** v-text */
    t?: string;
    /** v-model */
    m?: string;
    /** 元件Props eg: {size: 'mini'} */
    p: object;
    /** 元件繫結的Props eg: {data:':data'} */
    b?: object;
    /** 設計時事件定義 eg: {click: {IVueEventAction}} */
    e?: object;
    /** 執行時生成的事件處理器，用於v-on繫結 eg: {click: function(){...}} */
    a?: object;
    /** 執行時動態載入的Vue元件 */
    c?: any;
}

/** 基於Grid的佈局項 */
export interface IVueGridLayoutItem extends IVueLayoutItem {
    i: string;
    x: number;
    y: number;
    w: number;
    h: number;
}

1.3 狀態

光有元件及佈局只能在介面上呈現，還需要繫結業務資料，所以每個檢視模型都有對應的狀態設定（即Vue的data)，描述狀態的名稱、型別及相應的設定值的操作，檢視的狀態在執行時會根據設定從後端載入資料或置為預設值。

/** 設計時的檢視狀態項 */
export interface IVueState {
    Name: string;
    Type: string;
    /**設定狀態值的操作，eg: 呼叫服務後設定狀態值 */
    Value: IVueEventAction;
}

1.4 事件

某些如Button類的元件可以繫結相應的事件處理，目前事件處理主要分為載入資料（LoadData)及遞交資料(PostData)兩類，分別對應於從後端讀資料至當前狀態與遞交當前狀態資料至後端處理。

export type EventAction = 'LoadData' | 'PostData' | 'RunScript';

export interface IVueEventAction {
    /** 操作型別, eg: LoadData */
    readonly Type: EventAction;
}

export interface IVueLoadDataAction extends IVueEventAction {
    /** 狀態目標 eg: State = LoadService() */
    State: string;
    Service: string;    //後端服務: eg: sys.OrderService.listAll
    ServiceArgs: any[]; //eg: [{Name:'arg1', Type:'string', Value:'"rick"'}], Value為表示式
}

1.5 工具箱

可供拖放至畫布的元件由全域性配置"VueWidgets"定義，分為全域性註冊的元件及自定義元件，自定義元件可以是程式碼方式的檢視模型，也可以是視覺化方式的檢視模型。

//自定義Widget配置定義
{
  "Name": "Table",            //元件名稱
  "Component": "sys.ExTable", //指向自定義檢視模型或全域性元件名稱(eg: ElInput)
  "Icon": "fa fa-table",      //工具箱圖示
  "Width": 12,                //預設網格寬度
  "Height": 6,                //預設網格高度
  "Props": [                  //元件的props
    {
      "Name": "columns",
      "Type": "array",
      "Default": [],
      "Editor": "sys.ExTableColumnEditor" //指向自定義屬性編輯器
    },
    {
      "Name": "rows",
      "Type": "array",
      "Default": []
    }
  ]
}