olp-table 5.3.7 → 5.5.1

package/src/views/tree/components/form-config/index.vue

@@ -1,967 +0,0 @@
-<template>
-  <div>
-    <div class="header">
-      <el-form label-width="80">
-        <el-row>
-          <el-col :span="5">
-            <el-form-item label="表单类型">
-              <el-radio-group v-model="formType">
-                <el-radio :value="0" :label="0" size="large" style="font-size: 20px;">基础表单</el-radio>
-                <el-radio :value="1" :label="1" size="large">设计器表单</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="5" v-if="formType == 0">
-            <el-form-item label="表单设计">
-              <!-- 表单设计 -->
-              <el-radio-group v-model="formConfig" style="margin-left: 50px;">
-                <el-radio :value="0" :label="0" size="large" style="font-size: 20px;">快捷设计</el-radio>
-                <el-radio :value="1" :label="1" size="large">编码设计</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4" v-if="formType == 1">
-            <el-form-item label="表单名称">
-              <olDictTag v-model="customForm" @change="onChangeForm" placeholder="请输入表单名称"
-                         code="online,form_designer,description,id" like="desc_code"
-              ></olDictTag>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4" v-if="formType == 2">
-            <el-form-item label="表单文件路径">
-              <el-input style="margin-left: 20px;width:500px" v-model="customUrl" size="large"
-                        placeholder="请输入表单文件路径:views/xxx">
-                <template #append>
-                  <el-button :icon="Search" @click="$refs.vComponent.setComponent(customUrl,'init')"/>
-                </template>
-              </el-input>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="5">
-            <el-form-item label="保存路径">
-              <el-input v-model="form.saveUrl"
-                        style="margin-left: 20px;"></el-input>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="4" v-if="type == 'edit' && formType == 0">
-            <el-form-item label="更新条件">
-              <el-input v-model="form.updateKey"
-                        style="margin-left: 20px;"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4">
-            <el-button type="primary" style="margin-left: 40px" @click="showViewForm">表单弹框预览</el-button>
-            <vForm ref="vFormViewer" v-if="dialogTableVisible"></vForm>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-
-    <el-row style="height:565px" :gutter="24">
-
-      <!-- 基础表单 -->
-      <el-col :span="12" v-if="formType == 0">
-        <el-card class="box-card">
-          <el-scrollbar max-height="500px">
-            <avue-form v-model="state.baseForm" :option="baseOption"></avue-form>
-          </el-scrollbar>
-        </el-card>
-      </el-col>
-
-      <!-- 表单设计 -->
-      <el-col :span="12" v-if="formType == 0">
-        <!-- 快捷设计 -->
-        <el-card class="box-card" v-show="formConfig == 0">
-          <!-- 表单 -->
-          <el-form :inline="true" :model="baseOption" class="demo-form-inline">
-            <el-row>
-              <el-col :span="12">
-                <el-form-item label="每行个数">
-                  <el-input-number style="width: 240px" v-model="designForm.span" placeholder="请输入每行的个数"
-                                   @change="designFormChange"
-                                   :min="1" :max="4"/>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="label宽度">
-                  <el-input-number style="width: 240px" v-model="baseOption.labelWidth" placeholder="label宽度"
-                                   @change="designFormChange"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="弹窗宽度">
-                  <el-input-number style="width: 240px" v-model="baseOption.diaLogWidth" placeholder="请输入弹窗宽度"
-                                   @change="designFormChange"
-                                   :min="100" :max="1920"/>
-                </el-form-item>
-              </el-col>
-              <el-col :span="12">
-                <el-form-item label="弹窗高度">
-                  <el-input-number style="width: 240px" v-model="baseOption.diaLogHeight" placeholder="请输入弹窗高度"
-                                   @change="designFormChange"
-                                   :min="50" :max="1080"/>
-                </el-form-item>
-              </el-col>
-            </el-row>
-
-          </el-form>
-
-          <!-- 表格 -->
-          <vxe-grid
-              v-bind="gridOptions"
-              ref="vexGridRef"
-              :expand-config="{labelField: 'seq'}"
-              resizable
-              row-key
-          >
-            <!-- 通用弹窗 -->
-            <template #change="{column,row}">
-              <olCodemirrorTag v-model="row[column.field]" @confirm="codeMirrorChange(row)"/>
-            </template>
-            <!-- 通用输入框 -->
-            <template #input_default="{column,row}">
-              <el-input v-model="row[column.field]" @change="inputChange(row)"></el-input>
-            </template>
-            <!-- 通用多选框 -->
-            <template #checkedBox_header="{ column }">
-              <div style="display: flex;align-items: center;">
-                <el-checkbox v-model="column.params.all" @change="headerClick(column)"></el-checkbox>
-                <span style="margin-left: 5px;">{{ column.title }} </span>
-
-              </div>
-            </template>
-            <template #checkedBox_default="{ column, row }">
-              <el-checkbox v-model="row[column.field]" @change="checkBoxClick(column, row)" true-value="1"
-                           :true-label="0" :false-label="1"
-                           false-value="0"></el-checkbox>
-            </template>
-            <!-- 通用下拉框 -->
-            <template #select_default="{column,row}">
-              <olDictTag
-                  code="select_dom"
-                  v-model="row[column.field]"
-                  @change="dictChange(row)"></olDictTag>
-            </template>
-            <!-- 展开行 -->
-            <template #seq="{  rowIndex}">
-              <span>{{ rowIndex + 1 }}</span>
-            </template>
-            <template #content="{ row }">
-              <div style="padding:30px 0 12px;display: flex;">
-                <avue-form ref="formRef"
-                           :option="expandForm"
-                           v-model="row.form"
-                           @change="refreshForm()"
-                >
-                  <!-- 通用弹窗 -->
-                  <template #change1>
-                    <olCodemirrorTag v-model="row.form.change"/>
-                  </template>
-                </avue-form>
-              </div>
-            </template>
-            <template #operate="{ row }">
-              <el-button @click="removeRowEvent(row)" type="danger" circle plain>
-                <el-icon>
-                  <Delete/>
-                </el-icon>
-              </el-button>
-            </template>
-          </vxe-grid>
-        </el-card>
-
-        <!-- 编码设计 -->
-        <div style="width:100%;height:calc(100% - 40px);position: relative;" v-show="formConfig == 1">
-          <codemirror
-              ref="mycode"
-              style="height: 92%;max-height: 510px;text-align: left;"
-              v-model="codeForm"
-              :autofocus="true"
-              :lint="true"
-              :indent-with-tab="true"
-              :lineWrapping="true"
-              :tabSize="2"
-              :extensions="state.extensions"
-          />
-          <el-button @click="codeToData" type="primary" style="height:40px;width: 100%;">生成</el-button>
-        </div>
-
-      </el-col>
-
-      <!-- 自定义表单 -->
-      <el-col :span="24" v-if="formType == 1 || formType == 2" style="height: 100%;">
-        <el-card class="box-card">
-          <el-scrollbar max-height="500px">
-            <VFormRender v-if="formType == 1" :key="formKey" :form-json="formJson" :form-data="formData"
-                         :option-data="optionData"
-                         ref="vFormRef">
-            </VFormRender>
-            <vComponent ref="vComponent" v-if="formType == 2"/>
-          </el-scrollbar>
-        </el-card>
-      </el-col>
-    </el-row>
-
-  </div>
-</template>
-
-<script>
-import vForm from "@/components/table/ol-form"
-import {Delete, Search} from '@element-plus/icons-vue'
-import {reactive, ref, defineExpose, defineEmits, nextTick, onMounted, defineProps, inject} from "vue";
-import vComponent from "@/components/v-component/index.vue";
-import {Codemirror} from "vue-codemirror";
-import {javascript} from "@codemirror/lang-javascript";
-import {oneDark} from "@codemirror/theme-one-dark";
-import {useMessage} from "@/utils/message";
-import {get} from "@/utils/http/httpUtils";
-import Sortable from "sortablejs";
-import {storeDictType} from "@/store/dictType";
-import {storeDict} from "@/store/dict";
-import VXETable from "vxe-table";
-
-export default {
-  name: 'FormConfig',
-  components: {},
-  props: {
-    type: {}
-  },
-  inject: ['treeConfigAll', 'addOrEditRootData', 'http'],
-  data() {
-    return {
-      data: [
-        {index: "t1", type: "主表", joinTable: "", joinFiled: "/", deleteWhere: 'id=${id}'}
-      ],
-      isHovering: false,
-      dict: storeDict(),
-      dictType: storeDictType(),
-      customUrl: '',
-      vexGridRef: '',
-      vFormViewer: '',
-      dialogTableVisible: false,
-      events: ['change'],
-      // 基础表单
-      baseOption: {
-        submitBtn: false,
-        emptyBtn: false,
-        labelWidth: 125,
-        column: []
-      },
-      //编码设计
-      codeForm: {},
-      form: {
-        updateKey: '',
-        saveUrl: '',
-      },
-      state: {
-        show: false,
-        extensions: [javascript(), oneDark],
-        values: null,
-        err: false,
-        baseForm: {},
-        baseFormRender: {},
-      },
-
-      formMap: {},
-      update: true,
-      //表单类型
-      formType: 0,
-      //表单设计
-      formConfig: 0,
-      //快捷设计表单
-      designForm: {
-        span: 2,
-      },
-      //快捷设计表格
-      gridOptions: {
-        border: true,
-        resizable: true,
-        showOverflow: true,
-        height: 400,
-        columns: [
-          {
-            type: "expand",
-            width: 61,
-            title: "序号",
-            fixed: "left",
-            slots: {
-              content: 'content',
-              default: 'seq'
-            },
-          },
-          {
-            field: 'prop',
-            width: 80,
-            className: 'move',
-            title: "字段名"
-          },
-          {
-            title: '必填',
-            field: 'required',
-            params: {
-              all: null
-            },
-            slots: {
-              header: 'checkedBox_header',
-              default: 'checkedBox_default'
-            },
-          },
-          {
-            field: 'title',
-            title: "标题"
-          },
-          {
-            field: 'showName',
-            title: "label",
-            slots: {
-              default: 'input_default'
-            },
-          },
-          {
-            title: '控件类型',
-            field: 'selectDom',
-            width: 200,
-            slots: {
-              default: 'select_default'
-            },
-          },
-          {
-            title: '更新回调',
-            field: 'change',
-            width: 100,
-            slots: {
-              default: 'change'
-            },
-          },
-          {
-            title: '操作',
-            width: 60,
-            fixed: 'right',
-            slots: {
-              default: 'operate'
-            }
-          }
-        ],
-        data: []
-      },
-      //展开行表单
-      expandForm: {
-        submitBtn: false,
-        emptyBtn: false,
-        span: 8,
-        column: [
-          {
-            label: '禁用',
-            prop: 'disabled',
-            type: 'switch',
-            dicData: [{
-              label: '关',
-              value: 0
-            }, {
-              label: '开',
-              value: 1
-            }]
-          },
-          {
-            label: '标题宽度',
-            prop: 'labelWidth',
-          },
-          {
-            label: '数据字典',
-            prop: 'dictCode',
-            type: 'select',
-            allowCreate: true,
-            filterable: true,
-            //数据字典属性的配置对象
-            props: {
-              label: 'dictLabel',
-              value: 'dictValue'
-            },
-            dicData: [],
-          },
-          {
-            label: '默认值',
-            prop: 'value',
-          },
-          {
-            label: '输入框提示',
-            prop: 'placeholder',
-          },
-          {
-            label: '数据字典表',
-            prop: 'dictTable',
-          },
-        ]
-      },
-      //自定义表单值
-      formJson: {},
-      formData: {},
-      formKey: 0,
-      optionData: {},
-      vFormRef: null,
-      customForm: "",
-      customOptions: [],
-    }
-  },
-  created() {
-    this.initConfigDict()
-  },
-  methods: {
-    initConfigDict() {
-      for (const col of this.expandForm.column) {
-        if (col.prop == 'dictCode') {
-          col.dicData = this.dictType.val()
-          break
-        }
-      }
-    },
-    showViewForm() {
-      this.dialogTableVisible = true;
-      this.$nextTick(() => {
-        let data = {
-          type: this.formType,
-          title: "新增",
-          theme: 't1'
-        }
-        data.form = data.type == 0 ? this.baseOption : this.formJson
-        this.$ref.vFormViewer.init(data)
-      })
-    },
-    //表头全选框更新
-    headerClick(column) {
-      this.gridOptions.data.forEach(item => {
-        if (column.params.all) {
-          item.rules = [{
-            required: true,
-            message: '请输入' + item.title,
-            trigger: 'blur'
-          }]
-          item[column.field] = '1'
-        } else {
-          item[column.field] = '0'
-          item.rules = null
-        }
-        this.checkBoxChange(item)
-      })
-    },
-    //表格多选框更新
-    checkBoxClick(column, row) {
-      if (row.required == '1') {
-        row.rules = [{
-          required: true,
-          message: '请输入' + row.title,
-          trigger: 'blur'
-        }]
-      }
-      if (row.required == '0') {
-        row.rules = null
-      }
-      this.checkBoxChange(row)
-    },
-
-    checkBoxChange(row) {
-      this.$nextTick(() => {
-        this.baseOption.column.forEach(item => {
-          if (item.prop == row.prop) {
-            item.rules = row.rules
-            this.codeForm = this.jsonFormat(this.baseOption)
-            return
-          }
-        })
-      })
-    },
-//获取数据
-    setData(data) {
-      if (!data) return
-      this.formType = parseInt(data.formMain.designer)
-      this.form.updateKey = data.formMain.updateKey
-      this.form.saveUrl = data.formMain.saveUrl
-      this.customForm = data.formMain.customForm
-      //基础表单
-      //JSON字符串
-      if (data.formJson.optionJson) {
-        this.codeForm = data.formJson.optionJson
-        this.codeToData()
-      }
-      if (data.formJson.customJson) {
-        //自定义表单
-        this.formJson = JSON.parse(data.formJson.customJson)
-      }
-    },
-    codeToData() {
-      try {
-        this.getFormatter();
-        let value = JSON.parse(this.codeForm);
-
-        this.setSort(value);
-        this.codeForm = this.jsonFormat(value)
-        //更新快捷设计表格的数据
-        this.setTableData(value)
-        if (!value.labelWidth) value.labelWidth = 125
-        this.baseOption = value;
-        this.setBaseOption(value.column);
-        value.span = value.span ? value.span : 12
-        //计算表单每行个数
-        this.designForm.span = this.parseInt(24 / value.span)
-      } catch (e) {
-        console.error(e)
-        const msg = useMessage() // 消息弹窗
-        msg.error('生成失败,请检查对象格式是否正确' + e)
-      }
-    },
-    getFormatter() {
-      //正则表达式替换字符串的值
-      let v = this.codeForm.replace(/,}/gi, "}").replace(/,]/gi, "]");
-      this.codeForm = JSON.stringify(JSON.parse(v), null, 4)
-    },
-    setSort(value) {
-      value.column.sort((a, b) => {
-        return a.sort - b.sort
-      })
-      for (let i = 0; i < value.column.length; i++) {
-        value.column.sort = i + 1
-      }
-    },
-    //JSON格式化
-    jsonFormat(val) {
-      return JSON.stringify(JSON.parse(JSON.stringify(val)), null, 4)
-    },
-    //编码设计生成后更新快捷设计表格数据
-    setTableData(value) {
-      let data = [];
-      for (let item of value.column) {
-        let tableObj = this.getTableObject(item);
-        data.push(tableObj);
-      }
-      this.$nextTick(() => {
-        this.gridOptions.data = data;
-      })
-    },
-    setBaseOption(columns) {
-      columns = JSON.parse(JSON.stringify(columns));
-      for (let column of columns) {
-        try {
-          if (column.disabled == 1) {
-            column.disabled = true;
-          }
-          this.setEvents(column);
-          this.setDictCode(column)
-        } catch (e) {
-          console.error(e)
-        }
-      }
-      this.baseOption.column = columns;
-    },
-    setDictCode(column) {
-      if (column.selectDom != 1 && column.dictCode) {
-        this.getDicData(column.dictCode, column)
-      }
-    },
-    setEvents(column) {
-      for (let event of this.events) {
-        if (column[event] != undefined && column[event] != '') {
-          try {
-            column[event] = eval("(params)=>{try{" + this.replaceDollarBraces(column[event]) + "}catch (e) {}}");
-          } catch (e) {
-            console.error(e)
-          }
-        } else {
-          delete column[event];
-        }
-      }
-    },
-    replaceDollarBraces(str) {
-      return str.replace(/\$\{?([^{}]+)\}?/g, function (match, innerContent) {
-        return innerContent ? `'${innerContent}'` : match;
-      });
-    },
-    getTableObject(item) {
-      let obj = {
-        prop: item.prop || item.field,
-        title: item.title || item.label,
-        showName: item.title ? item.label : "",
-        required: item.rules ? '1' : '0',
-        change: item.change ? item.change : null,
-        selectDom: this.getFormType({selectDom: item.type ? item.type : 'input'}),
-        //有字典值则赋值否则为空对象
-        form: {}
-      }
-      for (let key of Object.keys(item)) {
-        if (!obj[key]) {
-          obj.form[key] = item[key]
-        }
-      }
-      return obj
-    },
-    //控件类型转换
-    getFormType(row) {
-      let val = row.selectDom
-      if (val != '' || val != undefined || val) {
-        let type = ""
-        let map = {
-          input: '1',
-          select: '2',
-          time: '3',
-          radio: '4',
-          checkbox: '5',
-          date: '6',
-          number: '7',
-        }
-        if (isNaN(val)) {
-          //不是数字，通过健找值
-          type = map[val]
-        } else {
-          //是数字,通过值找健
-          // 使用 Object.values() 获取对象的所有值
-          const arr = Object.values(map);
-          // 使用 Array.prototype.indexOf() 查找指定值在数组中的索引位置
-          const index = arr.indexOf(val);
-          // 使用 Object.keys()[index] 获取对应索引位置的键名
-          type = Object.keys(map)[index];
-
-          if (type == "") {
-            type = 'input'
-          } else if (type == "select" || type == "checkbox" || type == "radio") {
-            this.getDicData(row.dictCode, row)
-          }
-        }
-        return type
-      }
-    },
-    //获取字典
-    getDicData(code, row) {
-      if (code == "" || !code) {
-        delete row.dicData
-      } else {
-        row.dicData = this.dict.val(code)
-        this.setDicData(row)
-      }
-    },
-    setDicData(row) {
-      this.baseOption.column.forEach(item => {
-        if (item.prop == row.prop) {
-          item.dicData = row.dicData
-          return
-        }
-      })
-    },
-    //初始化数据
-    init(data) {
-      //基础表单
-      const option = {
-        submitBtn: false,
-        emptyBtn: false,
-        span: 12,
-        labelWidth: 80,
-        column: []
-      }
-      //快捷设计表格
-      const tableData = []
-      let index = 0
-
-      //将列配置的新增赋值到表单和表格中
-      data.forEach(item => {
-        if (item[this.type + 'Display'] == 1) {
-          const formObj = {
-            label: item.label,
-            prop: item.field,
-            sort: index,
-            type: this.getFormType(item)
-          }
-          const tableObj = {
-            prop: item.field,
-            title: item.title,
-            sort: index,
-            //为空默认文本框
-            selectDom: item.selectDom ? item.selectDom : 1,
-            required: item.required,
-            //有字典值则赋值否则为空对象
-            form: {}
-          }
-          if (item.dictCode != '' || item.dictCode != null) {
-            tableObj.form = {dictCode: item.dictCode}
-          }
-          if (item.dictTable != '' || item.dictTable != null) {
-            tableObj.form = {dictTable: item.dictTable}
-          }
-          for (let key of Object.keys(item)) {
-            if (!tableObj[key]) {
-              tableObj.form[key] = item[key]
-            }
-          }
-          for (let event of this.events) {
-            if (item[event] != undefined && !(item[event] instanceof Function)) {
-              formObj[event] = eval("(params)=>{" + item[event] + "}")
-            }
-          }
-          index++;
-          option.column.push(formObj)
-          tableData.push(tableObj)
-        }
-      })
-      this.baseOption = option
-      this.gridOptions.data = tableData
-      //计算每行列数
-      this.designForm.span = 24 / this.baseOption.span
-      this.codeForm = this.jsonFormat(this.baseOption)
-      this.updateSort();
-    },
-    getColumn(item) {
-      let obj = {
-        prop: item.field,
-        title: item.title || item.label,
-        sort: this.gridOptions.data ? this.gridOptions.data.length : 0,
-        //为空默认文本框
-        selectDom: item.selectDom ? item.selectDom : 1,
-        //有字典值则赋值否则为空对象
-        form: item.dictCode != '' || item.dictCode ? {
-          dictCode: item.dictCode
-        } : {}
-      }
-      return obj;
-    },
-    //列配置新增多选更新
-    updateData(row, column) {
-      if (row[column.field] == '1') {
-        for (const item of this.gridOptions.data) {
-          if (item.prop == row.field) return
-        }
-        let tableObj = this.getColumn(row);
-        this.gridOptions.data.push(tableObj)
-      } else {
-        this.gridOptions.data = this.gridOptions.data.filter(item => item.prop != row.field)
-      }
-      this.reloadData();
-      this.refreshForm()
-    },
-    reloadData(data) {
-      if (data) {
-        this.gridOptions.data = data;
-      }
-      this.$ref.vexGridRef.reloadData(this.gridOptions.data)
-    },
-    //列配置新增全选与全不选
-    setAll({list, isAll}) {
-      let data = []
-      if (isAll) {
-        for (let item of list) {
-          data.push(this.getColumn(item));
-        }
-      }
-      this.reloadData(data);
-      this.refreshForm()
-    },
-    //基础表单 > 快捷设计表单更新
-    designFormChange() {
-      //行数转换为尺寸
-      this.baseOption.span = this.parseInt(24 / this.designForm.span)
-      //JSON格式化
-      this.codeForm = this.jsonFormat(this.baseOption)
-    },
-    codeMirrorChange(row) {
-      for (const row of this.gridOptions.data) {
-        this.setChange(row)
-      }
-    },
-    setChange(row) {
-      this.$nextTick(() => {
-        if (row.prop && row.change) {
-          for (let item of this.baseOption.column) {
-            if (item.prop == row.prop) {
-              item.change = row.change
-            }
-          }
-        }
-        this.codeForm = this.jsonFormat(this.baseOption)
-      })
-    },
-    //基础表单 > 快捷设计表格输入框更新
-    inputChange(row) {
-      this.$nextTick(() => {
-        if (row.prop != "") {
-          for (let item of this.baseOption.column) {
-            if (item.prop == row.prop) {
-              //将表格的label变成显示名或标题
-              if (row.showName != "") {
-                item.label = row.showName
-                item.title = row.title
-              } else {
-                item.label = row.title
-                delete item.title
-              }
-            }
-            break
-          }
-        }
-        this.codeForm = this.jsonFormat(this.baseOption)
-      })
-    },
-    //控件类型更新
-    dictChange(row) {
-      this.$nextTick(() => {
-        this.baseOption.column.forEach(item => {
-          if (item.prop == row.prop) {
-            item.type = this.getFormType(row)
-            this.codeForm = this.jsonFormat(this.baseOption)
-            return
-          }
-        })
-      })
-    },
-    refreshForm() {
-      if (this.update != true) {
-        setTimeout(() => {
-          this.refreshForm()
-        }, 200)
-      }
-      this.update = false;
-      let data = JSON.parse(JSON.stringify(this.gridOptions.data));
-      let columns = []
-      let index = 1;
-      for (let d of data) {
-        d.sort = index;
-        d.change = ''
-        columns.push(this.dataToCode(d));
-        index++;
-      }
-      columns.sort((a, b) => {
-        return a.sort - b.sort
-      })
-
-      this.setCodeForm(columns)
-      this.setBaseOption(columns);
-      this.update = true;
-    },
-    setCodeForm(columns) {
-      let option = JSON.parse(JSON.stringify(this.baseOption));
-      option.column = JSON.parse(JSON.stringify(columns));
-      this.codeForm = this.jsonFormat(option)
-    },
-    dataToCode({form, prop, selectDom, title}) {
-      let item = {prop: prop, selectDom: selectDom, label: form.showName ? form.showName : title};
-      if (selectDom != 1) {
-        item.type = this.getFormType({selectDom: selectDom})
-      }
-      for (let key of Object.keys(form)) {
-        if (form[key] != undefined && form[key] != '' && key.indexOf('$') == -1) {
-          item[key] = form[key];
-        }
-      }
-      return item;
-    },
-    //表格拖动更新
-    updateSort() {
-      this.$nextTick(() => {
-        //el绑定元素需要找到vxe的DOM下的tbody元素
-        let $vxeGrid = this.$refs.vexGridRef
-        let that = this
-        Sortable.create($vxeGrid.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
-          animation: 150,//拖拽动画过渡时间
-          sort: true,
-          handle: '.move', //必须设置该属性，属性值为你要拖动的该单元格的样式名
-          // 元素被选中
-          onStart: function (/**Event*/evt) {
-            //关闭所有展开行
-            $vxeGrid?.clearRowExpand()
-            evt.oldIndex;  // element index within parent
-          },
-          // 结束拖拽
-          onEnd: function (/**Event*/{oldIndex, newIndex}) {
-            const list = JSON.parse(JSON.stringify(that.gridOptions.data)) //保存旧数据
-            const targetRow = list.splice(oldIndex, 1)[0] //保存移动的元素并删除原列表中移动的元素
-            list.splice(newIndex, 0, targetRow) //插入到目标新索引中
-            const newsArr = JSON.parse(JSON.stringify(list)) //重新赋值数组
-            //将新表格数据重新排序
-            for (let i = 0; i < newsArr.length; i++) {
-              newsArr[i].sort = i
-            }
-            that.gridOptions.data = newsArr;
-            //把表单的排序号和表格的排序号保持一致
-            newsArr.forEach(tableItem => {
-              that.baseOption.column.forEach(formItem => {
-                if (tableItem.prop == formItem.prop) {
-                  formItem.sort = tableItem.sort
-                }
-              })
-            })
-            //将表单重新排序
-            that.baseOption.column.sort((a, b) => {
-              return a.sort - b.sort
-            })
-            that.codeForm = that.jsonFormat(that.baseOption)
-          },
-        });
-      });
-    },
-// 更换表单
-    onChangeForm(value) {
-      if (value) {
-        get(this.http, "/online/formDesigner/queryById", {
-          id: value
-        }).then((data) => {
-          this.formJson = JSON.parse(data.formJson)
-          this.formKey++
-        })
-      }
-    },
-    // 获取新增表单配置数据
-    getData() {
-      if (this.formType == 0 && this.gridOptions.data.length == 0) {
-        return undefined;
-      }
-      let obj = {
-        vexTable: this.gridOptions,
-        baseForm: this.baseOption,
-        codeForm: this.codeForm,
-        designer: this.formType,
-        updateKey: this.form.updateKey,
-        saveUrl: this.form.saveUrl,
-        customJson: this.formJson,
-        customForm: this.customForm
-      }
-      return obj
-    },
-    /**
-     * 右边字段配置删除行数据
-     * @param row
-     * @returns {Promise<void>}
-     */
-    async removeRowEvent(row) {
-      const type = await VXETable.modal.confirm('您确定要删除该数据?')
-      const $grid = this.$ref.vexGridRef
-      if ($grid && type === 'confirm') {
-        await $grid.remove(row)
-        this.gridOptions.data = this.gridOptions.data.filter(item => item._X_ROW_KEY != row._X_ROW_KEY)
-        this.removeColumnEvent(row)
-      }
-    },
-    /**
-     * 删除表单属性（快捷设计属性）
-     * @param row
-     */
-    removeColumnEvent(row) {
-      this.baseOption.column = this.baseOption.column.filter(item => item.prop != row.prop)
-      this.codeForm = this.jsonFormat(this.baseOption)
-    }
-  },
-  mounted() {
-    this.updateSort()
-  }
-}
-
-</script>
-
-<style lang="scss" scoped>
-.cm-editor {
-  height: 100%;
-}
-
-.box-card {
-  width: calc(100% - 24px);
-  height: calc(100% - 24px);
-}
-</style>