olp-table 5.3.4 → 5.3.5

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

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

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