olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,376 @@
+<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);
+    //下拉值为空字符串时置为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

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

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

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