olp-table 5.3.4 → 5.3.5

package/src/views/table/add-or-edit/config/form-config/index.vue

@@ -1,1179 +0,0 @@
-<template>
-  <div>
-    <!--  头部部分（操作按钮，总的配置信息）  -->
-    <div class="header">
-      <el-form label-width="80">
-        <el-row>
-          <el-col :span="6">
-            <el-form-item label="表单类型">
-              <el-radio-group v-model="formType">
-                <el-radio :value="0" :label="0">基础表单</el-radio>
-                <el-radio :value="1" :label="1">设计器表单</el-radio>
-                <!--          <el-radio :label="2"  >编程文件表单</el-radio>-->
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6" v-if="formType == 0">
-            <el-form-item label="表单设计">
-              <!-- 表单设计 -->
-              <el-radio-group v-model="formConfig" style="margin-left: 50px;" @change="refreshForm">
-                <el-radio :value="0" :label="0">快捷设计</el-radio>
-                <el-radio :value="1" :label="1">编码设计</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6" 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="6" v-if="formType == 2">
-            <el-form-item label="表单文件路径">
-              <el-input style="margin-left: 20px;width:500px" v-model="customUrl"
-                        placeholder="请输入表单文件路径:views/xxx">
-                <template #append>
-                  <el-button :icon="Search" @click="$refs.vComponent.setComponent(customUrl,'init')"/>
-                </template>
-              </el-input>
-            </el-form-item>
-          </el-col>
-          <el-button type="primary" style="margin-left: 40px" @click="showViewForm">表单弹框预览</el-button>
-          <el-button type="primary" v-if="formConfig == 0" @click="addColumn">新增列</el-button>
-        </el-row>
-        <el-row>
-          <el-col :span="6">
-            <el-form-item label="后端API">
-              <el-input v-model="form.saveUrl"
-                        style="margin-left: 20px;"></el-input>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="4" v-if="props.type == 'edit' && formType == 0 && !form.saveUrl">
-            <span style="margin-left:5px;color:red;float: left;position: relative;line-height: 30px;">更新条件*</span>
-            <el-form-item label-width="12">
-              <el-input ref="updateKey" v-model="form.updateKey"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="4" v-else-if="props.type != 'edit' && formType == 0 && !form.saveUrl">
-            <span style="margin-left:5px;float: left;position: relative;line-height: 30px;">uuid</span>
-            <el-form-item label-width="12">
-              <el-input ref="updateKey" v-model="form.updateKey"></el-input>
-            </el-form-item>
-          </el-col>
-          <el-col :span="6">
-            <el-form-item label="请求类型">
-              <el-radio-group v-model="form.requestType">
-                <el-radio value="post" label="POST">POST</el-radio>
-                <el-radio value="put" label="PUT">PUT</el-radio>
-              </el-radio-group>
-            </el-form-item>
-          </el-col>
-
-          <el-col :span="4">
-            <vForm ref="vFormViewer" v-if="dialogTableVisible"></vForm>
-          </el-col>
-        </el-row>
-      </el-form>
-    </div>
-
-
-    <el-row style="height:565px" :gutter="24">
-
-      <!-- 基础表单 -->
-      <el-col :span="10" v-if="formType == 0">
-        <el-card class="box-card">
-          <!-- 编辑表单实时预览 -->
-          <el-scrollbar max-height="500px">
-<!--            动态表单-->
-            <avue-form v-model="state.baseForm" :option="baseOption">
-              <!-- 动态生成插槽 -->
-              <template v-for="slotRow in dynamicSlotsTable" :key="slotRow.slotName" #[slotRow.slotName]="{ disabled, size }">
-                <!-- 根据配置动态渲染插槽内容 -->
-                <ol-table-select @olTableSelectChange="olTableSelectChange" :slotName="slotRow.slotName" :http="http"
-                                 :uuid="slotRow.config.uuid"
-                                 :config="slotRow.config"></ol-table-select>
-              </template>
-            </avue-form>
-          </el-scrollbar>
-        </el-card>
-      </el-col>
-
-      <!-- 表单设计 -->
-      <el-col :span="14" v-if="formType == 0">
-        <!-- 快捷设计 -->
-        <el-card class="box-card" v-show="formConfig == 0">
-          <!-- 表单 -->
-          <el-form :inline="true" :model="baseOption" size="small" class="demo-form-inline">
-            <el-row>
-              <el-col :span="6">
-                <el-form-item label="每行个数">
-                  <el-input-number style="width: 120px" v-model="designForm.span" placeholder="请输入每行的个数"
-                                   @change="designFormChange"
-                                   :min="1" :max="4"/>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="label宽度">
-                  <el-input-number style="width: 150px" v-model="baseOption.labelWidth" placeholder="label宽度"
-                                   @change="designFormChange"
-                  />
-                </el-form-item>
-              </el-col>
-              <el-col :span="9">
-                <el-form-item label="复制选中字段">
-                  <el-radio-group v-model="copeFiled">
-                    <el-radio :value="0" :label="0" @click.stop="copeFiledMethod">字段</el-radio>
-                    <el-radio :value="1" :label="1" @click.stop="copeFiledMethod(1)">隐藏</el-radio>
-                    <el-radio :value="2" :label="2" @click.stop="copeFiledMethod(2)">显示</el-radio>
-                    <!--          <el-radio :label="2"  >编程文件表单</el-radio>-->
-                  </el-radio-group>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <el-form-item label="弹框标题">
-                  <el-input v-model="baseOption.title"
-                            style="margin-left: 20px;"></el-input>
-                </el-form-item>
-              </el-col>
-              <el-col :span="8">
-                <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="8">
-                <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"
-              @edit-closed="dictChange"
-              :expand-config="{labelField: 'seq'}"
-              resizable
-          >
-            <!-- 通用弹窗 -->
-            <template #change="{column,row}">
-              <olCodemirrorTag
-                  :size="'small'" v-model="row[column.field]" @confirm="refreshForm"/>
-            </template>
-            <!-- 通用输入框 -->
-            <template #input_default="{column,row}">
-              <el-input v-model="row[column.field]" @change="refreshForm" size="small"></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]" true-value="1" false-value="0"
-                           @change="refreshForm"/>
-            </template>
-            <!-- 通用下拉框 -->
-            <template #select_default="{column,row}">
-              <olDictTag
-                  code="select_dom"
-                  :size="'small'"
-                  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 #attrs>
-                    <olCodemirrorTag v-model="row.form['attrs']"/>
-                  </template>
-                </avue-form>
-              </div>
-            </template>
-            <template #operate="{ row }">
-              <vxe-button size="mini" @click="removeRowEvent(row)" style="padding:0" icon="vxe-icon-delete"
-                          status="danger" type="text"/>
-              <vxe-button size="mini" style="padding:0" type="text">
-                <span class="vxe-icon-sort"/>
-              </vxe-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(true)" 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 setup>
-import vForm from "@/components/table/ol-form"
-import {Delete, Search} from '@element-plus/icons-vue'
-import {reactive, ref, defineExpose, defineEmits, nextTick, onMounted, defineProps, inject, markRaw,computed} 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, post} from "@/utils/http/httpUtils";
-import Sortable from "sortablejs";
-import {storeDictType} from "@/store/dictType";
-import {storeDict} from "@/store/dict";
-import VXETable from "vxe-table";
-import {handleTree} from "@/utils/tree";
-import {initDictTable} from "@/api/dist";
-import OlTableSelect from "@/components/ol-table-select.vue";
-
-
-const msg = useMessage() // 消息弹窗
-const http = inject('http')
-const dictType = storeDictType();
-const props = defineProps({type: {}});
-const customUrl = ref(undefined)
-
-const vexGridRef = ref(null)
-const vFormViewer = ref(null)
-const dialogTableVisible = ref(false)
-
-function setShow() {
-  updateSort()
-}
-
-function showViewForm() {
-  dialogTableVisible.value = true;
-  nextTick(() => {
-    let data = {
-      type: formType.value,
-      theme: 't1'
-    }
-    data.form = data.type == 0 ? baseOption.value : formJson.value
-    vFormViewer.value.init(data)
-  })
-}
-
-// 基础表单
-const baseOption = ref({
-  submitBtn: false,
-  emptyBtn: false,
-  labelWidth: 125,
-  comCommit: false,//如果为true,只提交form
-  column: []
-})
-//编码设计
-const codeForm = ref()
-const copeFiled = ref();
-const dict = storeDict();
-//表单类型
-const formType = ref(0)
-//表单设计
-const formConfig = ref(0)
-//快捷设计表单
-const designForm = ref({
-  span: 2,
-})
-//快捷设计表格
-const gridOptions = ref({
-  border: true,
-  resizable: true,
-  showOverflow: true,
-  size: 'mini',
-  height: 450,
-  editConfig: {
-    trigger: 'click',
-    mode: 'cell'
-  },
-  rowConfig: {
-    useKey: true,
-  },
-  align: 'center',
-  columns: [
-
-    {
-      title: '操作',
-      width: 70,
-      slots: {
-        default: 'operate'
-      }
-    },
-    {type: 'checkbox', width: 40,},
-    {
-      type: "expand",
-      width: 61,
-      title: "序号",
-      className: 'colExpand',
-      slots: {
-        content: 'content',
-        default: 'seq'
-      },
-    },
-    {
-      field: 'prop',
-      minWidth: 130,
-      editRender: {props: {clearable: true}, events: {change: refreshForm}, name: 'input'},
-      title: "字段名"
-    },
-    {
-      field: 'title',
-      width: 120,
-      title: "标题"
-    },
-    {
-      field: 'showName',
-      width: 120,
-      title: "label",
-      editRender: {props: {clearable: true}, events: {change: refreshForm}, name: 'input'},
-    },
-    {
-      title: '必填',
-      field: 'required',
-      width: 70,
-      params: {
-        all: null
-      },
-      slots: {
-        header: 'checkedBox_header',
-        default: 'checkedBox_default'
-      },
-    },
-    {
-      title: ' 不保存',
-      field: 'tableField',
-      width: 90,
-      params: {
-        all: null
-      },
-      slots: {
-        header: 'checkedBox_header',
-        default: 'checkedBox_default'
-      },
-    },
-    {
-      title: '控件类型',
-      field: 'selectDom',
-      width: 100,
-      editRender: {props: {clearable: true, filterable: true}, name: '$select', events: {change: refreshForm}, options: dict.val('select_dom')}
-    },
-    {
-      title: '数据字典',
-      field: 'dictCode',
-      allowCreate: true,
-      width: 120,
-      filterable: true,
-      //数据字典属性的配置对象
-      props: {
-        label: 'dictLabel',
-        value: 'dictValue'
-      },
-      editRender: {
-        props: {clearable: true, filterable: true}, name: '$select',
-         events: {change: refreshForm}, options: dictType.val()
-      }
-    },
-    {
-      title: '更新回调',
-      field: 'change',
-      width: 100,
-      slots: {
-        default: 'change'
-      },
-    },
-  ],
-  data: []
-})
-//展开行表单
-const expandForm = ref({
-  submitBtn: false,
-  emptyBtn: false,
-  span: 8,
-  column: [
-    {
-      label: '禁用',
-      prop: 'disabled',
-      type: 'switch',
-      value: false,
-      dicData: [{
-        label: '否',
-        value: false
-      }, {
-        label: '是',
-        value: true
-      }]
-    },
-    {
-      label: '隐藏',
-      prop: 'display',
-      type: 'switch',
-      value: true,
-      dicData: [{
-        label: '否',
-        value: true
-      }, {
-        label: '是',
-        value: false
-      }]
-    },
-    {
-      label: '标题宽度',
-      prop: 'labelWidth',
-    },
-    {
-      label: '默认值',
-      prop: 'value',
-    },
-    {
-      label: '输入框提示',
-      prop: 'placeholder',
-    },
-    {
-      label: '数据字典表',
-      prop: 'dictTable',
-    },
-    {
-      label: '字典dictUrl',
-      prop: 'dictUrl',
-    },
-    {
-      label: '其他属性',
-      prop: 'attrs',
-      slots: {
-        default: 'attrs'
-      },
-    },
-  ]
-})
-//自定义表单值
-const formJson = ref({})
-const formData = reactive({})
-const formKey = ref(0)
-const optionData = reactive({})
-const vFormRef = ref(null)
-const customForm = ref("")
-
-const copeFiledMethod = (value) => {
-  let checkboxRecords = vexGridRef.value.getCheckboxRecords();
-  if (checkboxRecords.length != 0) {
-    let filed = "";
-    for (let {prop} of checkboxRecords) {
-      if (filed.length != 0) {
-        filed += ",";
-      }
-      filed += prop;
-    }
-    if (value == 1) {
-      filed = "hideColumn('" + filed + "');";
-    } else if (value == 2) {
-      filed = "showColumn('" + filed + "');";
-    }
-    navigator.clipboard.writeText(filed).then(() => {
-      msg.success("复制成功！" + filed);
-    }).catch(err => {
-      msg.error("复制失败！" + filed);
-    });
-  }
-}
-//表头全选框更新
-const headerClick = (column) => {
-  gridOptions.value.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
-    }
-  })
-  refreshForm()
-}
-
-//获取数据
-const setData = (data) => {
-  if (!data) {
-    return
-  }
-  formType.value = parseInt(data.formMain.designer)
-  for (let key of Object.keys(form)) {
-    form[key] = data.formMain[key];
-  }
-  customForm.value = data.formMain.customForm
-  //基础表单
-  //JSON字符串
-  if (data.formJson.optionJson) {
-    codeForm.value = data.formJson.optionJson
-    codeToData()
-  }
-  if (data.formJson.customJson) {
-    //自定义表单
-    formJson.value = JSON.parse(data.formJson.customJson)
-  }
-}
-
-function getColumn(item) {
-  let obj = {
-    prop: item.field,
-    title: item.title || item.label,
-    sort: gridOptions.value.data ? gridOptions.value.data.length : 0,
-    //为空默认文本框
-    selectDom: item.selectDom ? item.selectDom : 1,
-    dictCode: item.dictCode,
-    form: {dictTable: item.dictTable}
-  }
-  return obj;
-}
-
-//列配置新增多选更新
-const updateData = (row, column) => {
-  if (row[column.field] == '1') {
-    for (const item of gridOptions.value.data) {
-      if (item.prop == row.field) return
-    }
-    let tableObj = getColumn(row);
-    gridOptions.value.data.push(tableObj)
-  } else {
-    gridOptions.value.data = gridOptions.value.data.filter(item => item.prop != row.field)
-  }
-  reloadData();
-  refreshForm()
-}
-
-function parseJson(column) {
-  let attrs = column.attrs;
-  if (attrs) {
-    try {
-      attrs = JSON.parse(attrs)
-      for (let key of Object.keys(attrs)) {
-        column[key] = attrs;
-      }
-    } catch (e) {
-      console.error("解析attrs异常", attrs)
-    }
-  }
-}
-
-function reloadData(data) {
-  if (data) {
-    gridOptions.value.data = data;
-  }
-  if (vexGridRef.value) {
-    vexGridRef.value.reloadData(gridOptions.value.data)
-  }
-}
-
-//列配置新增全选与全不选
-const setAll = ({list, isAll}) => {
-  let data = []
-  if (isAll) {
-    for (let item of list) {
-      data.push(getColumn(item));
-    }
-  }
-  reloadData(data);
-  refreshForm()
-}
-
-//基础表单 > 快捷设计表单更新
-const designFormChange = () => {
-  //行数转换为尺寸
-  baseOption.value.span = parseInt(24 / designForm.value.span)
-  //JSON格式化
-  codeForm.value = jsonFormat(baseOption.value)
-  updateSort()
-}
-
-
-//控件类型更新
-const dictChange = ({row}) => {
-  console.info('控件类型发生改变了',row)
-  if(row.selectDom === '22'){//如果是表格选择器，则展开行，因为一定要配置其他属性，所以需要展开行
-    if(row.form.attrs == null || row.form.attrs === ''){
-      row.form.attrs = '{\n' +
-          '  "olTableSelect":{\n' +
-          '    "uuid":"1901841070608990208",\n' +
-          '    "key":"id",//数据库要存的值，如：外键ID或某个编码\n' +
-          '    "label":"name",//选中数据后回显的数据\n' +
-          '    "labelIsAppendCode":false,//默认，可不填或不该\n' +
-          '    "otherResult":"name:name,age:age,sex:sex"//需要额外字段数据格式配置："源字段1:目标字段1,源字段2:目标字段2"\n' +
-          '  }\n' +
-          '}'
-    }
-    vexGridRef.value.setRowExpand([row], true);//展开行
-  }
-  nextTick(() => {
-    baseOption.value.column.forEach(item => {
-      if (item.prop == row.prop) {
-        item.type = getFormType(row)//控件类型
-        codeForm.value = jsonFormat(baseOption.value)
-        return
-      }
-    })
-  })
-
-}
-let update = true;
-
-function refreshForm() {
-  if (update != true) {
-    setTimeout(() => {
-      refreshForm()
-    }, 200)
-  }
-  update = false;
-  let data = JSON.parse(JSON.stringify(gridOptions.value.data));
-  let columns = []
-  let index = 1;
-  for (let d of data) {
-    d.sort = index;
-    let column = getCodeColumn(d);
-    columns.push(column);
-    index++;
-  }
-  columns.sort((a, b) => {
-    return a.sort - b.sort
-  })
-  setCodeForm(columns)
-  setBaseOption(columns);
-  update = true;
-}
-
-function setDictCode(column) {
-  if (column.selectDom != 1 && (column.dictCode || column.dictTable || column.dictUrl)) {
-    getDicData(column)
-  }
-}
-
-function codeToData(alter) {
-  try {
-    getFormatter();
-    let value = JSON.parse(codeForm.value);
-    setSort(value);
-    codeForm.value = jsonFormat(value)
-    //更新快捷设计表格的数据
-    setTableData(value)
-    if (!value.labelWidth) value.labelWidth = 125
-    baseOption.value = value;
-    setBaseOption(value.column);
-    value.span = value.span ? value.span : 12
-    //计算表单每行个数
-    designForm.value.span = parseInt(24 / value.span)
-    nextTick(() => {
-      refreshForm()
-    })
-    if (alter) {
-      msg.success("生成成功！");
-    }
-  } catch (e) {
-    console.error(e)
-    msg.error('生成失败,请检查对象格式是否正确' + e)
-  }
-}
-
-function setCodeForm(columns) {
-  let option = JSON.parse(JSON.stringify(baseOption.value));
-  option.column = JSON.parse(JSON.stringify(columns));
-  codeForm.value = jsonFormat(option)
-}
-
-function setEvents(column) {
-  for (let event of events) {
-    if (column[event] != undefined && column[event] != '') {
-      try {
-        let e = replaceDollarBraces(column[event]);
-        column[event] = eval("(params)=>{" + e + "}");
-      } catch (e) {
-        console.error(e)
-      }
-    } else {
-      delete column[event];
-    }
-  }
-}
-
-function replaceDollarBraces(str) {
-  return str.replace(/\$\{?([^{}]+)\}?/g, function (match, innerContent) {
-    return innerContent ? `'${innerContent}'` : match;
-  });
-}
-
-function setBaseOption(columns) {
-  columns = JSON.parse(JSON.stringify(columns));
-  for (let column of columns) {
-    try {
-      parseJson(column);
-      setEvents(column);
-      setDictCode(column)
-    } catch (e) {
-      console.error(e)
-    }
-  }
-  baseOption.value.column = columns;
-}
-
-let events = ['change'];
-
-function getFormatter() {
-  //正则表达式替换字符串的值
-  let v = codeForm.value.replace(/,}/gi, "}").replace(/,]/gi, "]");
-  codeForm.value = JSON.stringify(JSON.parse(v), null, 4)
-}
-
-function 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
-  }
-}
-
-function getCodeColumn(row) {
-  let columnObj = {};
-  for (let column of gridOptions.value.columns) {
-    if (column.field !== undefined && row[column.field] !== undefined && row[column.field] !== '' && row[column.field] !== null) {
-      columnObj[column.field] = row[column.field];
-    }
-  }
-  for (let column of expandForm.value.column) {
-    if (column.prop !== undefined && row.form[column.prop] !== undefined && row.form[column.prop] !== '' && row.form[column.prop] !== null) {
-      columnObj[column.prop] = row.form[column.prop];
-    }
-  }
-  columnObj.label = columnObj.showName ? columnObj.showName : columnObj.title;
-  if (columnObj.required == '1') {
-    columnObj.rules = [{
-      required: true,
-      message: '请输入' + row.title,
-      trigger: 'blur'
-    }]
-  }
-  if (columnObj.required == '0') {
-    delete columnObj.rules;
-    delete columnObj.required;
-  }
-  if (columnObj != 1) {
-    columnObj.type = getFormType(row)
-  }
-  return columnObj;
-}
-
-function getTableRow(data) {
-  let obj = JSON.parse(JSON.stringify(data));
-  obj.form = {};
-  for (let column of gridOptions.value.columns) {
-    if (column.field !== undefined && data[column.field] !== undefined && data[column.field].toString().trim() !== '') {
-      obj[column.field] = data[column.field];
-    }
-  }
-  for (let column of expandForm.value.column) {
-    if (column.prop !== undefined && data[column.prop] !== undefined && data[column.prop].toString().trim() !== '') {
-      obj.form[column.prop] = data[column.prop];
-    }
-  }
-  for (let event of events) {
-    if (obj[event] != undefined && !(obj[event] instanceof Function)) {
-      obj[event] = obj[event].toString()
-    }
-  }
-  if (data.label) {
-    obj.showName = data.label;
-    if (!obj.title) {
-      obj.title = data.label;
-    }
-  }
-
-  if (data.label) {
-    obj.showName = data.label;
-    obj.title = data.label;
-  }
-  delete obj.type;
-  return obj
-}
-
-//编码设计生成后更新快捷设计表格数据
-const setTableData = (value) => {
-  let datas = [];
-  for (let column of value.column) {
-    let data = getTableRow(column);
-    datas.push(data);
-  }
-  nextTick(() => {
-    gridOptions.value.data = datas;
-  })
-}
-
-function setDicData(column) {
-  baseOption.value.column.forEach(item => {
-    if (item.prop == column.prop) {
-      item.dicData = column.dicData
-      return
-    }
-  })
-}
-
-const setDictUrl = (column) => {
-  let dictUrl = column.dictUrl.split(",");
-  let url;
-  let label = 'label';
-  let value = 'value';
-  let parentId = 'parentId';
-  // get,url,label,value,parent_id
-  let doGet = true;
-  if (dictUrl.length > 1
-  ) {
-    if (dictUrl[0].toString().toLowerCase() == 'post') {
-      doGet = false;
-    }
-    url = dictUrl[1];
-    label = dictUrl[2];
-    value = dictUrl[3];
-    parentId = dictUrl[4];
-  } else {
-    url = dictUrl[0];
-  }
-
-  if (doGet) {
-    get(http, url).then((data) => {
-      column.dicData.length = 0;
-      if (column.type == 'tree') {
-        for (let da of data) {
-          da['label'] = da[label]
-          da['value'] = da[value]
-        }
-        column.dicData = handleTree(data, value, parentId);
-      } else {
-        data.forEach((d) => {
-          column.dicData.push(d);
-        })
-      }
-    })
-  } else {
-    post(http, column.dictUrl, false, false).then(({data}) => {
-      column.dicData.length = 0;
-      if (column.type == 'tree') {
-        for (let da of data) {
-          da['label'] = da[label]
-          da['value'] = da[value]
-        }
-        column.dicData = handleTree(data, value, parentId);
-      } else {
-        data.forEach((da) => {
-          da['label'] = da[label]
-          da['value'] = da[value]
-          column.dicData.push(da);
-        })
-      }
-    })
-  }
-}
-//获取字典
-const getDicData = (column) => {
-  let code = column.dictCode
-  if (code == "" || !code) {
-    delete column.dicData
-  } else if (column.dictTable) {
-    getParameter(column);
-  } else if (column.dictUrl) {
-    setDictUrl(column);
-  } else {
-    const dict = storeDict();
-    column.dicData = dict.val(column.dictCode)
-    setDicData(column)
-  }
-}
-
-function getParameter(column) {
-  let params = {}
-  let dictTable = JSON.parse(JSON.stringify(column.dictTable));
-  if (dictTable instanceof Object) {
-    params = dictTable;
-  } else {
-    dictTable = column.dictTable.split(",");
-    params["dbName"] = dictTable[0];
-    params["tableName"] = dictTable[1];
-    params["label"] = dictTable[2];
-    params["value"] = dictTable[3];
-    if (dictTable[4]) {
-      params["parentValue"] = dictTable[4];
-    }
-  }
-  initDictTable(http, params).then((data) => {
-    column.dicData.length = 0;
-    for (let d of data) {
-      d.label = d.dictLabel;
-      d.value = d.dictValue;
-    }
-    if (params["parentValue"]) {
-      data = handleTree(data, 'value', 'parentValue');
-      column.dicData.push(data);
-    } else {
-      for (let d of data) {
-        d.label = d.dictLabel;
-        d.value = d.dictValue;
-        column.dicData.push(d);
-      }
-    }
-    setDicData(column)
-  })
-
-}
-
-//JSON格式化
-const jsonFormat = (val) => {
-  return JSON.stringify(JSON.parse(JSON.stringify(val)), null, 4)
-}
-
-//控件类型转换
-const 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',
-      tree: '15',
-      textarea: '10'
-    }
-    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 (['select', 'checkbox', 'radio', 'tree'].indexOf(type) != -1) {
-        getDicData(row)
-      }
-    }
-    return type
-  }
-}
-onMounted(() => {
-  updateSort()
-})
-
-function addColumn() {
-  gridOptions.value.data.push({
-    sort: gridOptions.value.data.length,
-    prop: "",
-    title: "",
-    showName: "",
-    selectDom: "1",
-    label: "",
-    type: "input",
-    form:{}
-  });
-  refreshForm();
-}
-
-//表格拖动更新
-const updateSort = () => {
-  nextTick(() => {
-    if (!vexGridRef.value) {
-      return;
-    }
-    //el绑定元素需要找到vxe的DOM下的tbody元素
-    Sortable.create(vexGridRef.value.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
-      animation: 130,//拖拽动画过渡时间
-      handle: '.vxe-icon-sort',
-      // 结束拖拽
-      onEnd: function (/**Event*/{oldIndex, newIndex}) {
-        const list = JSON.parse(JSON.stringify(gridOptions.value.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
-        }
-        gridOptions.value.data = newsArr;
-        //把表单的排序号和表格的排序号保持一致
-        newsArr.forEach(tableItem => {
-          baseOption.value.column.forEach(formItem => {
-            if (tableItem.prop == formItem.prop) {
-              formItem.sort = tableItem.sort
-            }
-          })
-        })
-        //将表单重新排序
-        baseOption.value.column.sort((a, b) => {
-          return a.sort - b.sort
-        })
-        codeForm.value = jsonFormat(baseOption.value)
-      },
-    });
-  });
-}
-const form = reactive({
-  updateKey: '',
-  saveUrl: '',
-  title: '',
-  requestType: 'post',
-  formType: props.type,
-})
-const state = reactive({
-  extensions: [javascript(), oneDark],
-  values: null,
-  err: false,
-  baseForm: {},
-  baseFormRender: {},
-})
-
-const formMap = reactive({})
-
-// 更换表单
-const onChangeForm = (value) => {
-  if (value) {
-    get(http, "/online/formDesigner/queryById", {
-      id: value
-    }).then((data) => {
-      formJson.value = JSON.parse(data.formJson)
-      formKey.value++
-    })
-  }
-}
-const getForm = () => {
-  return markRaw(form)
-}
-// 获取新增表单配置数据
-const getData = () => {
-  if (formType.value == 0 && gridOptions.value.data.length == 0) {
-    return undefined;
-  }
-  refreshForm();
-  let obj = {
-    vexTable: gridOptions.value,
-    baseForm: baseOption.value,
-    codeForm: codeForm.value,
-    designer: formType.value,
-    customJson: formJson.value,
-    customForm: customForm.value
-  }
-  return obj
-}
-/**
- * 右边字段配置删除行数据
- * @param row
- * @returns {Promise<void>}
- */
-const removeRowEvent = async (row) => {
-  const type = await VXETable.modal.confirm('您确定要删除该数据?')
-  const $grid = vexGridRef.value
-  if ($grid && type === 'confirm') {
-    await $grid.remove(row)
-    gridOptions.value.data = gridOptions.value.data.filter(item => item._X_ROW_KEY != row._X_ROW_KEY)
-    removeColumnEvent(row)
-  }
-}
-/**
- * 删除表单属性（快捷设计属性）
- * @param row
- */
-const removeColumnEvent = (row) => {
-  baseOption.value.column = baseOption.value.column.filter(item => item.prop != row.prop)
-  codeForm.value = jsonFormat(baseOption.value)
-}
-
-/**
- * 表格选择器回调函数
- * @param data
- */
-function olTableSelectChange(slotName,data){
-  console.info('插槽名称', slotName)
-  console.info('表格回传的数据', data)
-}
-
-// 动态获取需要渲染的插槽名称列表
-const dynamicSlotsTable = computed(() => {
-  const result = baseOption.value.column
-      .filter((item) => item.selectDom === '22') // 筛选出需要动态插槽的字段（表单选择）
-      .map((item) => {
-        let slotObj = {slotName: item.prop}
-        slotObj.config = item.attrs!=null?JSON.parse(item.attrs).olTableSelect:{}
-        return slotObj;
-      }); // 获取字段名作为插槽名
-  return result;
-});
-
-// 对外暴露
-defineExpose({
-  setData, updateData, setAll, getData, setShow, getForm
-})
-</script>
-
-<style lang="scss" scoped>
-.cm-editor {
-  height: 100%;
-}
-
-
-:deep(.el-form-item) {
-  margin-bottom: 5px;
-}
-
-.box-card {
-  width: calc(100% - 24px);
-  height: calc(100% - 24px);
-}
-</style>