olp-table 5.3.1 → 5.3.4

package/src/views/db/index.vue

@@ -0,0 +1,192 @@
+<template>
+  <div>
+    <el-dialog
+        v-model="dialogVisible"
+        v-if="dialogVisible"
+        fullscreen
+        :title="form.isAdd =='1' ? '新增数据表' : '编辑数据表'"
+        destroy-on-close
+        :show-close="false"
+        :showHeader="false"
+    >
+      <div v-loading="loading">
+        <el-form :model="form" ref="forms" :rules="rules" label-width="80">
+          <el-row>
+            <el-col :span="3">
+              <el-form-item label="数据库">
+                <olDictTag code="db_name" v-model="form.dbName" @change="dbChange"
+                           :disabled="form.isAdd =='0'"></olDictTag>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="表描述" prop="desc">
+                <el-input v-model="form.desc" maxlength="50">
+                  <template #append>
+                    <el-button @click="show" :disabled="form.isAdd =='0'">搜索英文</el-button>
+                  </template>
+                </el-input>
+              </el-form-item>
+            </el-col>
+            <el-col :span="5">
+              <el-form-item label="表名" prop="tableName">
+                <el-input v-model="form.tableName" maxlength="50" :disabled="form.isAdd =='0'"/>
+              </el-form-item>
+            </el-col>
+<!--            <el-col :span="3">
+              <el-form-item label="操作者标识" label-width="90">
+                <el-select v-model="form.bs" disabled @change="$refs.dbFiled.updateBS(form)">
+                  <el-option label="by" value-key="by" value="by"/>
+                  <el-option label="user" value-key="user" value="user"/>
+                </el-select>
+              </el-form-item>
+            </el-col>-->
+            <el-col :span="3" v-if="form.isAdd =='1'">
+              <el-form-item label="默认表字段" label-width="90">
+                <olDictTag code="pubilc_yes_no"  @change="$refs.dbFiled.initDefaultData(this.form)"
+                           v-model="form.tableDefault"/>
+              </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+        <el-tabs
+            v-model="activeName"
+            type="card"
+        >
+          <el-tab-pane label="字段属性" name="filed">
+            <db-filed style="height: calc(100vh - 250px)" ref="dbFiled" @ok="loading =false"></db-filed>
+          </el-tab-pane>
+          <!--      <el-tab-pane label="索引信息" name="index">Config</el-tab-pane>
+                <el-tab-pane label="DDL信息" name="ddl">Role</el-tab-pane>-->
+        </el-tabs>
+        <chinese-to-english ref="chineseToEnglish"></chinese-to-english>
+      </div>
+
+
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="handleClose">关闭</el-button>
+          <el-button type="primary" :loading="loading" @click="save(false)">保存</el-button>
+          <el-button type="primary" :loading="loading" @click="save(true)">保存并关闭</el-button>
+        </div>
+      </template>
+    </el-dialog>
+
+  </div>
+</template>
+<script>
+
+import DbFiled from "@/views/db/filed.vue";
+import {get, post} from "@/utils/http/httpUtils";
+import ChineseToEnglish from "@/views/db/chineseToEnglish.vue";
+
+export default {
+  name: "dbIndex",
+  components: {ChineseToEnglish, DbFiled},
+  inject: ['http'],
+  provide() {
+    return {
+      DBForm: this.form
+    }
+  },
+  props: {
+    syncTable: {},
+    setFormConfigData: {},
+    syncFormConfig: {}
+  },
+  data() {
+    return {
+      loading: false,
+      rules: {
+        desc: [{
+          required: true,
+          message: '请输入数据库表名',
+          trigger: 'blur'
+        }], tableName: [{
+          required: true,
+          message: '请输入数据库描述',
+          trigger: 'blur'
+        }],
+      },
+      dialogVisible: false,
+      form: {
+        dbName: '',
+        dbType: '',
+        tableName: '',
+        desc: '',
+        isAdd: '1',
+        bs: 'by',
+        tableDefault: '1'
+      },
+      activeName: 'filed',
+    }
+  },
+  methods: {
+    show() {
+      this.loading = false;
+      this.$refs.chineseToEnglish.show(this.form, 'desc', 'tableName')
+    },
+    dbChange(val) {
+      if (val == this.form.dbType) {
+        return
+      }
+      this.getDbType(val)
+    },
+    getDbType(val) {
+      get(this.http, "/online/asyncDb/getDataBaseType", {
+        dbName: val
+      }).then((res) => {
+        this.form.dbType = res
+      }).finally(() => {
+      })
+    },
+    handleClose() {
+      this.dialogVisible = false;
+      this.$emit("emits", {m: 'query'});
+    },
+    init(o) {
+      this.dialogVisible = true;
+      this.$nextTick(() => {
+        if (o) {
+          this.loading = true;
+          this.form['tableName'] = o.tableName;
+          this.form['dbName'] = o.tableSchema;
+          this.form.isAdd = "0";
+          this.getDbType(this.form.dbName)
+          this.$refs.dbFiled.loadData(this.form);
+        } else {
+          this.$refs.dbFiled.initDefaultData({bs: 'by'});
+          this.form.isAdd = "1";
+          this.form['tableName'] = "";
+          if(o){
+            this.form['dbName'] = o.tableSchema;
+          }
+          this.form['desc'] = "";
+        }
+      })
+    },
+    save(e) {
+      this.$refs.forms.validate((valid, msg) => {
+        if (valid) {
+          this.loading = true
+          let params = JSON.parse(JSON.stringify(this.form));
+          this.$refs.dbFiled.setList(params)
+          post(this.http, "/online/asyncDb/save", params).then(res => {
+            this.form.isAdd = "0";
+            if (res && e) {
+              this.handleClose();
+            } else if (res) {
+              this.$refs.dbFiled.loadData(this.form);
+            }
+          }).finally(()=>{
+            this.loading = false
+          })
+        }
+        return
+      })
+    }
+  },
+  created() {
+  }
+
+}
+</script>

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

@@ -0,0 +1,139 @@
+<template>
+  <el-dialog
+      v-model="dialogVisible"
+      :title="title"
+      style="height: 100vh;width:100%"
+      fullscreen destroy-on-close>
+    <auto-height v-slot="{ height }" v-loading="loading" :style="'height:'+height">
+      <div style="width:250px;position: relative;float: left;height: 100%">
+        <preview-left @scrollToColumn="scrollToColumn" :columns="columns" ref="left" v-if="columns.length > 0"
+                      @updateColumn="updateColumn"
+                      @searchCancel="searchCancel"></preview-left>
+      </div>
+      <div style="position: relative;float: left;width:calc(100% - 250px);height: 100%">
+        <preview-right ref="right" @updateColumn="$refs.left.refresh()" :columns="columns"/>
+      </div>
+    </auto-height>
+  </el-dialog>
+</template>
+<script>
+
+import AutoHeight from "@/components/auto-height/index.vue";
+import PreviewLeft from "@/views/db/preview/left.vue";
+import PreviewRight from "@/views/db/preview/right.vue";
+import {get} from "@/utils/http/httpUtils";
+
+export default {
+  name: 'preview',
+  components: {PreviewRight, PreviewLeft, AutoHeight,},
+  inject: ['http'],
+  data() {
+    return {
+      dialogVisible: false,
+      columns: [],
+      title: '',
+      sql: '',
+      loading: true,
+    }
+  }, methods: {
+    scrollToColumn(row) {
+      for (let i = 1; i < this.columns.length; i++) {
+        if (this.columns[i].COLUMN_NAME == row.field) {
+          let index = (this.columns.length - i) < 3 ? i : i - 1;
+          this.$refs.right.$table.scrollToColumn(this.columns[index].COLUMN_NAME)
+          console.log(this.columns[i].children[0].children[0])
+          this.$refs.right.$table.clearCurrentColumn()
+          this.$refs.right.$table.setCurrentColumn(this.columns[i].children[0].children[0])
+          console.log(this.$refs.right.$table.getCurrentColumn())
+        }
+      }
+
+    },
+    searchCancel() {
+      this.$refs.right.$table.reloadColumn(this.columns)
+      this.$refs.right.query()
+    },
+    updateColumn(e) {
+      if (e != undefined) {
+        this.columns = e;
+      }
+      this.$refs.right.$table.reloadColumn(this.columns)
+    },
+    init(o) {
+      this.dialogVisible = true;
+      this.loading = true;
+      this.$nextTick(() => {
+        get(this.http, "/online/asyncDb/getColumn", {
+          dbName: o.tableSchema,
+          dataSource: o.datasource,
+          tableName: o.tableName
+        }).then(({column}) => {
+          this.loading = false;
+          let i = 0;
+          this.title = o.tableSchema + " - " + o.tableName + " [" + o.tableComment + "]" + " - 字段数量：" + column.length;
+          for (const c of column) {
+            c.label = c.COLUMN_NAME + '[' + c.COLUMN_COMMENT + ']';
+            c.field = c.COLUMN_NAME + "_sort";
+
+            c.key = i;
+            i++;
+            c.sortable = true;
+            c.params = {
+              asc: false,
+              desc: false
+            };
+            c.fixed = c.is_pk == 1 ? 'left' : undefined;
+            if (c.is_pk == 1) {
+              c.type = 'html';
+              c.title = '<span style="color:red">' + c.COLUMN_NAME + '[PK]</span>';
+            } else {
+              c.title = c.COLUMN_NAME;
+            }
+            // c.slots = {
+            //   header: 'checkedBox_header'
+            // };
+            c.children = [{
+              title: c.COLUMN_COMMENT,
+              fixed: c.is_pk == 1 ? 'left' : undefined,
+              slots: {
+                header: 'checkedBox_header'
+              },
+              children: [{
+                field: c.COLUMN_NAME,
+                title: c.COLUMN_COMMENT,
+                visible: true,
+                fixed: c.is_pk == 1 ? 'left' : undefined,
+                editRender: {name: 'input'},
+                params: {
+                  is_pk: c.is_pk == 1,
+                  value: '',
+                  range: false,
+                  time: false,
+                  start: '',
+                  end: '',
+                },
+                width: 200,
+                slots: {
+                  header: 'header_name_auto_filter'
+                },
+              }]
+            }]
+          }
+          column.push({
+            title: '操作',
+            label: '操作',
+            fixed: 'right',
+            width: 110,
+            slots: {
+              default: 'operate'
+            }
+          })
+          this.columns = column;
+          this.$refs.right.init(o);
+        })
+      })
+    },
+  },
+}
+</script>
+

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

@@ -0,0 +1,204 @@
+<template>
+  <div class="search">
+    <el-input placeholder="关键字搜索" v-model="filterText" clearable>
+    </el-input>
+    <el-button @click="visible(false)">取消全选</el-button>
+    <el-button @click="visible(true)">全选</el-button>
+  </div>
+  <el-scrollbar style="height: calc(100% - 70px)" v-loading="loading" element-loading-text="正在加载数据中...">
+    <el-tree ref="treeBox"
+             :draggable="true"
+             v-if="!loading"
+             :data="$attrs.columns"
+             :show-border="true"
+             v-bind="$attrs"
+             node-key="COLUMN_NAME"
+             :allow-drop="allowDrop"
+             :props="{
+                  children: 'children2'
+               }"
+             :show-checkbox="false"
+             :highlight-current="true"
+             @node-drop="nodeDrop"
+             :allow-drag="allowDrag"
+             :filter-node-method="filterNode">
+      <template #default="{ node, data }">
+        <span class="custom-tree-node" v-if="data.slots === undefined">
+          {{ data.key + 1 }}<el-checkbox v-model="data.children[0].children[0].visible" :disabled="data.is_pk"
+                                     @change="update">
+        <el-icon v-if="data.is_pk" style="color:red"><Female/></el-icon>
+          <el-tooltip v-if="node.label.length > 15"
+                      class="box-item"
+                      effect="dark"
+                      :content="node.label"
+                      placement="left-start"
+          >
+          <span style="color: #2d2a2e">{{ node.label.substring(0, 15) }}</span>
+          </el-tooltip>
+           <span v-else style="color: #2d2a2e">{{ node.label }}</span>
+            </el-checkbox>
+          <span style="position: absolute;right: 15px;line-height: 30px">
+            <el-tooltip
+                class="box-item"
+                effect="dark"
+                v-if="data.children[0].children[0].isNull"
+                content="当前查询所有数据为空值"
+                placement="top-start"
+            >
+           <el-icon style="color: red"><WarningFilled/>
+           </el-icon>
+            </el-tooltip>
+            <el-tooltip
+                v-if="data.children[0].children[0].search"
+                class="box-item"
+                effect="dark"
+                :content="data.children[0].children[0].searchContent"
+                placement="top-start"
+            >
+           <el-icon style="color: red"
+                    @click="searchCancel(data.children[0].children[0])"><Search/>
+           </el-icon>
+            </el-tooltip>
+            <el-tooltip class="box-item"
+                        effect="dark"
+                        content="定位列"
+                        placement="top-start"
+            >
+           <el-icon @click="scrollToColumn(data.children[0].children[0])"><Location/>
+           </el-icon>
+            </el-tooltip>
+          </span>
+        </span>
+        <span v-else>
+          {{ node.label }}
+        </span>
+      </template>
+    </el-tree>
+  </el-scrollbar>
+</template>
+
+<script>
+export default {
+  name: "previewLeft",
+  inject: ['http'],
+  computed: {
+    props() {
+      return {
+        key: this.treeConfig.value,
+        label: this.treeConfig.label,
+        children: this.treeConfig.children
+      }
+    }
+  },
+  data() {
+    return {
+      toolButOptions: [],
+      search: '关键字搜索',
+      filterText: "",
+      loading: false,
+      value: ''
+    }
+  },
+  methods: {
+    scrollToColumn(row) {
+      this.$emit("scrollToColumn", row)
+    },
+    allowDrag(node) {
+      return node.data.children != undefined
+    },
+    refresh() {
+      console.log("刷新")
+      this.loading = true;
+      this.$nextTick(() => {
+        this.loading = false;
+      })
+    },
+    nodeDrop(draggingNode, dropNode) {
+      // 找到被拖拽节点和放置节点的位置
+      const draggingNodeIndex = this.$attrs.columns.findIndex(node => node.COLUMN_NAME === draggingNode.data.COLUMN_NAME);
+      const dropNodeIndex = this.$attrs.columns.findIndex(node => node.COLUMN_NAME === dropNode.data.COLUMN_NAME);
+      // 更新数组，移除被拖拽节点并在新位置插入
+      let clonedData = [...this.$attrs.columns];
+      clonedData.splice(draggingNodeIndex, 1);
+      clonedData.splice(dropNodeIndex, 0, draggingNode.data);
+      // 更新treeData
+      //this.$attrs.columns = clonedData;
+      this.$emit("updateColumn", clonedData)
+    },
+    allowDrop(draggingNode, dropNode, type) {
+      return type != 'inner'
+    },
+    searchCancel(o) {
+      if (o.search) {
+        o.search = false;
+        o.params.start = '';
+        o.params.end = '';
+        o.params.value = ''
+      }
+      this.$emit('searchCancel')
+    },
+    visible(visible) {
+      for (let column of this.$attrs.columns) {
+        column.children[0].children[0].visible = visible;
+      }
+      this.update()
+    },
+    update() {
+      this.$emit("updateColumn")
+    },
+    async handleOperationClick(e) {
+      this.$emit("handleOperationClick", e)
+    },
+    filterNode(value, data) {
+
+      if (!value) {
+        return true;
+      }
+      return data.label.toString().toLowerCase().includes(value.toString().toLowerCase());
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.treeBox.filter(val);
+    }
+  }, created() {
+  },
+
+}
+
+</script>
+
+<style>
+
+</style>
+<style lang="scss" scoped>
+.search {
+  height: 68px;
+
+  div:first-child {
+    width: 100%
+  }
+}
+
+.tree {
+  position: relative;
+  background-color: white;
+  height: 100%;
+
+  .title {
+    height: 20px;
+    padding: 6px;
+    border-bottom: 1px solid #dcdfe685;
+    position: relative;
+
+    b {
+      position: relative;
+      font-size: 14px
+    }
+
+    div {
+      font-size: 8px;
+    }
+  }
+}
+</style>