mooho-base-admin-plus 0.1.0

package/src/components/view/view-form-draggable.vue

@@ -0,0 +1,837 @@
+<template>
+  <div>
+    <Form ref="form" :model="data" label-position="top" label-colon="：" class="ivu-mt draggable">
+      <draggable v-model="columns" item-key="index" :animation="500" :scroll="true" group="sort" ghostClass="ghost-style">
+        <template #item="{ element: column, index }">
+          <div :style="'width:' + getWidth(column) + '%; float:left;'" @mouseover="mouseover(column)" @mouseleave="mouseleave(column)">
+            <div style="float: right; margin-right: 20px">
+              <Button
+                size="small"
+                v-show="column.showButton"
+                @click="edit(column, index)"
+                icon="md-cog"
+                type="primary"
+                style="margin-right: 4px; width: 22px; height: 22px"
+              ></Button>
+              <Button
+                size="small"
+                v-show="column.showButton"
+                @click="remove(column, index)"
+                icon="md-close"
+                type="warning"
+                style="margin-right: 4px; width: 22px; height: 22px"
+              ></Button>
+            </div>
+            <div :key="column.code" v-if="column.controlType === 'Placeholder'" style="margin-bottom: 0px"></div>
+            <div :key="column.code" v-if="column.controlType === 'Title'">
+              <div class="form-title" :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }" v-html="column.name"></div>
+            </div>
+            <div v-if="column.controlType === 'Table'">
+              <Divider :plain="true" dashed orientation="left" size="small">
+                <span class="title">{{ column.name }}</span>
+              </Divider>
+              <view-table :static="true" :view-code="column.source" :readonly="column.isReadonly" :pageEnable="false" :embedded="true"></view-table>
+            </div>
+            <div v-if="column.controlType === 'List'">
+              <Divider :plain="true" dashed orientation="left" size="small">
+                <span class="title">{{ column.name }}</span>
+              </Divider>
+              <view-table :static="true" :view-code="column.source" :readonly="true" :pageEnable="false" :embedded="true"></view-table>
+            </div>
+            <FormItem
+              :label="column.name"
+              :prop="column.code"
+              :key="column.code"
+              :error="column.code == null ? '未绑定字段' : null"
+              v-if="column.controlType !== 'Placeholder' && column.controlType !== 'Title' && column.controlType !== 'Table' && column.controlType !== 'List'"
+            >
+              <template v-if="column.controlType === 'Custom'"></template>
+              <template v-else-if="column.controlType === 'Label'">
+                <div class="label" :title="compareData == null ? showData(data, column) : showData(compareData, column)">
+                  <div :class="{ error: compareData != null && parseData(data, column.code) != parseData(compareData, column.code) }" v-html="showData(data, column)"></div>
+                </div>
+              </template>
+              <template v-if="column.controlType === 'Hyperlink'">
+                <a :href="getHyperlink(data, column.hyperlink)" :target="column.isNewWindow ? '_blank' : ''">
+                  <span v-html="showData(data, column)"></span>
+                </a>
+              </template>
+              <template v-else-if="column.controlType === 'TextInput'">
+                <Input
+                  type="text"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :maxlength="column.maxLength"
+                  :placeholder="column.description"
+                  @on-change="onDataChange(column)"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'NumberInput'">
+                <Input
+                  type="number"
+                  number
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  @on-change="onDataChange(column)"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Select'">
+                <Select
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  clearable
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="onDataChange(column)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                </Select>
+              </template>
+              <template v-else-if="column.controlType === 'MultiSelect'">
+                <Select
+                  :model-value="parseArrayData(data, column.code)"
+                  @update:model-value="$event => setArrayData(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  :multiple="true"
+                  clearable
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="onDataChange(column)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                </Select>
+              </template>
+              <template v-else-if="column.controlType === 'TreeSelect'">
+                <TreeSelect
+                  :model-value="parseTreeData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :data="getDataSource(data, column)"
+                  :disabled="column.isReadonly"
+                  :clearable="true"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                ></TreeSelect>
+              </template>
+              <template v-else-if="column.controlType === 'MultiTreeSelect'">
+                <TreeSelect
+                  :model-value="parseArrayData(data, column.code)"
+                  @update:model-value="$event => setArrayData(data, column.code, $event)"
+                  :data="getDataSource(data, column)"
+                  :disabled="column.isReadonly"
+                  :multiple="true"
+                  :show-checkbox="true"
+                  :clearable="true"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                ></TreeSelect>
+              </template>
+              <template v-else-if="column.controlType === 'SelectWithOther'">
+                <Select
+                  :model-value="parseDataWithOther(data, column)"
+                  @update:model-value="$event => setDataWithOther(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  clearable
+                  :style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="onDataChange(column)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                  <Option key="__Other" value="__Other">其他</Option>
+                </Select>
+                <Input
+                  type="text"
+                  v-show="parseDataWithOther(data, column) == '__Other'"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :style="{ width: column.controlWidth == null ? '40%' : column.controlWidth + 'px' }"
+                  style="margin-left: 4px"
+                  :maxlength="column.maxLength"
+                  :placeholder="column.description"
+                  @on-change="onDataChange(column)"
+                />
+              </template>
+              <!-- <template v-else-if="column.controlType === 'AutoComplete'">
+                                <AutoComplete :value="parseData(data, column.code) ? parseData(data, column.code) : ''"
+                                    @update:model-value="$event => setData(data, column.code, $event)"
+                                    :disabled="column.isReadonly"
+                                    clearable
+                                    @on-search="search => loadOption(data, column, search)"
+                                    @on-clear="() => loadOption(data, column)"
+                                    :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                                    :placeholder="column.description"
+                                    :transfer="true"
+                                    @on-change="selected => onDataChange(column, selected)">
+                                    <Option v-for="item in getDataSource(data, column)"
+                                        :key="item.id"
+                                        :value="item.name">{{ item.name }}</Option>
+                                </AutoComplete>
+                            </template> -->
+              <template v-else-if="column.controlType === 'ComboSelect'">
+                <Select
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  clearable
+                  filterable
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  @on-change="onDataChange(column)"
+                >
+                  <Option v-for="item in getDataSource(data, column)" :key="item.id" :value="item.id">{{ item.name }}</Option>
+                </Select>
+              </template>
+              <template v-else-if="column.controlType === 'DialogSelect'">
+                <dialog-select
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :source="column.source"
+                  :source-data-code="column.sourceDataCode"
+                  :source-display-code="column.sourceDisplayCode"
+                  :param="getParam(data, column)"
+                  :controlWidth="column.controlWidth"
+                  @on-change="selected => onDataChange(column, selected)"
+                ></dialog-select>
+              </template>
+              <template v-else-if="column.controlType === 'MultiDialogSelect'">
+                <dialog-select
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :multi="true"
+                  :readonly="column.isReadonly"
+                  :source="column.source"
+                  :source-data-code="column.sourceDataCode"
+                  :source-display-code="column.sourceDisplayCode"
+                  :param="getParam(data, column)"
+                  :controlWidth="column.controlWidth"
+                  @on-change="selected => onDataChange(column, selected)"
+                ></dialog-select>
+              </template>
+              <template
+                v-else-if="
+                  column.controlType === 'Date' ||
+                  column.controlType === 'DateTime' ||
+                  column.controlType === 'Year' ||
+                  column.controlType === 'Month' ||
+                  column.controlType === 'DateRange'
+                "
+              >
+                <DatePicker
+                  :type="column.controlType.toLowerCase()"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  @on-change="onDataChange(column)"
+                ></DatePicker>
+              </template>
+              <template v-else-if="column.controlType === 'Time'">
+                <TimePicker
+                  type="time"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :placeholder="column.description"
+                  :transfer="true"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  @on-change="onDataChange(column)"
+                ></TimePicker>
+              </template>
+              <template v-else-if="column.controlType === 'Check'">
+                <Checkbox
+                  :model-value="!!parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  size="large"
+                  @on-change="onDataChange(column)"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Switch'">
+                <Switch
+                  :model-value="!!parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :disabled="column.isReadonly"
+                  @on-change="onDataChange(column)"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Radio'">
+                <RadioGroup :model-value="parseData(data, column.code)" @update:model-value="$event => setData(data, column.code, $event)" @on-change="onDataChange(column)">
+                  <Radio v-for="item in getDataSource(data, column)" :key="item.id" :label="item.id" :disabled="column.isReadonly">
+                    <span>{{ item.name }}</span>
+                  </Radio>
+                </RadioGroup>
+              </template>
+              <template v-else-if="column.controlType === 'CheckGroup'">
+                <CheckboxGroup
+                  :model-value="parseArrayData(data, column.code)"
+                  @update:model-value="$event => setArrayData(data, column.code, $event)"
+                  @on-change="onDataChange(column)"
+                >
+                  <Checkbox v-for="item in getDataSource(data, column)" :key="item.id" :label="item.id" :disabled="column.isReadonly">
+                    <span>{{ item.name }}</span>
+                  </Checkbox>
+                </CheckboxGroup>
+              </template>
+              <template v-else-if="column.controlType === 'TextArea'">
+                <Input
+                  type="textarea"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :rows="column.controlHeight / 20"
+                  :maxlength="column.maxLength"
+                  :placeholder="column.description"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'RichEditor'">
+                <rich-editor
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :height="column.controlHeight"
+                  :width="column.controlWidth"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Attachment'">
+                <upload-attachment
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :maxCount="column.maxLength"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Image'">
+                <upload-image
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  :readonly="column.isReadonly"
+                  :maxCount="column.maxLength"
+                  :height="column.controlHeight"
+                  :width="column.controlWidth"
+                />
+              </template>
+              <template v-else-if="column.controlType === 'Slider'">
+                <Slider
+                  v-if="!column.isReadonly"
+                  :model-value="parseData(data, column.code)"
+                  @update:model-value="$event => setData(data, column.code, $event)"
+                  show-input
+                  :style="{ width: column.controlWidth == null ? null : column.controlWidth + 'px' }"
+                  :max="column.maxValue"
+                  :min="column.minValue"
+                />
+                <Input
+                  v-if="column.isReadonly"
+                  type="number"
+                  number
+                  readonly
+                  :model-value="parseData(data, column.code)"
+                  :style="{ width: column.controlWidth == null ? '100px' : column.controlWidth + 'px' }"
+                  :placeholder="column.description"
+                />
+              </template>
+            </FormItem>
+          </div>
+        </template>
+      </draggable>
+    </Form>
+    <!-- <FooterToolbar>
+            <Button type="primary" size="large">提交</Button>
+        </FooterToolbar>-->
+  </div>
+</template>
+<script>
+  import mixinPage from '../../mixins/page';
+  import mixin from './mixin';
+  import { mapActions } from 'vuex';
+  import modelApi from '../../api/model';
+  import customModelApi from '../../api/customModel';
+  import richEditor from '../richEditor';
+  import uploadAttachment from '../upload/upload-attachment';
+  import uploadImage from '../upload/upload-image';
+  import draggable from 'vuedraggable';
+  import dateFormat from 'date-fns/format';
+
+  export default {
+    mixins: [mixin, mixinPage],
+    components: { richEditor, uploadAttachment, uploadImage, draggable },
+    data() {
+      return {
+        formView: {},
+        columns: [],
+        tabs: [],
+        tabName: '',
+        rules: {},
+        data: null,
+        compareData: null
+      };
+    },
+    async created() {},
+    props: {},
+    computed: {},
+    methods: {
+      ...mapActions('admin/dataView', { loadDataView: 'load' }),
+      // 获取表格宽度
+      getWidth(column) {
+        switch (column.columnWidth) {
+          case 'Column12':
+            return (100 * 24) / 24;
+          case 'Column9':
+            return (100 * 18) / 24;
+          case 'Column8':
+            return (100 * 16) / 24;
+          case 'Column6':
+            return (100 * 12) / 24;
+          case 'Column4':
+            return (100 * 8) / 24;
+          case 'Column3':
+            return (100 * 6) / 24;
+          case 'Column2':
+            return (100 * 4) / 24;
+        }
+      },
+      // 根据选项卡序号返回列
+      tabColumns(index) {
+        return this.columns.filter(item => {
+          return item.tabIndex === index || item.tabIndex == null;
+        });
+      },
+      // 初始化
+      init(formView, columns) {
+        this.formView = formView;
+        this.columns = columns;
+
+        // 设置初始值
+        this.data = this.getDefaultData();
+
+        setTimeout(() => {
+          // 初始化板块
+          this.initTab();
+
+          // 初始化静态选项
+          this.initStaticItem();
+
+          // 初始化触发规则
+          this.initTrigger();
+
+          this.onDataChange();
+        });
+      },
+      // 初始化板块
+      initTab() {
+        if (!!(this.formView.tab || '').trim()) {
+          this.tabs = this.formView.tab.split(',');
+        } else {
+          this.tabs = [this.formView.name];
+        }
+
+        this.tabName = this.tabs[0];
+      },
+      // 初始化静态选项
+      initStaticItem() {
+        this.columns.forEach(column => {
+          if (column.isStaticItem) {
+            column.dataSource = [];
+
+            if (!!(column.itemData || '').trim()) {
+              column.itemData.split(/[\n]/).forEach(item => {
+                if (!!(item || '').trim()) {
+                  if (item.split(':').length > 1) {
+                    let key = item.split(':')[0];
+                    let value = item.split(':')[1];
+
+                    column.dataSource.push({
+                      id: key,
+                      name: value
+                    });
+                  } else {
+                    column.dataSource.push({
+                      id: item,
+                      name: item
+                    });
+                  }
+                }
+              });
+            }
+          }
+        });
+      },
+      // 初始化触发规则
+      initTrigger() {
+        // 触发规则
+        this.columns.forEach(column => {
+          column.triggers = [];
+        });
+
+        // 数据源中包含变量需要刷新
+        this.columns
+          .filter(column => {
+            return !!(column.source || '').trim() && !!(column.param || '').trim();
+          })
+          .forEach(column => {
+            let param = JSON.parse(column.param);
+            for (let key in param) {
+              this.columns
+                .filter(item => {
+                  return param[key] == item.code || param[key].split('.')[0] + 'ID' == item.code;
+                })
+                .forEach(item => {
+                  item.triggers.push(this.copy(column));
+                });
+            }
+          });
+      },
+      // 填充数据源
+      async fillDataSource(data, column, param) {
+        // 参数完整，查询数据
+        let res;
+        if (column.isSourceCustom) {
+          res = await customModelApi.query(column.source, param);
+        } else {
+          res = await modelApi.query(column.source, param);
+        }
+
+        column.rawData = res.data;
+
+        if (column.controlType === 'TreeSelect' || column.controlType === 'MultiTreeSelect') {
+          let data = res.data.map(item => {
+            return {
+              id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
+              name: this.parseData(item, column.sourceDisplayCode),
+              parentID: item.parentID
+            };
+          });
+
+          column.dataSource = this.getTreeDataSource(data, column, null);
+        } else {
+          column.dataSource = res.data.map(item => {
+            return {
+              id: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
+              name: this.parseData(item, column.sourceDisplayCode)
+            };
+          });
+
+          // 默认第一项
+          if (data) {
+            if (this.parseData(data, column.code) == null && column.isDefaultFirst && res.data.length > 0) {
+              this.setData(data, column.code, this.parseData(res.data[0], column.sourceDataCode));
+
+              if (column.sourceDataCode == 'id' && column.code.length > 2) {
+                let code = column.code.substr(0, column.code.length - 2);
+                let model = column.rawData.find(item => {
+                  return item.id == this.parseData(data, column.code);
+                });
+
+                this.setData(data, code, model);
+              }
+            }
+          }
+        }
+
+        //this.$forceUpdate();
+
+        // 级联更新时清空数据
+        if (column.controlType == 'Select' || column.controlType == 'ComboSelect' || column.controlType == 'Radio') {
+          if (
+            !column.dataSource.some(item => {
+              return item.id == this.parseData(data, column.code);
+            })
+          ) {
+            // 数据不存在于此数据源，清空数据
+            this.setData(data, column.code, null);
+
+            // 触发
+            column.triggers.forEach(item => {
+              item.needClear = true;
+            });
+          }
+        }
+      },
+      // 获取树结构数据源
+      getTreeDataSource(data, column, parentID) {
+        let result = data
+          .filter(item => {
+            return item.parentID == parentID;
+          })
+          .map(item => {
+            return {
+              value: !(column.sourceDataCode || '').trim() ? item.id : this.parseData(item, column.sourceDataCode),
+              title: this.parseData(item, column.sourceDisplayCode),
+              selected: false,
+              checked: false
+            };
+          });
+
+        if (result.length > 0) {
+          for (let item of result) {
+            item.expand = true;
+            item.children = this.getTreeDataSource(data, column, item.value);
+          }
+        }
+
+        return result;
+      },
+      // 获取数据源
+      getDataSource(data, column) {
+        if (column.dataType && column.dataType.indexOf('Enum:') === 0) {
+          // 枚举
+          return this.getEnumList(column.dataType.split(':')[1]);
+        } else {
+          return column.dataSource == null ? [] : column.dataSource;
+        }
+      },
+      // // 可筛选下拉框加载数据
+      // loadOption(data, column, keyword) {
+      //     let param = this.getParam(data, column);
+
+      //     if (param != null) {
+      //         if (!(keyword || '').trim() && this.parseData(data, column.code) != null && column.controlType !== 'AutoComplete') {
+      //             param[column.sourceDataCode] = this.parseData(data, column.code);
+      //         } else {
+      //             param.keyword = keyword;
+      //         }
+      //         param.per = 20;
+
+      //         this.fillDataSource(data, column, param);
+      //     } else {
+      //         // 参数不完整，清空数据
+      //         column.dataSource = [];
+      //         this.setData(data, column.code, null);
+      //         // column.displayValue = null;
+
+      //         // 触发
+      //         column.triggers.forEach(item => {
+      //             item.needRefresh = true;
+      //         });
+      //     }
+      // },
+      // 数据变化事件
+      async onDataChange(sender) {
+        // 计算需要刷新的字段
+        if (sender == null || sender.triggers !== []) {
+          this.columns.forEach(function (column) {
+            if (
+              !!(column.source || '').trim() &&
+              (sender == null ||
+                sender.triggers.some(item => {
+                  return item.id === column.id;
+                }))
+            ) {
+              column.needRefresh = true;
+            }
+          });
+        }
+
+        // 刷新数据源
+        while (true) {
+          let column = this.columns.filter(item => {
+            return item.needRefresh == true || item.needClear == true;
+          })[0];
+
+          if (column == null) {
+            // 没有需要刷新的字段
+            break;
+          }
+
+          // 重新加载数据源
+          if (column.needClear && this.parseData(this.data, column.code) != null) {
+            this.setData(this.data, column.code, null);
+            // 触发
+            column.triggers.forEach(item => {
+              item.needClear = true;
+            });
+          } else if (column.needRefresh && !!(column.source || '').trim()) {
+            let param = this.getParam(this.data, column);
+
+            if (
+              column.controlType === 'Select' ||
+              column.controlType === 'MultiSelect' ||
+              column.controlType === 'TreeSelect' ||
+              column.controlType === 'MultiTreeSelect' ||
+              column.controlType === 'SelectWithOther' ||
+              column.controlType === 'ComboSelect' ||
+              column.controlType === 'Radio' ||
+              column.controlType === 'CheckGroup'
+              // column.controlType === 'AutoComplete'
+            ) {
+              // 选择框、单选框组
+              if (param != null) {
+                this.fillDataSource(this.data, column, param);
+              } else {
+                // 参数不完整，清空数据
+                column.dataSource = [];
+                this.setData(this.data, column.code, null);
+                // column.displayValue = null;
+
+                // 触发
+                column.triggers.forEach(item => {
+                  item.needClear = true;
+                });
+              }
+            } else if (column.controlType === 'List') {
+              if (param != null) {
+                // 参数完整，查询数据
+                let res;
+
+                let tableView = this.$refs['list_' + column.code][0].tableView;
+
+                let filtering = tableView.filtering;
+
+                if (!!(filtering || '').trim()) {
+                  param = {
+                    ...param,
+                    ...JSON.parse(filtering)
+                  };
+                }
+
+                if (column.isSourceCustom) {
+                  res = await customModelApi.query(column.sourceModel, param);
+                } else {
+                  res = await modelApi.query(column.sourceModel, param, tableView.functionName, tableView.functionType);
+                }
+
+                this.$refs['list_' + column.code][0].loadData(res.data);
+              }
+            }
+          }
+
+          // 重新加载公式
+          // if (!!(column.calculate || '').trim()) {
+          //     let data = this.calculate(column.calculate, this.data);
+          //     this.setData(this.data, column.code, data);
+          // }
+
+          column.needClear = false;
+          column.needRefresh = false;
+        }
+      },
+      // 获取默认值
+      getDefaultData() {
+        let data = {};
+        this.columns.forEach(item => {
+          if (item.defaultValue) {
+            if (item.defaultValue == '{today}') {
+              // 当前日期
+              let date = new Date();
+              let value = date.toISOString().replace(/T.*/, '');
+              this.setData(data, item.code, new Date(value));
+            } else if (item.defaultValue.startsWith('{today(') && item.defaultValue.endsWith(')}')) {
+              // 当前时间转字符串
+              let format = item.defaultValue.substr(7, item.defaultValue.length - 9);
+              this.setData(data, item.code, dateFormat(new Date(), format));
+            } else if (item.defaultValue == '{currentUser}') {
+              // 当前用户
+              this.setData(data, item.code, this.info.name);
+            } else {
+              if (item.dataType === 'Integer') {
+                this.setData(data, item.code, parseInt(item.defaultValue));
+              } else if (item.dataType === 'Decimal') {
+                this.setData(data, item.code, parseFloat(item.defaultValue));
+              } else if (item.dataType === 'Boolean' && item.defaultValue.toUpperCase == 'TRUE') {
+                this.setData(data, item.code, true);
+              } else if (item.dataType === 'Boolean' && item.defaultValue.toUpperCase == 'FALSE') {
+                this.setData(data, item.code, false);
+              } else {
+                this.setData(data, item.code, item.defaultValue);
+              }
+            }
+          } else {
+            if (item.dataType === 'Boolean') {
+              this.setData(data, item.code, false);
+            } else {
+              this.setData(data, item.code, null);
+            }
+          }
+        });
+
+        for (let key in this.defaultData) {
+          this.setData(data, key, this.defaultData[key]);
+        }
+
+        return data;
+      },
+      // 鼠标移入
+      mouseover(column) {
+        column.showButton = true;
+        //this.$forceUpdate();
+      },
+      // 鼠标移出
+      mouseleave(column) {
+        column.showButton = false;
+        //this.$forceUpdate();
+      },
+      // 编辑
+      edit(column, index) {
+        this.$emit('edit', { column, index });
+      },
+      // 删除
+      remove(column, index) {
+        this.$emit('remove', { column, index });
+      },
+      // 根据表达式取值（带其他）
+      parseDataWithOther(model, column) {
+        let expression = column.code;
+        let selectValue = this.parseData(model, expression + '_o');
+
+        let value = this.parseData(model, expression);
+        let dataSource = this.getDataSource(model, column);
+
+        if (selectValue != null) {
+          return selectValue;
+        } else if (value == null) {
+          return null;
+        } else if (
+          dataSource &&
+          dataSource.some(item => {
+            return item.id == value;
+          })
+        ) {
+          return value;
+        } else {
+          return '__Other';
+        }
+      },
+      // 根据表达式赋值（带其他）
+      setDataWithOther(model, expression, value) {
+        this.setData(model, expression + '_o', value);
+        if (value != '__Other') {
+          this.setData(model, expression, value);
+        } else {
+          this.setData(model, expression, null);
+        }
+      },
+      // 根据表达式取值（树）
+      parseTreeData(data, code) {
+        let value = this.parseData(data, code);
+
+        if (value == null) {
+          return '';
+        } else {
+          return value;
+        }
+      }
+    }
+  };
+</script>
+
+<style>
+  .draggable .ivu-form-item-content {
+    margin-bottom: 8px;
+  }
+</style>