olp-table 5.3.1 → 5.3.4

package/src/views/tree/components/config-core-table.vue

@@ -0,0 +1,362 @@
+<template>
+  <div style="padding: 0px;flex: 1">
+    <vxe-table min-height="100px" border
+               max-height="170px"
+               :data="this.treeConfigAll.treeConfig.table"
+               :stripe="true"
+               align="center"
+               size="small"
+               ref="tableRef"
+               @mouseover="showAction()"
+               @mouseleave="hideAction()"
+               :row-config="{height: 50}">
+      <vxe-column type="seq" width="50">
+        <template #header>
+          <vxe-button status="primary" icon="vxe-icon-add" @click="insertEvent" circle/>
+        </template>
+        <template #default="{row, $rowIndex}">
+          <div>
+            <!-- 在这里添加你的按钮 -->
+            <vxe-button v-if="isHovering" status="danger" icon="vxe-icon-delete"
+                        @click="removeEvent(row,$rowIndex)" circle/>
+            <span v-else>{{ $rowIndex +1 }}</span>
+          </div>
+        </template>
+      </vxe-column>
+      <vxe-column field="index" title="序号" width="50"/>
+      <vxe-column field="type" title="类型" min-width="100">
+        <template #default="{ row,$rowIndex }">
+          <vxe-select v-model="row.type" transfer :disabled="$rowIndex == 0">
+            <vxe-option v-for="item in treeConfigAll.dicData.joinFiledDicData" :key="item.value" :value="item.value"
+                        :label="item.label"/>
+          </vxe-select>
+        </template>
+      </vxe-column>
+      <vxe-column field="joinTable" title="数据表" min-width="120" show-overflow>
+        <template #default="{ row }">
+          <vxe-select v-model="row.joinTable" filterable transfer @change="setTable">
+            <vxe-option v-for="item in treeConfigAll.dicData.joinTableDicData" :key="item.value" :value="item.value"
+                        :label="item.label"/>
+          </vxe-select>
+        </template>
+      </vxe-column>
+      <vxe-column field="joinFiled" title="on" min-width="110" show-overflow>
+        <template #default="{ row ,$rowIndex}">
+          <vxe-input v-model="row.joinFiled" @change="setSql('',row.index)" type="text" :disabled="$rowIndex == 0"/>
+        </template>
+      </vxe-column>
+      <vxe-column field="deleteWhere" title="删除条件" min-width="110">
+        <template #default="{ row }">
+          <vxe-input v-model="row.deleteWhere" type="text"/>
+        </template>
+      </vxe-column>
+      <vxe-column field="fields" title="操作" min-width="110" show-overflow>
+        <template #default="{ row }">
+          <vxe-button status="primary" @click="setFieldEvent(row)">字段配置</vxe-button>
+        </template>
+      </vxe-column>
+    </vxe-table>
+  </div>
+  <field-config ref="filedConfig" @close="filedConfigClose"/>
+</template>
+<script>
+import {storeDict} from "@/store/dict";
+import {get, postQs} from "@/utils/http/httpUtils";
+import FieldConfig from "@/views/table/add-or-edit/config/field-config/index.vue";
+import {useMessage} from "@/utils/message";
+
+const msg = useMessage() // 消息弹窗
+export default {
+  name: 'configCoreTable',
+  components: {FieldConfig},
+  props: {
+    item: {}
+  },
+  inject: ['treeConfigAll','syncFormConfig','http'],
+  data() {
+    return {
+      data: [
+      {index: "t1", type: "主表", joinTable: "", joinFiled: "/", deleteWhere: 'id=${id}'}
+      ],
+      isHovering: false,
+      dict: storeDict(),
+      dicData: {
+        joinFiledDicData: [],
+        joinTableDicData: []
+      },
+      url: {
+        joinTableUrl: '/online/getDBTableList/',
+        columnsListUrl: '/online/getDBTableColumnList/'
+      }
+    }
+  },
+  created() {
+    this.init()
+  },
+  methods: {
+    init() {
+
+    },
+
+    formatType(value) {
+      if (value === '1') {
+        return '男'
+      }
+      if (value === '0') {
+        return '女'
+      }
+      return value
+    },
+    beforeEditMethod({rowIndex, columnIndex}) {
+      if (rowIndex === 0 && (columnIndex === 3 || columnIndex === 5)) {
+        return true
+      }
+      return false
+    },
+    cellMouseenter({row, column, $event, property, $index}) {
+      console.log('cellMouseenter', row, column, $event, property, $index)
+      this.isHovering = true
+    },
+    async insertEvent(row) {
+      const $table = this.$refs.tableRef
+      if ($table) {
+        let record = {
+          index: 't' + (this.data.length + 1),
+          type: 'join',
+          joinTable: '',
+          joinFiled: 't' + this.data.length + '.=t' + (this.data.length + 1) + '.'
+        }
+        row = -1
+        const {row: newRow} = await $table.insertAt(record, row)
+        this.data.push(record)
+        await $table.setEditCell(newRow, 'name')
+        $table.updateData()
+        console.log('this.data:',this.data)
+      }
+    },
+    removeEvent(row,index) {
+      if (index == 0) {
+        msg.error("主表不能删除!")
+        return
+      }
+      this.setSql(index)
+    },
+    showAction(row) {
+      this.isHovering = true;
+    },
+    hideAction() {
+      this.isHovering = false;
+    },
+    handleClick(row) {
+      // 处理按钮点击事件
+      console.log('row:', row)
+    },
+    setFieldEvent(row, column, rowIndex) {
+      console.log('setFieldEvent:',column, rowIndex)
+      postQs(this.http,'/online/getTableSetFiled/' + this.treeConfigAll.treeConfig.dbName, {
+        sql:  this.treeConfigAll.treeConfig.executeSql,
+        where:  this.treeConfigAll.treeConfig.where,
+        uuid: this.treeConfigAll.treeConfig.uuid
+      }, undefined, false).then((data) => {
+        row.columnList = Object.values(data.data[row.joinTable])
+        this.$refs.filedConfig.init(row)
+      })
+    },
+    filedConfigClose(data) {
+      if (!data) return;
+      for (let j = 0; j < this.treeConfigAll.treeConfig.table.length; j++) {
+        let obj = this.treeConfigAll.treeConfig.table[j];
+        if (Object.keys(data).includes(obj.index)) {
+          this.treeConfigAll.treeConfig.table[j].columnList = data[obj.index];
+        }
+      }
+      this.setSql();
+    },
+    setTable() {
+      let promise = []
+      for (let i = 0; i < this.treeConfigAll.treeConfig.table.length; i++) {
+        promise.push(get(this.http,this.url.columnsListUrl + this.treeConfigAll.treeConfig.dbName, {tableName: this.treeConfigAll.treeConfig.table[i].joinTable}))
+      }
+      Promise.all(promise).then((result) => {
+        for (let i = 0; i < result.length; i++) {
+          this.treeConfigAll.treeConfig.table[i]['columnList'] = result[i]
+        }
+        this.setSql()
+      })
+    },
+    setSql(index, seq) {
+      if (seq != undefined && seq != 0) {
+        let arr = this.treeConfigAll.treeConfig.table.find(item => {
+          return (item.index == seq)
+        })
+        if (!arr || !arr.joinTable) {
+          return
+        }
+      }
+      if (index != undefined && index != 0) {
+        this.treeConfigAll.treeConfig.table.splice(index, 1)
+      }
+
+      let sqlTableOn = this.treeConfigAll.treeConfig.table[0].joinTable + " t1 "
+      let sqlFiled = ""
+      let tableColumns = []
+      let sort = 0
+      for (let i = 0; i < this.treeConfigAll.treeConfig.table.length; i++) {
+        if (i === index) {
+          continue
+        }
+        let obj = this.treeConfigAll.treeConfig.table[i]
+        for (let j = 0; j < obj.columnList.length; j++) {
+          let column = obj.columnList[j]
+          if (column.checked == 0) {
+            continue
+          }
+          if (sqlFiled.length != 0) {
+            sqlFiled += ","
+          }
+          sort++
+          sqlFiled += obj.index + "." + column.column_name + " AS " + column.column_name
+          let column_name = column.column_name
+          let column_comment = column.column_comment ? column.column_comment : column_name
+          tableColumns.push({
+            sort: sort,
+            tableField: column_name,
+            field: column_name,
+            title: column_comment,
+            label: column_comment,
+            visible: column.visible,
+            display: 1,
+            asName: column_name
+          })
+        }
+        if (i != 0) {
+          sqlTableOn += " " + obj.type + " " + obj.joinTable + " " + obj.index + " on " + obj.joinFiled
+        }
+      }
+      // 新增字段
+      this.addColumn(tableColumns)
+      // 删除字段
+      this.removeColumn(tableColumns)
+      this.treeConfigAll.treeConfig.executeSql = "select " + sqlFiled + " from " + sqlTableOn
+      this.syncFormConfig()
+    },
+    removeColumn(tableColumns) {
+      for (let i = 0; i < this.treeConfigAll.tableColumn.length; i++) {
+        let remove = true
+        for (let tableColumn of tableColumns) {
+          if (this.treeConfigAll.tableColumn[i].field == tableColumn.field) {
+            remove = false
+            break
+          }
+        }
+        if (remove) {
+          this.treeConfigAll.tableColumn.splice(i, 1)
+        }
+      }
+    },
+    addColumn(tableColumns) {
+      for (let tableColumn of tableColumns) {
+        let add = true
+        for (let column of this.treeConfigAll.tableColumn) {
+          if (column.field == tableColumn.field) {
+            add = false
+            break
+          }
+        }
+        if (add) {
+          this.treeConfigAll.tableColumn.push(tableColumn)
+        }
+      }
+    },
+    setFieldConfig(filedConf) {
+      postQs(this.http,'/online/getTableSetFiled/' + this.treeConfigAll.treeConfig.dbName, {
+        sql:  this.treeConfigAll.treeConfig.executeSql,
+        where:  this.treeConfigAll.treeConfig.where,
+        uuid: this.treeConfigAll.treeConfig.uuid
+      }, undefined, false).then((data) => {
+        this.setFormTable(data.data)
+        if (filedConf) {
+          this.$refs.filedConfig.init(this.treeConfigAll.treeConfig.table)
+        }
+      })
+    },
+    setFormTable(data) {
+      let tableNames = this.getTableNamesByFormSql()
+      let tables = []
+      for (const key of Object.keys(data)) {
+        let table = {
+          index: 't1',
+          type: '主表',
+          joinTable: key,
+          joinFiled: '/',
+          deleteWhere: '',
+          columnList: [],
+          tableComment: this.getTableComment(key)
+        }
+        table.columnList = Object.values(data[key])
+        tables.push(table)
+      }
+      this.treeConfigAll.treeConfig.table = []
+      for (let i = 0; i < tableNames.length; i++) {
+        const tableName = tableNames[i]
+        for (const table of tables) {
+          if (tableName.includes(table.joinTable)) {
+            if (i == 0) {
+              table.deleteWhere = 'id=${id}'
+              table.mainTable = table.joinTable
+            }
+            if (i != 0) {
+              table.index = 't' + (i + 1)
+              table.type = 'join'
+              let joinFiled = tableName.substring(tableName.indexOf('on') + 2).replace(/[\n\t\s]+/g, '')
+              if (tableNames[i - 1].includes('left')) {
+                table.type = 'left join'
+                joinFiled = joinFiled.replace('left', '')
+              }
+              if (tableNames[i - 1].includes('right')) {
+                table.type = 'right join'
+                joinFiled = joinFiled.replace('right', '')
+              }
+              table.joinFiled = joinFiled
+            }
+            this.treeConfigAll.treeConfig.table.push(table)
+            break
+          }
+        }
+      }
+    },
+    getTableNamesByFormSql() {
+      let formSql = this.treeConfigAll.treeConfig.executeSql.substring(this.treeConfigAll.treeConfig.executeSql.indexOf('from') + 4)
+      let tableNames = []
+      for (const join of formSql.split('join')) {
+        tableNames.push(join)
+      }
+      return tableNames
+    },
+    getTableComment(key) {
+      for (const item of this.treeConfigAll.dicData.joinTableDicData) {
+        if (item.value == key) return item.label
+      }
+    }
+  }
+}
+</script>
+<style lang="less">
+.hover-wrapper {
+  /* 定义悬停时的样式 */
+  position: relative;
+  /* 其他样式 */
+}
+
+.action-buttons {
+  /* 隐藏按钮的默认样式 */
+  display: none;
+  position: absolute; /* 或者其他你需要的定位方式 */
+  /* 其他样式 */
+}
+
+.hover-wrapper:hover .action-buttons {
+  /* 悬停时显示按钮 */
+  display: block;
+}
+</style>

package/src/views/tree/components/config-core-tree/data/events.js

@@ -0,0 +1,95 @@
+export default [
+    {
+        "t1": "node-click",
+        "t2": "当节点被点击的时候触发,四个参数：对应于节点点击的节点对象，TreeNode 的 node 属性, TreeNode和事件对象",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-contextmenu",
+        "t2": "当某一节点被鼠标右键点击时会触发该事件,共四个参数，依次为：event、传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身。",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "check-change",
+        "t2": "当复选框被点击的时候触发,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点本身是否被选中、节点的子树中是否有被选中的节点",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "check",
+        "t2": "点击节点复选框之后触发,共两个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、树目前的选中状态对象，包含 checkedNodes、checkedKeys、halfCheckedNodes、halfCheckedKeys 四个属性",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "current-change",
+        "t2": "当前选中节点变化时触发的事件,共两个参数，依次为：当前节点的数据，当前节点的 Node 对象",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-expand",
+        "t2": "节点被展开时触发的事件,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-collapse",
+        "t2": "节点被关闭时触发的事件,共三个参数，依次为：传递给 data 属性的数组中该节点所对应的对象、节点对应的 Node、节点组件本身",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drag-start",
+        "t2": "节点开始拖拽时触发的事件,共两个参数，依次为：被拖拽节点对应的 Node、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drag-enter",
+        "t2": "拖拽进入其他节点时触发的事件,共三个参数，依次为：被拖拽节点对应的 Node、所进入节点对应的 Node、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drag-leave",
+        "t2": "拖拽离开某个节点时触发的事件,共三个参数，依次为：被拖拽节点对应的 Node、所离开节点对应的 Node、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drag-over",
+        "t2": "在拖拽节点时触发的事件（类似浏览器的 mouseover 事件），共三个参数，依次为：被拖拽节点对应的 Node、当前进入节点对应的 Node、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drag-end",
+        "t2": "拖拽结束时（可能未成功）触发的事件，共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点（可能为空）、被拖拽节点的放置位置（before、after、inner）、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+    {
+        "t1": "node-drop",
+        "t2": "拖拽成功完成时触发的事件，共四个参数，依次为：被拖拽节点对应的 Node、结束拖拽时最后进入的节点、被拖拽节点的放置位置（before、after、inner）、event",
+        "t3": "function",
+        $cellEdit: true,
+        "t5": ""
+    },
+
+
+]

package/src/views/tree/components/config-core-tree/data/option.js

@@ -0,0 +1,88 @@
+export default [
+     {
+        "t1": "empty-text",
+        "t2": "内容为空的时候展示的文本",
+        "t3": "string",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "node-key",
+        "t2": "每个树节点用来作为唯一标识的属性，整棵树应该是唯一的",
+        "t3": "string",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "render-after-expand",
+        "t2": "是否在第一次展开某个树节点后才渲染其子节点",
+        "t3": "boolean",
+         $cellEdit: true, "t5": true
+    }, {
+        "t1": "load",
+        "t2": "加载子树数据的方法，仅当 lazy 属性为true 时生效",
+        "t3": "function",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "render-content",
+        "t2": "树节点的内容区的渲染 Function",
+        "t3": "function",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "highlight-current",
+        "t2": "是否高亮当前选中节点，默认值是 false。",
+        "t3": "boolean",
+         $cellEdit: true, "t5": false
+    },  {
+        "t1": "expand-on-click-node",
+        "t2": "是否在点击节点的时候展开或者收缩节点， 默认值为 true，如果为 false，则只有点箭头图标的时候才会展开或者收缩节点。",
+        "t3": "boolean",
+         $cellEdit: true, "t5": true
+    }, {
+        "t1": "check-on-click-node",
+        "t2": "是否在点击节点的时候选中节点，默认值为 false，即只有在点击复选框时才会选中节点。",
+        "t3": "boolean",
+         $cellEdit: true, "t5": false
+    }, {
+        "t1": "auto-expand-parent",
+        "t2": "展开子节点的时候是否自动展开父节点",
+        "t3": "boolean",
+         $cellEdit: true, "t5": true
+    }, {
+        "t1": "default-expanded-keys",
+        "t2": "默认展开的节点的 key 的数组",
+        "t3": "array",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "check-strictly",
+        "t2": "在显示复选框的情况下，是否严格的遵循父子不互相关联的做法，默认为 false",
+        "t3": "boolean",
+         $cellEdit: true, "t5": false
+    }, {
+        "t1": "default-checked-keys",
+        "t2": "默认勾选的节点的 key 的数组",
+        "t3": "array",
+         $cellEdit: true, "t5": "",
+    }, {"t1": "current-node-key", "t2": "当前选中的节点", "t3": "string，number",  $cellEdit: true, "t5": "",}, {
+        "t1": "filter-node-method",
+        "t2": "对树节点进行筛选时执行的方法， 返回 false 则表示这个节点会被隐藏",
+        "t3": "function",
+         $cellEdit: true, "t5": "",
+    }, {"t1": "accordion", "t2": "是否每次只打开一个同级树节点展开", "t3": "boolean",  $cellEdit: true, "t5": false}, {
+        "t1": "indent",
+        "t2": "相邻级节点间的水平缩进，单位为像素",
+        "t3": "number",
+         $cellEdit: true, "t5": 18
+    }, {"t1": "icon", "t2": "自定义树节点图标组件", "t3": "string | Component",  $cellEdit: true, "t5": "",}, {
+        "t1": "lazy",
+        "t2": "是否懒加载子节点，需与 load 方法结合使用",
+        "t3": "boolean",
+         $cellEdit: true, "t5": false
+    }, {"t1": "draggable", "t2": "是否开启拖拽节点功能", "t3": "boolean",  $cellEdit: true, "t5": false}, {
+        "t1": "allow-drag",
+        "t2": "判断节点能否被拖拽 如果返回 false ，节点不能被拖动",
+        "t3": "function",
+         $cellEdit: true, "t5": "",
+    }, {
+        "t1": "allow-drop",
+        "t2": "拖拽时判定目标节点能否成为拖动目标位置。 如果返回 false ，拖动节点不能被拖放到目标节点。 type 参数有三种情况：'prev'、'inner' 和 'next'，分别表示放置在目标节点前、插入至目标节点和放置在目标节点后",
+        "t3": "Function(draggingNode, dropNode, type)",
+         $cellEdit: true, "t5": "",
+    },
+]

package/src/views/tree/components/config-core-tree/data/prop.js

@@ -0,0 +1,28 @@
+export default [
+    /*{
+    "t1": "label",
+    "t2": "指定节点标签为节点对象的某个属性值",
+    "t3": "string, function(data, node)",
+    $cellEdit: true,
+    "t5": ""
+},*/ {
+        "t1": "children", "t2": "指定子树为节点对象的某个属性值", "t3": "string", $cellEdit: true, "t5": "",
+    }, {
+        "t1": "disabled",
+        "t2": "指定节点选择框是否禁用为节点对象的某个属性值",
+        "t3": "string, function(data, node)",
+        $cellEdit: true,
+        "t5": "",
+    }, {
+        "t1": "isLeaf",
+        "t2": "指定节点是否为叶子节点，仅在指定了 lazy 属性的情况下生效",
+        "t3": "string, function(data, node)",
+        $cellEdit: true,
+        "t5": "",
+    }, {
+        "t1": "class",
+        "t2": "自定义节点类名",
+        "t3": "string, function(data, node)",
+        $cellEdit: true,
+        "t5": ''
+    }]