olp-table 5.3.1 → 5.3.4

package/src/views/db/chineseToEnglish.vue

@@ -0,0 +1,127 @@
+<template>
+  <el-dialog
+      v-model="dialogVisible"
+      title="中文转换英文"
+      destroy-on-close
+      width="500"
+      :show-close="false"
+      :showHeader="false"
+      append-to-body
+  >
+    <el-form label-width="80">
+      <el-form-item label="中文">
+        <el-input v-model="value" v-bind="$attrs">
+          <template #append>
+            <el-button @click="get">搜索</el-button>
+          </template>
+        </el-input>
+      </el-form-item>
+    </el-form>
+    <vxe-grid v-bind="gridOptions" ref="vexGridRef"
+              resizable>
+      <template #default_COLUMN_COMMENT="{ row }">
+        <span v-for="item in row.COLUMN_COMMENT.split('')">
+          <span :style="value.indexOf(item) != -1 ? 'color: red' :''">{{ item }}</span>
+        </span>
+      </template>
+    </vxe-grid>
+
+    <template #footer>
+      <div class="dialog-footer">
+        <el-button type="primary" @click="save">确认</el-button>
+      </div>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {get} from "@/utils/http/httpUtils";
+
+export default {
+  name: "chineseToEnglish",
+
+  inject: ['http', 'DBForm'],
+  data() {
+    return {
+      dialogVisible: false,
+      value: '',
+      row: {},
+      key: '',
+      valueKey: '',
+      dbName: '',
+      gridOptions: {
+        loading: false,
+        rowConfig: {
+          isHover: true,
+          isCurrent: true
+        },
+        size: 'mini',
+        border: true,
+        height: '500px',
+        align: "left",
+        radioConfig: {
+          trigger: 'row',
+          highlight: true
+        },
+        columns: [
+          {type: 'radio', width: 60},
+          {
+            type: "seq",
+            width: 60,
+            title: "序号",
+          },
+          {
+            title: '英文',
+            field: 'COLUMN_NAME'
+          },
+          {
+            title: '中文',
+            field: 'COLUMN_COMMENT',
+            slots: {
+              default: 'default_COLUMN_COMMENT'
+            }
+          }
+        ],
+        data: []
+      },
+    }
+  },
+  methods: {
+    save() {
+      this.row[this.valueKey] = this.$refs.vexGridRef.getRadioRecord().COLUMN_NAME
+      this.dialogVisible = false;
+    },
+    show(row, key, valueKey) {
+      this.dialogVisible = true;
+      this.key = key;
+      this.valueKey = valueKey;
+      let rowElement = row[key];
+      let number = rowElement.indexOf("(");
+      if (number == -1) {
+        number = rowElement.indexOf("（");
+      }
+      if (number != -1) {
+        rowElement = rowElement.substring(0, number);
+      }
+      this.value = rowElement.replace(/[^\u4e00-\u9fa5]/g, '');
+      this.row = row;
+      this.get();
+    },
+    get() {
+      if (!this.DBForm.dbName) {
+        console.log('数据库名为空！')
+        return
+      }
+      let params = {
+        dbName: this.DBForm.dbName,
+        text: this.value
+      }
+      this.gridOptions.loading = true;
+      get(this.http, '/online/asyncDb/chineseToEnglish', params).then(data => {
+        this.gridOptions.loading = false;
+        this.gridOptions.data = data;
+        this.$refs.vexGridRef.setRadioRow(this.gridOptions.data[0])
+      })
+    }
+  }
+}
+</script>

package/src/views/db/filed.vue

@@ -0,0 +1,395 @@
+<template>
+  <div>
+    <vxe-grid v-bind="gridOptions" ref="vexGridRef" :expand-config="{ labelField: 'seq' }"
+              resizable>
+      <template #header_name_auto_filter="event">
+        <ol-table-filter :event="event"></ol-table-filter>
+      </template>
+      <template #input_default="{ column, row,rowIndex }">
+        <el-input v-model="row[column.field]" @change="update" size="small" :disabled="isDisable(rowIndex)"></el-input>
+      </template>
+      <template #input_title="{ column, row,rowIndex }">
+        <el-input v-model="row[column.field]" size="small" @change="update" :disabled="isDisable(rowIndex)">
+          <template #append>
+            <el-button @click="show(row)" size="small" :disabled="isDisable(rowIndex) || !row[column.field]">搜索英文</el-button>
+          </template>
+        </el-input>
+      </template>
+      <template #name="{ column, row,rowIndex }">
+        <el-tag type="info" v-if="isDisable(rowIndex)" effect="dark">表默认</el-tag>
+        <el-tag type="danger" v-else-if="row.delete == 1" effect="dark">已删除</el-tag>
+        <el-tag type="primary" v-else-if="row.COLUMN_NAME_OLD == undefined" effect="dark">新字段</el-tag>
+        <el-tag type="warning" v-else-if="row.COLUMN_NAME_OLD != row.COLUMN_NAME" effect="dark">重命名</el-tag>
+        <el-tag type="success" v-else-if="row.COLUMN_NAME_OLD == row.COLUMN_NAME" effect="dark">无更新</el-tag>
+      </template>
+      <template #number_default="{ column, row,rowIndex }">
+        <el-input type="number" size="small" v-model="row[column.field]" :disabled="isDisable(rowIndex)"/>
+      </template>
+      <!-- 通用多选框 -->
+      <template #checkedBox_header="{ column}">
+        <div style="display: flex;align-items: center;">
+          <el-checkbox v-model="column.params.all" @change="headerClick(column)"></el-checkbox>
+          <span style="margin-left: 5px;">{{ column.title }} </span>
+        </div>
+      </template>
+      <template #checkedBox_default="{ column, row,rowIndex }">
+        <el-checkbox v-model="row[column.field]" @change="checkbox" :disabled="isDisable(rowIndex)" true-value="NO"
+                     false-value="YES"/>
+      </template>
+      <!-- 通用下拉框 -->
+      <template #select_default="{ column, row,rowIndex }">
+        <el-select ref="dictTag" size="small" v-model="row[column.field]" @change="updateTypes(row)"
+                   :disabled="isDisable(rowIndex)" placeholder="可搜索" filterable>
+          <el-option v-for="item in DBForm.dbType == 'Oracle'?oraOptions:mysqlOptions" :label="item.dictLabel"
+                     :value-key="item.dictLabel"
+                     :value="item.dictLabel"></el-option>
+        </el-select>
+      </template>
+      <template #operate="{ rowIndex,row }">
+        <el-button @click="removeRow(rowIndex,true)" size="small" v-if="row.delete != 1"
+                   :disabled="isDisable(rowIndex) || !row.COLUMN_NAME"
+                   type="danger"> 删除
+        </el-button>
+        <el-button @click="removeRow(rowIndex,false)" size="small" v-else type="success"> 恢复
+        </el-button>
+      </template>
+    </vxe-grid>
+    <chinese-to-english ref="chineseToEnglish"></chinese-to-english>
+  </div>
+</template>
+<script>
+import {get} from "@/utils/http/httpUtils";
+import ChineseToEnglish from "@/views/db/chineseToEnglish.vue";
+import {storeDictType} from "@/store/dictType";
+import {storeDict} from "@/store/dict";
+import OlTableFilter from "@/components/ol-table-filter.vue";
+
+export default {
+  name: "dbFiled",
+  components: {OlTableFilter, ChineseToEnglish},
+  inject: ['http', 'DBForm'],
+  props: {},
+  data() {
+    return {
+      dict: storeDict(),
+      dictType: storeDictType(),
+      options: [],
+      oraOptions: [],
+      mysqlOptions: [],
+      gridOptions: {
+        filterConfig: {
+          showIcon: false
+        },
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 0},
+        loading: false,
+        size: 'mini',
+        border: true,
+        height: '100%',
+        align: "left",
+        columns: [
+          {
+            type: "seq",
+            width: 60,
+            fixed: 'left',
+            title: "序号",
+          },
+          {
+            title: '字段名状态',
+            field: 'COLUMN_NAME_OLD',
+            width: 90,
+            slots: {
+              default: 'name'
+            },
+          },
+          {
+            title: '列描述',
+            children: [{
+              field: 'COLUMN_COMMENT',
+              minWidth: 300,
+              slots: {
+                header: 'header_name_auto_filter',
+                default: 'input_title'
+              },
+            }]
+          },
+          {
+            title: '新列名',
+            children: [{
+              field: 'COLUMN_NAME',
+              width: 250,
+              slots: {
+                header: 'header_name_auto_filter',
+                default: 'input_default'
+              },
+            }]
+          },
+          {
+            title: '列类型',
+            field: 'DATA_TYPE',
+            width: 140,
+            slots: {
+              default: 'select_default'
+            }
+          },
+          {
+            title: '长度',
+            field: 'CHARACTER_MAXIMUM_LENGTH',
+            width: 90,
+            slots: {
+              default: 'input_default'
+            },
+          },
+          {
+            title: '类型',
+            field: 'COLUMN_TYPE',
+            width: 150,
+          },
+          {
+            title: '默认值',
+            field: 'COLUMN_DEFAULT',
+            width: 250,
+            slots: {
+              default: 'input_default'
+            },
+          },
+          {
+            title: '非空',
+            field: 'IS_NULLABLE',
+            align: 'center',
+            width: 80,
+            params: {
+              all: 0
+            },
+            slots: {
+              header: 'checkedBox_header',
+              default: 'checkedBox_default'
+            },
+          },
+          {
+            title: '操作',
+            width: 100,
+            fixed: 'right',
+            align: 'center',
+            slots: {
+              default: 'operate'
+            }
+          }
+        ],
+        data: [{}],
+      },
+      activeName: '',
+    }
+  },
+  computed: {
+    jsonType() {
+      let type = this.type.split(",");
+      let jsonType = [];
+      for (let t of type) {
+        jsonType.push({dictLabel: t.trim(), dictValue: t.trim()});
+      }
+      return jsonType;
+    }
+  },
+  methods: {
+    show(row) {
+      this.$refs.chineseToEnglish.show(row, 'COLUMN_COMMENT', 'COLUMN_NAME')
+    },
+    changeNameFilter(option) {
+      option.checked = true
+      this.$refs.vexGridRef.updateData()
+    },
+    isDisable(rowIndex) {
+      //return rowIndex <= 1 && this.DBForm.tableDefault == '1'
+      return false
+    },
+    updateTypes(row) {
+      if (row.DATA_TYPE == 'decimal' && row.COLUMN_TYPE.indexOf(",") == -1) {
+        row.CHARACTER_MAXIMUM_LENGTH = "10,2";
+      } else if (row.DATA_TYPE == 'varchar' && row.CHARACTER_MAXIMUM_LENGTH == "") {
+        row.CHARACTER_MAXIMUM_LENGTH = "64";
+      } else if (!(row.DATA_TYPE == 'varchar' || row.DATA_TYPE == 'int'
+          || row.DATA_TYPE == 'bigint' ||
+          row.DATA_TYPE == 'float' ||
+          row.DATA_TYPE == 'double')) {
+        row.CHARACTER_MAXIMUM_LENGTH = "";
+      }
+      if (row.DATA_TYPE != 'decimal' && row.COLUMN_TYPE.indexOf(",") != -1) {
+        row.CHARACTER_MAXIMUM_LENGTH = "64";
+      }
+      this.updateType();
+    },
+    loadData(form) {
+      this.$nextTick(() => {
+        get(this.http, "/online/asyncDb/getColumn", {
+          dbName: form.dbName,
+          tableName: form.tableName
+        }).then(({column, table}) => {
+          form.desc = table.TABLE_COMMENT;
+          this.gridOptions.data = column
+        }).finally(() => {
+          this.gridOptions.loading = false;
+          this.$emit("ok")
+          this.update();
+        })
+      })
+    },
+    setList(form) {
+      let list = this.gridOptions.data.slice(0, -1);
+      form['list'] = list;
+    },
+    updateBS(form) {
+      this.gridOptions.data[1].COLUMN_NAME = "create_" + form.bs;
+      this.gridOptions.data[2].COLUMN_NAME = "update_" + form.bs;
+    },
+    initDefaultData(form) {
+      let data = [
+        {
+          "COLUMN_COMMENT": "主键",
+          "COLUMN_TYPE": "bigint(20)",
+          "COLUMN_NAME": "id",
+          "DATA_TYPE": "bigint",
+          "CHARACTER_MAXIMUM_LENGTH": 20,
+          "DEFAULT": '1',
+          "IS_NULLABLE": "YES",
+          "COLUMN_DEFAULT": ""
+        },
+        {
+          "COLUMN_COMMENT": "创建者",
+          "COLUMN_TYPE": "varchar(64)",
+          "COLUMN_NAME": "create_" + form.bs,
+          "DATA_TYPE": "varchar",
+          "DEFAULT": '1',
+          "CHARACTER_MAXIMUM_LENGTH": 64,
+          "IS_NULLABLE": "YES",
+          "COLUMN_DEFAULT": ""
+        },
+        {
+          "COLUMN_COMMENT": "更新者",
+          "COLUMN_TYPE": "varchar(64)",
+          "COLUMN_NAME": "update_" + form.bs,
+          "DATA_TYPE": "varchar",
+          "DEFAULT": '1',
+          "CHARACTER_MAXIMUM_LENGTH": 64,
+          "IS_NULLABLE": "YES",
+          "COLUMN_DEFAULT": ""
+        },
+        {
+          "COLUMN_COMMENT": "创建时间",
+          "COLUMN_TYPE": "timestamp",
+          "COLUMN_NAME": "create_time",
+          "DATA_TYPE": "timestamp",
+          "DEFAULT": '1',
+          "CHARACTER_MAXIMUM_LENGTH": null,
+          "IS_NULLABLE": "NO",
+          "COLUMN_DEFAULT": "CURRENT_TIMESTAMP"
+        },
+        {
+          "COLUMN_COMMENT": "更新时间",
+          "COLUMN_TYPE": "timestamp",
+          "COLUMN_NAME": "update_time",
+          "DATA_TYPE": "timestamp",
+          "DEFAULT": '1',
+          "CHARACTER_MAXIMUM_LENGTH": null,
+          "IS_NULLABLE": "NO",
+          "COLUMN_DEFAULT": "CURRENT_TIMESTAMP"
+        },
+        {
+          "COLUMN_COMMENT": "备注",
+          "COLUMN_TYPE": "varchar(255)",
+          "COLUMN_NAME": "remark",
+          "DEFAULT": '1',
+          "DATA_TYPE": "varchar",
+          "CHARACTER_MAXIMUM_LENGTH": 255,
+          "IS_NULLABLE": "YES",
+          "COLUMN_DEFAULT": null
+        }
+      ];
+      let filedMap = {};
+      for (let d of data) {
+        filedMap[d.COLUMN_NAME] = d;
+      }
+      if ("1" != this.DBForm.tableDefault) {
+        let baseData = []
+        for (let obj of this.gridOptions.data) {
+          if (obj.COLUMN_NAME) {
+            if (!filedMap[obj.COLUMN_NAME.toString().toLowerCase()]) {
+              baseData.push(obj);
+            }
+          } else {
+            baseData.push(obj);
+          }
+        }
+        this.gridOptions.data = baseData;
+      } else {
+        for (let obj of this.gridOptions.data) {
+          obj.COLUMN_NAME && filedMap[obj.COLUMN_NAME.toString().toLowerCase()] && delete filedMap[obj.COLUMN_NAME.toString().toLowerCase()];
+        }
+        this.gridOptions.data = [...Object.values(filedMap), ...this.gridOptions.data]
+      }
+    },
+    checkbox() {
+      let IS_NULLABLE = true;
+      for (let data of this.gridOptions.data) {
+        if (data.IS_NULLABLE == "NO") {
+          IS_NULLABLE = false;
+          break
+        }
+      }
+      for (let column of this.gridOptions.columns) {
+        if (column.field == 'IS_NULLABLE') {
+          column.params.all = IS_NULLABLE;
+        }
+      }
+    },
+    headerClick(e) {
+      for (let i = 0; i < this.gridOptions.data.length; i++) {
+        let data = this.gridOptions.data[i];
+        if (i > 5) {
+          data.IS_NULLABLE = e.params.all ? "YES" : "NO"
+        }
+      }
+    },
+    async removeRow(r, remove) {
+      if (remove) {
+        let type = await this.$confirm('数据删除后不可恢复，您确定要删除吗？', '删除提示', 'error')
+        if (type != "cancel") {
+          this.gridOptions.data[r].delete = 1;
+        }
+      } else {
+        delete this.gridOptions.data[r].delete
+      }
+      this.update();
+    },
+    update() {
+      let data = this.gridOptions.data[this.gridOptions.data.length - 1];
+      if (!data || (data.COLUMN_COMMENT && data.COLUMN_COMMENT.toString().length != 0)) {
+        this.gridOptions.data.push({
+          IS_NULLABLE: 'NO',
+          COLUMN_TYPE: 'varchar(100)',
+          CHARACTER_MAXIMUM_LENGTH: '100',
+          DATA_TYPE: 'varchar',
+        });
+      }
+      this.updateType();
+    },
+    updateType() {
+      for (let i = 0; i < this.gridOptions.data.length - 1; i++) {
+        let datum = this.gridOptions.data[i];
+        if (datum.CHARACTER_MAXIMUM_LENGTH) {
+          datum.COLUMN_TYPE = datum.DATA_TYPE + "(" + datum.CHARACTER_MAXIMUM_LENGTH + ")";
+        } else {
+          datum.COLUMN_TYPE = datum.DATA_TYPE;
+        }
+      }
+    },
+    initConfigDict() {
+      this.oraOptions = this.dict.val('ora_col_type');
+      this.mysqlOptions = this.dict.val('mysql_col_type');
+    },
+  },
+  created() {
+    this.initConfigDict()
+  }
+}
+</script>