olp-table 5.3.1 → 5.3.4

package/src/views/db/preview/right.vue

@@ -0,0 +1,466 @@
+<template>
+  <vxe-grid v-bind="table" :columns="$attrs.columns" ref="vexGridRef" @sortChange="sortChange" @keydown="keydown">
+    <template #checkedBox_header="{ column }">
+      <div style="display: flex;align-items: center;">
+        <el-tooltip class="box-item"
+                    effect="dark"
+                    :content="column.title"
+                    placement="left-start"
+        >
+          <span style="margin-left: 5px;">{{
+              column.title != undefined ? column.title.toString().substring(0, 4) : ''
+            }} </span>
+        </el-tooltip>
+        <el-checkbox v-model="column.children[0].params.time" style="margin-left: 5px;margin-right: 5px"
+                     @change="column.children[0].params.range = false;query();">时间
+        </el-checkbox>
+        <el-checkbox v-model="column.children[0].params.range"
+                     @change="column.children[0].params.time = false;query();">范围
+        </el-checkbox>
+      </div>
+    </template>
+    <template #operate="{ row }">
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="保存"
+                  placement="top-start"
+      >
+        <vxe-button @click="saveUpdateEvent(row)" mode="text" icon="vxe-icon-save"
+                    :status="hasUpdateStatus(row) ? 'warning' : 'info'" size="mini"
+                    :disabled="!hasUpdateStatus(row)"
+                    :loading="row.loading"/>
+      </el-tooltip>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="复制数据"
+                  placement="top-start"
+      >
+        <vxe-button @click="add(row)" mode="text" icon="vxe-icon-add"
+                    status="primary" size="mini"/>
+      </el-tooltip>
+      <el-tooltip class="box-item"
+                  effect="dark"
+                  content="删除数据"
+                  placement="top-start"
+      >
+        <el-popconfirm title="是否删除数据" @confirm="remove(row)">
+          <template #reference>
+            <vxe-button mode="text" icon="vxe-icon-delete"
+                        status="danger" size="mini"/>
+          </template>
+        </el-popconfirm>
+
+      </el-tooltip>
+    </template>
+    <template #header_name_auto_filter="{ column }">
+      <div v-if="column.params.time">
+        <el-date-picker
+            v-model="column.params.start"
+            style="width: 100%;"
+            type="datetime"
+            placeholder="开始时间"
+            format="YYYY-MM-DD HH:mm:ss"
+            @change="query"
+        />
+        <el-date-picker
+            v-model="column.params.end"
+            style="width: 100%;"
+            type="datetime"
+            placeholder="结束"
+            format="YYYY-MM-DD HH:mm:ss"
+            @change="query"
+        />
+      </div>
+      <div v-else-if="column.params.range">
+        <el-input
+            v-model="column.params.start"
+            style="width: 100%;"
+            placeholder="开始"
+            @change="query"
+        />
+        <el-input
+            v-model="column.params.end"
+            style="width: 100%;"
+            placeholder="结束"
+            @change="query"
+        />
+      </div>
+      <el-input v-else v-model="column.params.value" style="width: 100%;"
+                placeholder="关键字搜索" clearable
+                @change="query">
+      </el-input>
+
+    </template>
+    <template #pager>
+      <olPager v-bind="pagination" :showDetails="false" @page-change="handlePageChange"
+               @clearSelected="clearSelected"/>
+      <el-input
+          v-model="sql"
+          style="width: 100%"
+          type="textarea"
+          placeholder="sql"
+      />
+      <el-button @click="addNew()" type="primary">新增列</el-button>
+    </template>
+  </vxe-grid>
+</template>
+
+<script>
+import olPager from "@/components/table/ol-pager/index.vue";
+import {get, post} from "@/utils/http/httpUtils";
+import Sortable from "sortablejs";
+import {OTMixinPager} from "@/mixins/VTMixin/OTMixinPager";
+import {dateFormat} from "@/utils/DateUtils";
+
+export default {
+  name: "previewRight",
+  components: {olPager},
+  inject: ['http', 'column'],
+  mixins: [OTMixinPager],
+  data() {
+    return {
+      form: {},
+      sql: '',
+      table: {
+        showOverflow: true,
+        resizable: true,
+        resizableConfig: {},
+        columnConfig: {
+          resizable: true, isHover: true, isCurrent: true,
+          useKey: true,
+        },
+        keepSource: true,
+        mouseConfig: {selected: true},
+        rowConfig: {isHover: true, isCurrent: true, useKey: true},
+        editConfig: {
+          mode: 'cell',
+          showIcon: false,
+          trigger: 'click',
+          showStatus: true,
+          showUpdateStatus: true,
+          beforeEditMethod: ({column, row}) => {
+            let resp = column.params.is_pk != 1 || !row.resp_Data_UUID
+            return resp
+          }
+        },
+        align: 'center',
+        filterConfig: {
+          showIcon: false
+        },
+        sortConfig: {
+          remote: true,
+        },
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 15},
+        loading: false,
+        size: 'mini',
+        border: true,
+        height: '100%',
+        columns: [],
+        data: []
+      }
+    }
+  },
+  methods: {
+    async addNew(row) {
+      console.log("add")
+      const $table = this.$refs.vexGridRef
+      const record = {}
+      const {row: newRow} = await $table.insertAt(record, row)
+      console.log(row,newRow)
+      await $table.setEditCell(newRow, this.columns[2].COLUMN_NAME)
+    },
+    remove(row) {
+      let params = {
+        "_DbName_": this.form.datasource,
+        "_TableName_": this.form.tableName
+      };
+      for (let column of this.$attrs.columns) {
+        if (column.is_pk == 1) {
+          params[column.COLUMN_NAME] = row[column.COLUMN_NAME];
+        }
+      }
+      if (Object.keys(params).length == 0) {
+        this.$message.error("保存失败，数据表没有唯一键！");
+        return false;
+      }
+
+      post(this.http, '/online/asyncDb/data/remove/', params).then(res => {
+        if (res) {
+          this.query();
+        }
+      }).finally(() => {
+        row.loading = false;
+      })
+    },
+    add(row) {
+      let is_pk = this.$attrs.columns.filter(o => o.is_pk == 1).map(o => o.COLUMN_NAME);
+      var parse = JSON.parse(JSON.stringify(row));
+      delete parse._X_ROW_KEY;
+      delete parse.resp_Data_UUID;
+      for (let key of is_pk) {
+        if (key.toLowerCase() == 'id') {
+          parse[key] = new Date().getTime()
+        }
+      }
+      this.$table.insertAt(parse, row).then((e) => {
+        this.$table.setEditCell(e.row, is_pk.length != 0 ? is_pk[0] : this.$attrs.columns[0].COLUMN_NAME)
+      })
+
+    },
+    keydown({$event}) {
+      if ($event.key == "Enter") {
+        this.query();
+      }
+    },
+    hasUpdateStatus(row) {
+      if (this.$table) {
+        return this.$table.isUpdateByRow(row) || this.$table.isInsertByRow(row)
+      }
+    },
+    doSaveUpdate(row, type, params) {
+      row.loading = true;
+      post(this.http, '/online/asyncDb/data/' + type, params).then(res => {
+        if (res) {
+          this.query();
+        }
+      }).finally(() => {
+        row.loading = false;
+      })
+    },
+    setUpdateParams(row, params) {
+      let whereMap = {};
+      for (let column of this.$attrs.columns) {
+        if (column.is_pk == 1) {
+          whereMap[column.COLUMN_NAME] = row[column.COLUMN_NAME];
+        }
+      }
+      if (Object.keys(whereMap).length == 0) {
+        this.$message.error("保存失败，数据表没有唯一键！");
+        return false;
+      }
+      let columnAndValueMap = {};
+      for (let key of Object.keys(row)) {
+        let updateByRow = this.$table.isUpdateByRow(row, key);
+        if (updateByRow) {
+          columnAndValueMap[key] = row[key];
+        }
+      }
+      params.columnAndValueMap = columnAndValueMap;
+      params.whereMap = whereMap;
+      return true;
+    },
+    saveUpdateEvent(row) {
+      let insertByRow = this.$table.isInsertByRow(row);
+      var parse = JSON.parse(JSON.stringify(row));
+      delete parse._X_ROW_KEY;
+      delete parse.resp_Data_UUID;
+      let params = {
+        tableName: this.form.tableName,
+        dbName: this.form.datasource
+      }
+      if (insertByRow) {
+        let columnAndValueMap = {};
+        for (let key of Object.keys(parse)) {
+          let rowElement = parse[key];
+          if (rowElement != undefined && rowElement != '') {
+            columnAndValueMap[key] = parse[key];
+          }
+        }
+        params.columnAndValueMap = columnAndValueMap;
+      } else {
+        let bool = this.setUpdateParams(row, params)
+        if (!bool) {
+          return;
+        }
+      }
+      this.doSaveUpdate(insertByRow ? parse : row, insertByRow ? 'save' : 'modify', params);
+
+    },
+    query() {
+      let orderByStr = '';
+      let queryParameterListAnd = [];
+      for (let column of this.$attrs.columns) {
+        if (!column.children) {
+          continue
+        }
+        let fvo = column.children[0].children[0];
+        fvo.search = false;
+        fvo.searchContent = '';
+        if (!fvo.visible) {
+          continue;
+        }
+        if (column.params.asc) {
+          orderByStr = this.getNext(orderByStr, column.COLUMN_NAME + " ASC ")
+        } else if (column.params.desc) {
+          orderByStr = this.getNext(orderByStr, column.COLUMN_NAME + " DESC ")
+        }
+        if (fvo.params.time || fvo.params.range) {
+          if (fvo.params.start.toString().trim()) {
+
+            queryParameterListAnd.push({
+              key: column.COLUMN_NAME,
+              value: fvo.params.start,
+              type: 5,
+            })
+            fvo.search = true;
+            fvo.searchContent += column.COLUMN_NAME + " >= " + (fvo.params.time ? dateFormat(fvo.params.start) : fvo.params.start) + " ";
+          }
+          if (fvo.params.end.toString().trim()) {
+            queryParameterListAnd.push({
+              key: column.COLUMN_NAME,
+              value: fvo.params.end,
+              type: 6,
+            })
+            fvo.search = true;
+            fvo.searchContent += column.COLUMN_NAME + " <= " + (fvo.params.time ? dateFormat(fvo.params.end) : fvo.params.end) + " ";
+          }
+        } else {
+          if (fvo.params.value.toString().trim()) {
+            queryParameterListAnd.push({
+              key: column.COLUMN_NAME,
+              value: fvo.params.value,
+              type: 8,
+            })
+            fvo.search = true;
+            fvo.searchContent = column.COLUMN_NAME + " like %" + fvo.params.value + "%" + " ";
+          }
+        }
+      }
+      let params = {
+        dbName: this.form.datasource,
+        tableName: this.form.tableName,
+        queryParameterListAnd: queryParameterListAnd,
+        orderByStr: orderByStr,
+        pageNumber: this.pagination.currentPage,
+        pageSize: this.pagination.pageSize
+      }
+      this.table.loading = true;
+      post(this.http, "/online/asyncDb/getData", params, false, false).then(({data, msg}) => {
+        let field = '';
+        for (let column of this.$attrs.columns) {
+          if (!column.children) {
+            continue;
+          }
+          if (column.children[0].children[0].visible) {
+            if (field.length > 0) {
+              field += ",";
+            }
+            field += column.COLUMN_NAME;
+          }
+        }
+        let indexOf = msg.toString().toLowerCase().indexOf(" from ");
+        this.sql = "SELECT " + field + msg.substring(indexOf);
+        let respData = (data instanceof Array) ? data : data.listData;
+        let COLUMN_NAME = this.$attrs.columns.map(o => o.COLUMN_NAME).filter(item => item !== "" && item !== null && item !== undefined);
+
+        for (let respDatum of respData) {
+          respDatum.resp_Data_UUID = true;
+          for (let i = COLUMN_NAME.length - 1; i >= 0; i--) {
+            let k = COLUMN_NAME[i];
+            if (respDatum[k] != undefined) {
+              COLUMN_NAME.splice(i, 1); // 从后向前删除偶数
+            }
+          }
+        }
+        for (let column of this.$attrs.columns) {
+          if (COLUMN_NAME.indexOf(column.COLUMN_NAME) != -1) {
+            column.children[0].children[0].isNull = true;
+          } else if (column.children) {
+            column.children[0].children[0].isNull = false;
+          }
+        }
+        if (COLUMN_NAME.length > 0) {
+          this.$table.reloadColumn(this.$attrs.columns)
+        }
+        this.table.data = respData
+        this.pagination.total = data.count;
+      }).finally(() => {
+        this.table.loading = false;
+      })
+
+    },
+    getNext(str, str2) {
+      if (str.trim().length != 0) {
+        str += ",";
+      }
+      return str + str2;
+    },
+    clearSortEvent(field) {
+      if (this.$table) {
+        this.$table.clearSort(field)
+      }
+    },
+    sortChange({field, order}) {
+      for (const col of this.$attrs.columns) {
+        if (col.field == field) {
+          if (col.params.desc == true || col.params.asc == true) {
+            this.clearSortEvent(field)
+            col.params.desc = false
+            col.params.asc = false
+            break
+          }
+          col.params.desc = order == 'desc'
+          col.params.asc = order == 'asc'
+          break
+        }
+      }
+      this.query()
+    },
+    init(o) {
+      this.form = o;
+      /*this.updateSort()
+      this.$nextTick(() => {
+        this.query()
+      })*/
+    },
+    updateSort() {
+      this.$nextTick(() => {
+        //el绑定元素需要找到vxe的DOM下的tbody元素
+        Sortable.create(this.$table.$el.querySelector('.body--wrapper>.vxe-table--header .vxe-header--row'),
+            {
+              filter: '.col--fixed',
+              handle: '.vxe-header--column',
+              onEnd: ({newIndex, oldIndex}) => {
+                let tableColumn = JSON.parse(JSON.stringify(this.$table.getColumns()));
+                let newColumn = tableColumn[newIndex];
+                let oldColumn = tableColumn[oldIndex];
+                for (let i = 0; i < this.$attrs.columns.length; i++) {
+                  let column = this.$attrs.columns[i];
+                  if (oldColumn.field == column.field) {
+                    oldIndex = i;
+                  } else if (newColumn.field == column.field) {
+                    newIndex = i;
+                  }
+                }
+                let columns = this.$attrs.columns;
+
+                this.$table.loadColumn([]);
+                let spliceElement = columns.splice(oldIndex, 1)[0];
+                columns.splice(newIndex, 0, spliceElement);
+                this.$attrs.columns = columns;
+                this.$nextTick(() => {
+                  this.$table.loadColumn(this.$attrs.columns);
+                  this.$emit('updateColumn')
+                })
+
+              }
+            })
+      })
+    },
+  },
+  created() {
+    this.pagination.pageSizes = [50, 100, 500, 1000, 2000, 5000];
+  },
+  computed: {
+    $table() {
+      return this.$refs['vexGridRef']
+    }
+  },
+}
+</script>
+<style scoped>
+.vxe-body--column {
+  height: 25px !important;
+}
+</style>

package/src/views/groupTable/index.vue

@@ -0,0 +1,137 @@
+<template>
+  <div style="height: 90vh">
+    <vxe-grid v-bind="gridOptions1" ref="table" show-footer :footer-method="footerMethod">
+      <template #header_right>
+        <vxe-button @click="zoomEvent" circle>
+          <i class="vxe-icon-fullscreen" v-if="!isMaximized" title="全屏"/>
+          <i class=" vxe-icon-minimize" title="取消全屏" v-else/>
+        </vxe-button>
+        <vxe-button icon="vxe-icon-refresh" @click="query" title="刷新" circle></vxe-button>
+        <vxe-button icon="vxe-icon-setting-fill" @click="$refs.tableColumnConfig.open(gridOptions1.columns)"
+                    title="设置" circle></vxe-button>
+      </template>
+    </vxe-grid>
+    <table-column-config ref="tableColumnConfig"></table-column-config>
+  </div>
+</template>
+
+<script>
+import data from "@/data";
+import {groupAndCompute} from "@/utils/groupCompute";
+import TableColumnConfig from "@/views/groupTable/ol-table-column-config/index.vue";
+import http from "@/utils/http/httpUtil";
+
+export default {
+  name: 'groupTable',
+  components: {TableColumnConfig},
+  data() {
+    return {
+      gridOptions1: data(),
+      isMaximized: false,
+      dataSource: [],
+    }
+  }, provide() {
+    return {
+      gridOptions1: this.gridOptions1
+    }
+  },
+  methods: {
+    refresh() {
+      this.$refs.table.reloadColumn(this.gridOptions1.columns);
+      let groupKey = [];
+      let comValue = [];
+      for (let column of this.gridOptions1.columns) {
+        if (column.visible && column.group) {
+          groupKey.push(column.field)
+        }
+        if (column.computes) {
+          comValue.push(column.field + ":" + column.computes)
+        }
+      }
+      let datas = groupAndCompute(groupKey, comValue, this.dataSource)
+      console.log(datas)
+      this.gridOptions1.data = datas;
+    },
+    sumNum(list, field) {
+      let count = 0
+      list.forEach(item => {
+        count += Number(item[field])
+      })
+      return count
+    },
+    maxOrMin(list, field, max) {
+      let count = max ? -9999999 : 9999999;
+      data.forEach(item => {
+        let n = Number(item[field]);
+        if (max) {
+          if (count < n) {
+            count = n;
+          }
+        } else {
+          if (count > n) {
+            count = n;
+          }
+        }
+      })
+      return count;
+    },
+    footerMethod() {
+      const footerData = [
+        this.gridOptions1.columns.map((column, _columnIndex) => {
+          if (_columnIndex === 0) {
+            return '合计'
+          }
+          console.log(column.footer)
+          if (column.footer) {
+            let operation = column.footer;
+            console.log(column)
+            if (operation.toLowerCase() == 'avg') {
+              return this.sumNum(this.gridOptions1.data, column.field) / this.gridOptions1.data.length
+            } else if (operation.toLowerCase() == 'sum') {
+              return this.sumNum(this.gridOptions1.data, column.field)
+            } else if (operation.toLowerCase() == 'max') {
+              return this.maxOrMin(this.gridOptions1.data, column.field, true)
+            } else if (operation.toLowerCase() == 'min') {
+              return this.maxOrMin(this.gridOptions1.data, column.field, false)
+            }
+          }
+          return null
+        })
+      ]
+      return footerData
+    },
+    query() {
+      this.dataSource = JSON.parse(JSON.stringify(this.gridOptions1.data))
+    },
+    zoomEvent() {
+
+    }
+  },
+  created() {
+    this.$nextTick(() => {
+      this.gridOptions1.refresh = this.refresh;
+    })
+    this.query();
+  }
+}
+</script>
+<style lang="less" scoped>
+.table-right {
+  position: relative;
+  float: left;
+  width: calc(100% - 315px);
+  height: 100%;
+}
+
+.tree-left {
+  height: 100%;
+  position: relative;
+  float: left;
+  margin-right: 10px;
+  z-index: 100;
+
+  /deep/ .el-card__body {
+    height: 100%;
+  }
+}
+</style>