tianheng-ui 0.1.0 → 0.1.2

package/packages/FormMaking/GenerateFormItem.vue

@@ -0,0 +1,887 @@
+<template>
+  <el-form-item
+    v-show="!widget.options.hidden"
+    :class="{
+      [widget.model]: true,
+      [`widget-form-list-${widget.type}`]: true
+    }"
+    :label="widget.options.hideLabel ? '' : widget.name"
+    :label-width="labelWidth"
+    :prop="prop ? prop : widget.model"
+    :rules="widget.rules"
+    :ref="widget.model"
+  >
+    <template v-if="widget.type == 'input'">
+      <el-input
+        v-if="
+          widget.options.dataType == 'number' ||
+            widget.options.dataType == 'integer' ||
+            widget.options.dataType == 'float'
+        "
+        type="number"
+        v-model.number="dataModel"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :readonly="widget.options.readonly"
+        :clearable="widget.options.clearable"
+        :maxlength="widget.options.maxlength"
+        :show-word-limit="widget.options.showWordLimit"
+        :show-password="widget.options.showPassword"
+        @input="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      >
+      </el-input>
+      <el-input
+        v-else
+        type="text"
+        v-model="dataModel"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :readonly="widget.options.readonly"
+        :clearable="widget.options.clearable"
+        :maxlength="widget.options.maxlength"
+        :show-word-limit="widget.options.showWordLimit"
+        :show-password="widget.options.showPassword"
+        :suffix-icon="widget.options.suffixIcon"
+        :prefix-icon="widget.options.prefixIcon"
+        @input="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      >
+        <template v-if="widget.options.prepend" slot="prepend">{{
+          widget.options.prepend
+        }}</template>
+        <template v-if="widget.options.append" slot="append">{{
+          widget.options.append
+        }}</template>
+      </el-input>
+    </template>
+
+    <template v-if="widget.type == 'textarea'">
+      <el-input
+        type="textarea"
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :placeholder="widget.options.placeholder"
+        :style="{ width: widget.options.width }"
+        :maxlength="widget.options.maxlength"
+        :clearable="widget.options.clearable"
+        :show-word-limit="widget.options.showWordLimit"
+        :autosize="{
+          minRows: widget.options.minRows,
+          maxRows: widget.options.maxRows
+        }"
+        @input="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      ></el-input>
+    </template>
+
+    <template v-if="widget.type == 'cell'">
+      <th-cell
+        :title="widget.options.title"
+        :value="widget.options.value"
+        :label="widget.options.label"
+      ></th-cell>
+    </template>
+
+    <template v-if="widget.type == 'number'">
+      <el-input-number
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :step="widget.options.step"
+        :controls-position="widget.options.controlsPosition ? 'right' : ''"
+        :disabled="widget.options.disabled"
+        :min="widget.options.min"
+        :max="widget.options.max"
+        :precision="widget.options.precision"
+        @change="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      ></el-input-number>
+    </template>
+
+    <template v-if="widget.type == 'text'">
+      <div
+        :style="{
+          height: widget.options.height,
+          textAlign: widget.options.textAlign
+        }"
+        v-html="dataModel"
+      ></div>
+    </template>
+
+    <template v-if="widget.type == 'radio'">
+      <el-radio-group
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        @change="handleEventAction(widget.events.onChange)"
+      >
+        <template v-if="widget.options.buttonType">
+          <el-radio-button
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+            :label="item.value"
+            :border="widget.options.border"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-radio-button>
+        </template>
+        <template v-else>
+          <el-radio
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-radio>
+        </template>
+      </el-radio-group>
+    </template>
+
+    <template v-if="widget.type == 'checkbox'">
+      <el-checkbox-group
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :min="widget.options.min"
+        :max="widget.options.max"
+        @change="handleEventAction(widget.events.onChange)"
+      >
+        <template v-if="widget.options.buttonType">
+          <el-checkbox-button
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-checkbox-button>
+        </template>
+        <template v-else>
+          <el-checkbox
+            :style="{
+              display: widget.options.inline ? 'inline-block' : 'block'
+            }"
+            :label="item.value"
+            :border="widget.options.border"
+            v-for="(item, index) in widget.options.remote
+              ? widget.options.remoteOptions
+              : widget.options.options"
+            :key="index"
+          >
+            <template v-if="widget.options.remote">{{ item.label }}</template>
+            <template v-else>{{
+              widget.options.showLabel ? item.label : item.value
+            }}</template>
+          </el-checkbox>
+        </template>
+      </el-checkbox-group>
+    </template>
+
+    <template v-if="widget.type == 'time'">
+      <el-time-picker
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :is-range="widget.options.isRange"
+        :placeholder="widget.options.placeholder"
+        :start-placeholder="widget.options.startPlaceholder"
+        :end-placeholder="widget.options.endPlaceholder"
+        :readonly="widget.options.readonly"
+        :disabled="widget.options.disabled"
+        :editable="widget.options.editable"
+        :clearable="widget.options.clearable"
+        :arrowControl="widget.options.arrowControl"
+        :value-format="widget.options.format"
+        :picker-options="{
+          selectableRange: `${widget.options.pickerOptions.selectableRange[0]} - ${widget.options.pickerOptions.selectableRange[1]}`
+        }"
+        @change="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      >
+      </el-time-picker>
+    </template>
+
+    <template v-if="widget.type == 'date'">
+      <el-date-picker
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :type="widget.options.type"
+        :is-range="widget.options.isRange"
+        :placeholder="widget.options.placeholder"
+        :start-placeholder="widget.options.startPlaceholder"
+        :end-placeholder="widget.options.endPlaceholder"
+        :readonly="widget.options.readonly"
+        :disabled="widget.options.disabled"
+        :editable="widget.options.editable"
+        :clearable="widget.options.clearable"
+        :value-format="widget.options.format"
+        @change="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      >
+      </el-date-picker>
+    </template>
+
+    <template v-if="widget.type == 'select'">
+      <el-select
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+        :multiple="widget.options.multiple"
+        :clearable="widget.options.clearable"
+        :placeholder="widget.options.placeholder"
+        :collapseTags="widget.options.collapseTags"
+        :allowCreate="widget.options.allowCreate"
+        :filterable="
+          widget.options.allowCreate ? true : widget.options.filterable
+        "
+        @change="handleEventAction(widget.events.onChange)"
+        @focus="handleEventAction(widget.events.onFocus)"
+        @blur="handleEventAction(widget.events.onBlur)"
+      >
+        <el-option
+          v-for="item in widget.options.remote
+            ? widget.options.remoteOptions
+            : widget.options.options"
+          :key="item.value"
+          :value="item.value"
+          :label="
+            widget.options.showLabel || widget.options.remote
+              ? item.label
+              : item.value
+          "
+        ></el-option>
+      </el-select>
+    </template>
+
+    <template v-if="widget.type == 'color'">
+      <el-color-picker
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :show-alpha="widget.options.showAlpha"
+        @change="handleEventAction(widget.events.onChange)"
+      ></el-color-picker>
+    </template>
+
+    <template v-if="widget.type == 'switch'">
+      <el-switch
+        v-model="dataModel"
+        :width="widget.options.width - 20"
+        :disabled="widget.options.disabled"
+        :inactive-text="widget.options.switchInactiveText"
+        :active-text="widget.options.switchActiveText"
+        :inactive-color="widget.options.switchInactiveColor"
+        :active-color="widget.options.switchActiveColor"
+        @change="handleEventAction(widget.events.onChange)"
+      >
+      </el-switch>
+    </template>
+
+    <template v-if="widget.type == 'button'">
+      <el-button
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height
+        }"
+        :size="widget.options.buttonSize"
+        :type="widget.options.buttonType"
+        :plain="widget.options.buttonPlain"
+        :round="widget.options.buttonRound"
+        :circle="widget.options.buttonCircle"
+        :loading="widget.options.loading"
+        :disabled="widget.options.disabled"
+        :icon="widget.options.buttonIcon"
+        @click="handleEventAction(widget.events.onClick)"
+        >{{ widget.options.defaultValue }}</el-button
+      >
+    </template>
+
+    <template v-if="widget.type == 'slider'">
+      <el-slider
+        v-model="dataModel"
+        :min="widget.options.min"
+        :max="widget.options.max"
+        :disabled="widget.options.disabled"
+        :step="widget.options.step"
+        :show-input="widget.options.showInput"
+        :range="widget.options.range"
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height
+        }"
+        :show-tooltip="widget.options.showTooltip"
+        :format-tooltip="
+          val => formatTooltip(val, widget.options.formatTooltip)
+        "
+        :show-stops="widget.options.showStops"
+        :vertical="widget.options.vertical"
+        @change="handleEventAction(widget.events.onChange)"
+      ></el-slider>
+    </template>
+
+    <template v-if="widget.type == 'rate'">
+      <el-rate
+        v-model="dataModel"
+        :max="widget.options.max"
+        :disabled="widget.options.disabled"
+        :allow-half="widget.options.allowHalf"
+        :show-text="widget.options.showText"
+        :texts="widget.options.auxiliaryValue"
+        @change="handleEventAction(widget.events.onChange)"
+      ></el-rate>
+    </template>
+
+    <template v-if="widget.type == 'filler'">
+      <div
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height
+        }"
+      ></div>
+    </template>
+
+    <template v-if="widget.type == 'image'">
+      <!-- <el-image
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height
+        }"
+        :src="widget.options.defaultValue"
+        :fit="widget.options.fit"
+        :preview-src-list="[widget.options.defaultValue]"
+        :lazy="widget.options.isLazy"
+      ></el-image> -->
+      <el-image
+        v-for="(item, index) in widget.options.defaultValue"
+        :key="index"
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height,
+          borderRadius: widget.options.borderRadius,
+          verticalAlign:'middle'
+        }"
+        :src="item.url"
+        :fit="widget.options.fit"
+        :preview-src-list="imagePreviewList"
+        :lazy="widget.options.isLazy"
+      ></el-image>
+    </template>
+
+    <template v-if="widget.type == 'upload'">
+      <el-upload
+        class="upload-demo"
+        :action="uploadUrl"
+        :headers="
+          widget.options.remote ? widget.options.remoteFunc.headers : {}
+        "
+        :data="widget.options.remote ? widget.options.remoteFunc.params : {}"
+        :multiple="widget.options.multiple"
+        :limit="widget.options.length"
+        :width="widget.options.size.width"
+        :height="widget.options.size.height"
+        :list-type="widget.options.listType"
+        :drag="widget.options.drag"
+        :disabled="widget.options.disabled"
+        :auto-upload="true"
+        :on-change="handleAvatar"
+        :on-error="handleAvatarError"
+        :on-preview="
+          file => handlePictureCardPreview(file, widget.options.listType)
+        "
+        :on-remove="handleRemove"
+      >
+        <el-button
+          size="small"
+          type="primary"
+          :disabled="widget.options.disabled"
+          v-if="
+            ['default', 'picture'].includes(widget.options.listType) &&
+              !widget.options.drag
+          "
+          >点击上传</el-button
+        >
+        <i
+          slot="default"
+          class="el-icon-plus"
+          v-if="
+            widget.options.listType === 'picture-card' && !widget.options.drag
+          "
+        ></i>
+        <i class="el-icon-upload" v-if="widget.options.drag"></i>
+        <div class="el-upload__text" v-if="widget.options.drag">
+          将文件拖到此处，或<em>点击上传</em>
+        </div>
+        <div
+          slot="tip"
+          class="el-upload__tip"
+          v-html="widget.options.elUploadTip"
+        ></div>
+      </el-upload>
+    </template>
+
+    <template v-if="widget.type == 'editor'">
+      <vue-editor
+        v-model="dataModel"
+        :style="{ width: widget.options.width }"
+        :disabled="widget.options.disabled"
+      >
+      </vue-editor>
+    </template>
+
+    <template v-if="widget.type == 'cascader'">
+      <el-cascader
+        v-model="dataModel"
+        :disabled="widget.options.disabled"
+        :clearable="widget.options.clearable"
+        :placeholder="widget.options.placeholder"
+        :style="{
+          width: widget.options.width,
+          height: widget.options.height
+        }"
+        :options="widget.options.remoteOptions"
+        :props="widget.options.props"
+        :show-all-levels="widget.options.showAllLevels ? false : true"
+        :collapse-tags="widget.options.collapseTags"
+        :filterable="widget.options.filterable"
+        @change="handleEventAction(widget.events.onChange)"
+      >
+        <template slot-scope="{ data }">
+          <span v-html="widget.options.prepend"></span>
+          <span>{{ data.label }}</span>
+          <span v-html="widget.options.append"></span>
+        </template>
+      </el-cascader>
+    </template>
+
+    <template v-if="widget.type == 'blank'">
+      <slot :name="widget.model" />
+    </template>
+
+    <template v-if="widget.type == 'table'">
+      <el-table
+        style="width:100%"
+        :data="dataModel"
+        :stripe="widget.options.stripe"
+        :show-header="widget.options.showHeader"
+        :highlight-current-row="widget.options.highlightCurrentRow"
+        :border="widget.options.border"
+      >
+        <el-table-column
+          v-if="widget.options.isSerial"
+          label="序号"
+          type="index"
+          width="50"
+          align="center"
+        >
+        </el-table-column>
+        <el-table-column
+          v-for="element in widget.list"
+          :key="`table_${element.key}`"
+          :label="element.name"
+          :prop="element.model"
+          :width="element.options.width"
+        >
+          <template slot-scope="scope">
+            <genetate-form-item
+              :models.sync="dataModel[scope.$index]"
+              :widget="element"
+              :remote="remote"
+              :config="config"
+              :prop="`${prop}.${scope.$index}.${element.model}`"
+              :slotKeys="slotKeys"
+              :componentsData="componentsData"
+            >
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
+              </template>
+            </genetate-form-item>
+          </template>
+        </el-table-column>
+        <el-table-column
+          v-if="widget.options.isDelete"
+          fixed="right"
+          label="操作"
+          width="60"
+          align="center"
+        >
+          <template slot-scope="scope">
+            <el-button
+              style="color:#F56C6C"
+              type="text"
+              @click.native.prevent="handleTableDelete(scope.$index)"
+            >
+              移除
+            </el-button>
+          </template>
+        </el-table-column>
+        <template v-if="widget.options.isAdd" slot="append">
+          <div
+            style="text-align: center;"
+            :style="{
+              borderTop:
+                dataModel && dataModel.length != 0 ? '' : '1px solid #EBEEF5'
+            }"
+          >
+            <el-button
+              type="text"
+              :disabled="widget.options.disabled"
+              @click="handleTableAdd"
+              >新增</el-button
+            >
+          </div>
+        </template>
+      </el-table>
+    </template>
+
+    <template v-if="widget.type == 'table_h5'">
+      <div class="tableH5">
+        <div
+          v-for="(column, columnIndex) in dataModel"
+          class="tableH5-item"
+          :key="`table_h5_${columnIndex}`"
+        >
+          <div
+            v-for="(element, elementIndex) in widget.list"
+            :key="`table_h5_${columnIndex}_${element.key}`"
+          >
+            <genetate-form-item
+              style="flex:1;"
+              :models.sync="column"
+              :widget="element"
+              :remote="remote"
+              :config="config"
+              :prop="
+                element.type === 'grid'
+                  ? `${prop}.${columnIndex}`
+                  : `${prop}.${columnIndex}.${element.model}`
+              "
+              :slotKeys="slotKeys"
+              :componentsData="componentsData"
+            >
+              <template v-for="name in slotKeys" :slot="name">
+                <slot :name="name" />
+              </template>
+            </genetate-form-item>
+            <div
+              v-if="
+                widget.options.isDelete &&
+                  elementIndex === 0 &&
+                  columnIndex >= widget.options.deleteIndex
+              "
+              class="actions"
+            >
+              <el-button
+                type="danger"
+                @click.native.prevent="handleTableDelete(columnIndex)"
+                >{{ widget.options.deleteButtonText }}</el-button
+              >
+            </div>
+          </div>
+        </div>
+
+        <div v-if="widget.options.isAdd" style="text-align: center;">
+          <el-button
+            type="text"
+            :disabled="widget.options.disabled"
+            @click="handleTableAdd"
+            >{{ widget.options.addButtonText }}</el-button
+          >
+        </div>
+      </div>
+    </template>
+
+    <template v-if="widget.type == 'grid'">
+      <th-row
+        :gutter="widget.options.gutter ? widget.options.gutter : 0"
+        :justify="widget.options.justify"
+        :align="widget.options.align"
+      >
+        <th-col
+          v-for="(column, columnIndex) in widget.columns"
+          :key="columnIndex"
+          :span="column.span"
+        >
+          <genetate-form-item
+            v-for="element in column.list"
+            :key="element.key"
+            :widget="element"
+            :models="models"
+            :config="config"
+            :remote="remote"
+            :prop="prop ? `${prop}.${element.model}` : element.model"
+            :slotKeys="slotKeys"
+            :componentsData="componentsData"
+          >
+            <template v-for="name in slotKeys" :slot="name">
+              <slot :name="name" />
+            </template>
+          </genetate-form-item>
+        </th-col>
+      </th-row>
+    </template>
+
+    <template v-if="widget.type == 'tabs'">
+      <el-tabs v-model="widget.options.defaultValue">
+        <el-tab-pane
+          v-for="(column, columnIndex) in widget.tabs"
+          :key="`tabs_${columnIndex}`"
+          :label="column.label"
+          :name="column.value"
+        >
+          <genetate-form-item
+            v-for="element in column.list"
+            :key="`tabs_${columnIndex}_${element.key}`"
+            :widget="element"
+            :models.sync="dataModel[column.value]"
+            :config="config"
+            :remote="remote"
+            :prop="
+              element.type === 'grid'
+                ? `${prop}.${column.value}`
+                : `${prop}.${column.value}.${element.model}`
+            "
+            :slotKeys="slotKeys"
+            :componentsData="componentsData"
+          >
+            <template v-for="name in slotKeys" :slot="name">
+              <slot :name="name" />
+            </template>
+          </genetate-form-item>
+        </el-tab-pane>
+      </el-tabs>
+    </template>
+
+    <template v-if="widget.type == 'divider'">
+      <el-divider :content-position="widget.options.contentPosition">
+        {{ widget.options.defaultValue }}
+      </el-divider>
+    </template>
+
+    <el-dialog :visible.sync="dialogVisible" append-to-body>
+      <img width="100%" :src="dialogImageUrl" alt="" />
+    </el-dialog>
+  </el-form-item>
+</template>
+
+<script>
+import FmUpload from "./Upload";
+import { VueEditor } from "vue2-editor";
+import ThCell from "ui/Cell/index.vue";
+import ThImage from "ui/Image/index.vue";
+import ThRow from "ui/Row/index.vue";
+import ThCol from "ui/Col/index.vue";
+
+export default {
+  name: "genetate-form-item",
+  props: [
+    "widget",
+    "models",
+    "remote",
+    "prop",
+    "slotKeys",
+    "config",
+    "componentsData"
+  ],
+  components: { FmUpload, VueEditor, ThCell, ThImage, ThRow, ThCol },
+  data() {
+    return {
+      dataModel: this.models[this.widget.model],
+      dialogVisible: false,
+      dialogImageUrl: ""
+    };
+  },
+  watch: {
+    dataModel: {
+      deep: true,
+      handler(val) {
+        this.models[this.widget.model] = val;
+        this.$emit("update:models", {
+          ...this.models,
+          [this.widget.model]: val
+        });
+        this.$emit("input-change", val, this.widget.model);
+      }
+    },
+    models: {
+      deep: true,
+      handler(val) {
+        this.dataModel = val[this.widget.model];
+      }
+    }
+  },
+  computed: {
+    labelWidth() {
+      if (this.widget.options.hideLabel) return "0";
+      if (this.widget.options.isLabelWidth)
+        return `${this.widget.options.labelWidth}px`;
+
+      return "";
+    },
+    uploadUrl() {
+      if (this.widget.options.remote) {
+        const info = sessionStorage.getItem("th_oauth_info");
+        let baseUrl = "";
+        if (info) baseUrl = JSON.parse(info).baseUrl;
+
+        return `${baseUrl}/${this.widget.options.remoteFunc.api}`;
+      } else {
+        return this.widget.options.action;
+      }
+    },
+    imagePreviewList() {
+      const list = [];
+      this.widget.options.defaultValue.forEach(item => {
+        list.push(item.url);
+      });
+      return list;
+    }
+  },
+  created() {},
+  mounted() {
+    this.$nextTick(() => {
+      this.componentsData[this.widget.model] = this.widget;
+    });
+  },
+  methods: {
+    handleTimePicker(vals) {
+      this.dataModel = [];
+      this.dataModel[0] = vals;
+      this.widget.options.endTimePickerOptions.minTime = vals;
+    },
+    formatTooltip(val, num) {
+      return val / num;
+    },
+    handlePictureCardPreview(file, listType) {
+      if (listType === "picture-card") {
+        this.dialogImageUrl = file.url;
+        this.dialogVisible = true;
+      }
+    },
+    handleRemove(file, fileList) {
+      this.dataModel = {
+        data: fileList,
+        remoteApi: this.widget.options.remoteApi
+      };
+    },
+    handleAvatar(res, file) {
+      this.dataModel = {
+        data: file,
+        remoteApi: this.widget.options.remoteApi
+      };
+    },
+    handleAvatarError() {
+      console.log("上传失败！");
+    },
+    handleTableAdd() {
+      let dic = {};
+      this.widget.list.forEach(item => {
+        if (item.type === "grid") {
+          for (let i = 0; i < item.columns.length; i++) {
+            const element = item.columns[i];
+            for (let j = 0; j < element.list.length; j++) {
+              const element2 = element.list[j];
+              dic[element2.model] = element2.options.defaultValue;
+            }
+          }
+        } else {
+          dic[item.model] = item.options.defaultValue;
+        }
+      });
+      this.dataModel.push(dic);
+    },
+    handleTableDelete(index) {
+      this.dataModel.splice(index, 1);
+    },
+
+    // 支撑 JavaScript 动态编译
+    handleEventAction(key) {
+      if (!key) return;
+
+      const eventScript = this.config.eventScript;
+      for (let i = 0; i < eventScript.length; i++) {
+        const element = eventScript[i];
+        if (element.key === key) {
+          const func = `(item,value)=>{${element.func}}`;
+          eval(func)(this.widget, this.dataModel);
+        }
+      }
+    },
+    // 显示组件
+    display(keys) {
+      if (!keys || keys.length === 0) return;
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (this.componentsData[key]) {
+          // this.componentsData[key].options.hidden = false;
+          this.$set(this.componentsData[key].options, "hidden", false);
+          console.log("display =>", keys, this.componentsData);
+        }
+      }
+    },
+    // 隐藏组件
+    hide(keys) {
+      if (!keys || keys.length === 0) return;
+      for (let i = 0; i < keys.length; i++) {
+        const key = keys[i];
+        if (this.componentsData[key]) {
+          // this.componentsData[key].options.hidden = true;
+          this.$set(this.componentsData[key].options, "hidden", true);
+          console.log("hide =>", keys, this.componentsData);
+        }
+      }
+    },
+    // 设置数据，仅支持修改当前组件节点下的数据
+    setData(obj) {
+      const keys = Object.keys(obj);
+      for (let i = 0; i < keys.length; i++) {
+        const arr = keys[i].split(".");
+        if (arr.length === 1) {
+          const key = keys[i];
+          const value = obj[key];
+          this.$set(this.models, key, value);
+        } else {
+          const key = arr.pop();
+          const value = obj[keys[i]];
+          const path = arr.join(".");
+          this.$set(eval(`this.models.${path}`), key, value);
+        }
+      }
+    },
+    // 获取数据，仅支持获取当前组件节点下的数据
+    getData() {
+      return this.models;
+    }
+  }
+};
+</script>