olp-table 5.3.7 → 5.5.1

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

@@ -1,377 +0,0 @@
-<template>
-  <el-dialog
-      v-model="show"
-      :title="'配置中心 - '+provides.form.theme"
-      width="90%"
-      :close-on-press-escape="false"
-      :close-on-click-modal="false"
-      destroy-on-close
-      :show-close="false"
-      style="height: 800px;"
-      align-center
-  >
-    <el-tabs v-model="activeName" @tab-change="updateShow" v-loading="loading"
-             :element-loading-text="provides.loadingText"
-             element-loading-background="rgba(122, 122, 122, 0.8)" :key="'config_el_tables_1'" style="height: 680px">
-      <el-tab-pane label="数据配置" name="baseConfig">
-        <BaseConfig :columns="columns" ref="baseConfig" @updateTable="updateTable" @loading="loading = $event"
-                    @updateCurd="updateCurd"/>
-      </el-tab-pane>
-      <el-tab-pane label="table配置" name="tableConfig">
-        <TableConfig ref="tableConfig" @tableConfigChange="tableConfigChange"/>
-      </el-tab-pane>
-      <el-tab-pane label="列配置" name="columnConfig">
-        <ColumnConfig :addVisible="provides.form.toolBut.indexOf('add') != -1"
-                      :editVisible="provides.form.operationBut.indexOf('edit') != -1" ref="columnConfig"
-                      @checkBoxChange="columnCheckBoxChange"
-                      @checkBoxAll="columnCheckBoxAll"/>
-      </el-tab-pane>
-      <el-tab-pane :label="item.name+'表单配置'" :name="item.code"
-                   v-for="item in provides.form.toolButOptions.filter(option=>option.isForm == 1)">
-        <FormConfig :type="item.code" :ref="(el) => setRefMap(el, item.code)"/>
-      </el-tab-pane>
-      <!--  编辑表单配置    -->
-      <el-tab-pane :label="item.name+'表单配置'" :name="item.code"
-                   v-for="item in provides.form.operationButOptions.filter(option=>option.isForm == 1)">
-        <FormConfig :type="item.code" :ref="(el) => setRefMap(el, item.code)"/>
-      </el-tab-pane>
-      <!--      <el-tab-pane label="新增表单配置" name="add" v-if="provides.form.toolBut.indexOf('add') != -1">
-              <FormConfig type="add" :ref="(el) => setRefMap(el, 'add')"/>
-            </el-tab-pane>
-            <el-tab-pane label="编辑表单配置" name="edit" v-if="provides.form.operationBut.indexOf('edit') != -1">
-              <FormConfig type="edit" :ref="(el) => setRefMap(el, 'edit')"/>
-            </el-tab-pane>-->
-      <!--      <el-tab-pane label="脚本配置" name="scriptConfig">
-              <ScriptConfig ref="scriptConfig"/>
-            </el-tab-pane>-->
-    </el-tabs>
-    <template #footer>
-      <el-button @click="show = false;emits('configClose');" :loading="loading">取 消</el-button>
-      <el-button type="primary" @click="saveClick" :loading="loading">保 存</el-button>
-    </template>
-  </el-dialog>
-</template>
-<script setup>
-import {nextTick, provide, reactive, ref, toRaw, defineExpose, defineEmits, inject} from "vue";
-import BaseConfig from "@/views/table/add-or-edit/config/base-config/index.vue";
-import ColumnConfig from "@/views/table/add-or-edit/config/column-config/index.vue";
-import TableConfig from "@/views/table/add-or-edit/config/table-config/index.vue";
-import FormConfig from "@/views/table/add-or-edit/config/form-config/index.vue";
-import initFormObject from "@/views/table/add-or-edit/config/initFormObject.js";
-import ScriptConfig from "@/views/table/add-or-edit/config/script-config/index.vue";
-import {post, get} from "@/utils/http/httpUtils";
-import {useMessage} from "@/utils/message";
-
-const msg = useMessage() // 消息弹窗
-const refMap = ref({});
-
-const setRefMap = (el, item) => {
-  if (el) {
-    refMap.value[item] = el
-  }
-}
-const http = inject("http")
-const show = ref(false);
-const loading = ref(true);
-const baseConfig = ref(null);
-const tableConfig = ref(null);
-const columnConfig = ref(null);
-const columns = ref([])
-const provides = reactive({
-  loadingText: '正在获取数据...',
-  form: {
-    mainTable: '',
-    hump: '0',
-    definitionSql: '0',
-    executeSql: '',
-    executeWhere: '',
-    parameterDefault: '',
-    paging: '1',
-    selectBox: '2',
-    tips: '1',
-    tree: '0',
-    treeParentId: '',
-    openColumn: '',
-    operationBut: [],
-    tableDelete: {},
-    toolBut: [],
-    parentId: '',
-    theme: '',
-    toolButOptions: [],
-    operationButOptions: [],
-  },
-  updateIndex: 0,
-  tableColumn: [],
-  tableOption: '{}',
-  operationButConfig: [],
-  toolButConfig: [],
-})
-
-const activeName = ref('baseConfig')
-
-//列配置多选框更新
-const columnCheckBoxChange = ({row, column}) => {
-  nextTick(() => {
-    if (column.field == 'addDisplay' && refMap.value['add']) {
-      //新增多选点击
-      refMap.value['add'].updateData(row, column)
-    } else if (column.field == 'editDisplay' && refMap.value['edit']) {
-      refMap.value['edit'].updateData(row, column)
-    }
-  })
-}
-
-function updateShow(v) {
-  if (v == 'columnConfig') {
-    columnConfig.value.setShow(true);
-  } else if (refMap.value[v]) {
-    refMap.value[v].setShow(true);
-  }
-}
-
-//列配置全选框更新
-const columnCheckBoxAll = ({checkBoxName, isAll, list}) => {
-  nextTick(() => {
-    //新增全选和全不选
-    if (refMap.value[checkBoxName]) {
-      refMap.value[checkBoxName].setAll({list, isAll})
-    }
-  })
-}
-
-function setOtherProp(item) {
-  let filedToOtherProp = Object.keys(item).filter(item => item.indexOf("ToOtherProp") != -1);
-  if (filedToOtherProp.length != 0) {
-    let otherProp = {};
-    if (item.otherProp) {
-      try {
-        otherProp = JSON.parse(item.otherProp)
-        if(!otherProp){
-          otherProp = {};
-        }
-      }catch (e) {
-      }
-    }
-    for (let filed of filedToOtherProp) {
-      if(item[filed] != undefined){
-        otherProp[filed] = item[filed];
-      }
-    }
-    //将展开行的表单设置为json的形式传给其他属性
-    item.otherProp = JSON.stringify(otherProp)
-  }
-}
-
-//点击保存
-const saveClick = () => {
-  let columnConfigData = columnConfig.value.gridOptions.data
-  baseConfig.value.parseData(provides.form);
-  if ((provides.form.toolBut.indexOf("batchDelete") != -1 || provides.form.operationBut.indexOf("delete") != -1) && !provides.form.deleteWhere) {
-    msg.error("您启用删除功能，请填写删除条件！")
-    return;
-  }
-  let tableConfigData = tableConfig.value
-  //保存列配置
-  columnConfigData.forEach(item => {
-    setOtherProp(item);
-    item.field = item.field.toString().trim()
-    //下拉值为空字符串时置为Null处理
-    item.selectType = item.selectType != '' ? item.selectType : null
-    item.tableField = item.tableField ? item.tableField : item.field
-    item.fixed = item.fixed != '' ? item.fixed : null
-    item.selectDom = item.selectDom != '' ? item.selectDom : null
-  })
-  provides.tableColumn = columnConfigData
-  provides.tableGroupHeader = columnConfig.value.getGroupColumnData()
-  provides.form.optionJson = JSON.stringify(tableConfigData.getOptions())
-  if (refMap.value['add'] && refMap.value['add'].getData()) {
-    try {
-      JSON.parse(refMap.value['add'].getData().codeForm)
-    } catch (e) {
-      console.error(e)
-      msg.error('解析编码设计json失败,请检查对象格式是否正确' + e)
-      return;
-    }
-  }
-  setFormList();
-  if (provides.form.operationBut.includes('edit') && provides.formMainList) {
-    for (const item of provides.formMainList) {
-      // 基础表单 编辑时，更新条件或保存路径不能为空！
-      if (item.formMain.designer == '0'
-          && item.formMain.formType == 'edit'
-          && item.formMain.updateKey.trim() == '' && item.formMain.saveUrl.trim() == '') {
-        activeName.value = 'edit'
-        msg.error("基础表单 编辑时，更新条件或保存路径不能为空！")
-        return;
-      }
-    }
-  }
-  saveData()
-}
-
-function setFormList() {
-  //保存新增和编辑表单配置
-  provides.formMainList = [];
-  for (let key of Object.keys(refMap.value)) {
-    provides.formMainList.push(getFormMain(refMap.value[key]));
-  }
-}
-
-function getFormMain(formConfig) {
-  let form = formConfig.getForm();
-  let formConfigData = formConfig.getData();
-  let formMain = {
-    uuid: provides.form.uuid,
-  }
-  let formJson = {};
-  if (formConfigData) {
-    formMain.designer = "" + formConfigData.designer;  //表单类型 （0）基础表单  （1）自定义表单
-    formMain.customForm = formConfigData.customForm;
-    formJson.optionJson = formConfigData.codeForm;
-    formJson.customJson = JSON.stringify(formConfigData.customJson);
-  }
-  for (let key of Object.keys(form)) {
-    formMain[key] = form[key];
-  }
-  return {
-    formMain,
-    formJson
-  }
-}
-
-function saveData() {
-  loading.value = true;
-  // baseConfig.value.setDeleteTable();
-  post(http, "/online/tableConfig/saveJson", toRaw(provides), undefined, false).then(({code}) => {
-    if (code == 200) {
-      show.value = false;
-      nextTick(() => {
-        emits('configClose', provides.form.theme);
-      })
-    }
-  }).finally(() => {
-    loading.value = false;
-  })
-}
-
-
-//数据配置更新数据表
-function updateTable(data) {
-  columnConfig.value.updateData(data)
-  loading.value = false
-}
-
-const updateCurd = () => {
-  columnConfig.value.setAddDisplay("1")
-  columnConfig.value.setEditDisplay("1")
-}
-
-//配置中心更新数据
-function tableConfigChange(map) {
-  columnConfig.value.updateColumnConfig(map)
-}
-
-const updateBtnData = (options, type) => {
-  let butType = type.substr(0, type.indexOf('Options'));
-  for (let i = options.length - 1; i >= 0; i--) {
-    let o = options[i];
-    if (provides.form[butType].indexOf(o.code) == -1) {
-      provides.form[butType].push(o.code)
-    }
-  }
-  provides.form[type] = options
-}
-
-function initForm(res) {
-  res.form = JSON.parse(JSON.stringify(initFormObject));
-  res.tableColumn = [];
-}
-
-function parseOtherProp(res) {
-  if(!res.tableColumn){
-    return
-  }
-  for (let column of res.tableColumn) {
-    if (column.otherProp && column.otherProp != '') {
-      try {
-        let otherProp = JSON.parse(column.otherProp);
-        for (let key of Object.keys(otherProp)) {
-          column[key] = otherProp[key];
-        }
-      }catch (e){}
-    }
-  }
-}
-
-function init({o, v}) {
-  show.value = true;
-  loading.value = true;
-  provides.loadingText = "正在加载数据...";
-  get(http, "/online/tableConfig/getJson", {uuid: v.uuid, theme: o}).then(res => {
-    parseOtherProp(res);
-    provides.toolButConfig = res.toolButConfig;
-    provides.operationButConfig = res.operationButConfig;
-    if (res.newConfig) {
-      initForm(res);
-      res.form.parentId = v.parentId;
-      res.form.uuid = v.uuid;
-      res.form.theme = o;
-    }
-    provides.form = res.form;
-    if (!res.form.optionJson) {
-      res.form.optionJson = "{}"
-    }
-    // 将json解析为对象
-    provides.form.optionObj = JSON.parse(res.form.optionJson)
-    if (provides.form.optionObj.table) {
-      provides.form.tableObj = provides.form.optionObj.table
-    } else {
-      provides.form.tableObj = {}
-    }
-    provides.tableColumn = res.tableColumn;
-    columnConfig.value.setData(res.tableColumn)
-    baseConfig.value.setData(res.form);
-    tableConfig.value.setData(res.form)
-    nextTick(() => {
-      if (res.formMainList) {
-        for (let obj of provides.form.toolButOptions) {
-          let data = res.formMainList[obj.code];
-          if (data && refMap.value[obj.code]) {
-            refMap.value[obj.code].setData(data)
-          }
-        }
-        for (let obj of provides.form.operationButOptions) {
-          let data = res.formMainList[obj.code];
-          if (data && refMap.value[obj.code]) {
-            refMap.value[obj.code].setData(data)
-          }
-        }
-      }
-    })
-    loading.value = false;
-  }).catch(() => {
-    loading.value = false;
-  })
-}
-
-
-provide('configData', provides);
-provide('updateBtnData', updateBtnData)
-const emits = (m, v) => {
-  if (m == "updateVisible") {
-    baseConfig.value.refreshColumn();
-  } else {
-    emit("emits", {m: m, v});
-  }
-}
-
-// 子组件调用父组件
-const emit = defineEmits(["emits"]); //声明 emits
-defineExpose({
-  init,
-})
-
-</script>
-
-
-

package/src/views/table/add-or-edit/config/initFormObject.js

@@ -1,25 +0,0 @@
-export default {
-    "hump": "0",
-    "toolBut": [
-        "add",
-        "batchDelete",
-        "upload",
-        "download"
-    ],
-    "tree": "0",
-    "paging": "1",
-    "seq": "1",
-    "executeSql": '',
-    "definitionSql": "0",
-    "requestType": "0",
-    "tips": "1",
-    "operationButOptions": [],
-    "toolButOptions": [],
-    "operationBut": [
-        "edit",
-        "delete"
-    ],
-    "selectBox": "2",
-    "theme": "t1",
-    "init": "1"
-}

package/src/views/table/add-or-edit/config/script-config/LeftMeun.vue

@@ -1,71 +0,0 @@
-<template>
-  <div>
-    <p>
-      <vxe-button @click="expandAllEvent">展开</vxe-button>
-      <vxe-button @click="claseExpandEvent">关闭</vxe-button>
-    </p>
-<!--    树表格-->
-    <vxe-table
-      border="inner"
-      size="small"
-      ref="tableRef"
-      :column-config="{resizable: true}"
-      :tree-config="{transform: true, rowField: 'id', parentField: 'parentId'}"
-      :data="tableData"
-      @toggle-tree-expand="toggleExpandChangeEvent">
-      <vxe-column field="name" title="名称" tree-node></vxe-column>
-      <!-- <vxe-column field="size" title="类型"></vxe-column> -->
-
-      <vxe-column title="操作" width="140">
-        <template #default="{ row }">
-          <vxe-button mode="text" icon="vxe-icon-add"></vxe-button>
-          <vxe-button mode="text" icon="vxe-icon-edit"></vxe-button>
-          <vxe-button mode="text" icon="vxe-icon-delete" @click="removeRowEvent(row)"></vxe-button>
-        </template>
-      </vxe-column>
-    </vxe-table>
-  </div>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-import { VXETable, VxeTableInstance, VxeTableEvents } from 'vxe-table'
-
-
-
-const tableRef = ref()
-
-const tableData = ref([
-  { id: 1, parentId: null, name: '表格', type: '', size: 1024, date: '2020-08-01' },
-  { id: 2, parentId: 1, name: '新增', type: '表格', size: 1024, date: '2020-08-01' },
-  { id: 3, parentId: 1, name: '编辑', type: '表格', size: 1024, date: '2020-08-01' },
-  { id: 4, parentId: 1, name: '删除', type: '表格', size: 1024, date: '2020-08-01' },
-  { id: 5, parentId: null, name: '表单', type: '', size: 1024, date: '2020-08-01' },
-  { id: 3, parentId: 5, name: '编辑', type: '表单', size: 1024, date: '2020-08-01' },
-  { id: 4, parentId: 5, name: '删除', type: '表单', size: 1024, date: '2020-08-01' },
-])
-
-// 展开事件
-const toggleExpandChangeEvent = (params) => {
-  const $table = tableRef.value
-  if ($table) {
-    const { row, expanded } = params
-    console.log('节点展开事件', expanded, '获取父节点：', $table.getParentRow(row))
-  }
-}
-
-//全部展开
-const expandAllEvent = () => {
-  const $table = tableRef.value
-  if ($table) {
-    $table.setAllTreeExpand(true)
-  }
-}
-//全部关闭
-const claseExpandEvent = () => {
-  const $table = tableRef.value
-  if ($table) {
-    $table.clearTreeExpand()
-  }
-}
-</script>

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

@@ -1,70 +0,0 @@
-<template>
-    <el-button type="primary">预览脚本</el-button>
-
-    <el-row>
-        <!-- 左边树状菜单 -->
-        <el-col :span="6" class="bordered-col">
-            <div class="height-col">
-                <LeftMeun></LeftMeun>
-            </div>
-        </el-col>
-        <!-- codemirror代码在线预览 -->
-        <el-col :span="18" class="bordered-col">
-            <div class="height-col colored-div">
-                <codemirror
-                        v-model="values"
-                        :autofocus="true"
-                        :indent-with-tab="true"
-                        :tabSize="2"
-                        :extensions="state.extensions"/>
-            </div>
-        </el-col>
-    </el-row>
-</template>
-<script setup>
-
-import {Codemirror} from "vue-codemirror";
-import {computed, defineProps, reactive, ref} from "vue";
-import {javascript} from "@codemirror/lang-javascript";
-import {oneDark} from "@codemirror/theme-one-dark";
-import LeftMeun from '@/views/table/add-or-edit/config/script-config/LeftMeun.vue'
-
-const props = defineProps({
-    modelValue: {},
-})
-
-// const values = computed({
-//     get: () => props.modelValue,
-//     // eslint-disable-next-line no-undef
-//     set: (value) => emits("update:modelValue", value),
-// });
-const values = ref(`const values = computed({
-    get: () => props.modelValue,
-    // eslint-disable-next-line no-undef
-    set: (value) => emits("update:modelValue", value),
-})`);
-
-const state = reactive({
-    show: false,
-    extensions: [javascript(), oneDark],
-    values: ``,
-    err: false,
-})
-
-</script>
-<style>
-
-.bordered-col {
-    border: 1px solid #d3dce6; /* 边框颜色和宽度 */
-    border-radius: 4px; /* 可选：圆角 */
-}
-
-.height-col {
-    height: 600px;
-}
-
-.colored-div {
-    background-color: #2d2a2e; /* 背景 */
-}
-
-</style>