olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,967 @@
+<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>