olp-table 5.3.4 → 5.3.5

package/src/views/db/index.vue

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

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

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