olp-table 5.3.1 → 5.3.4

package/src/views/table/add-or-edit/config/base-config/index.vue

@@ -0,0 +1,539 @@
+<template>
+  <avue-form v-model="form.form" :option="option">
+    <template #menu-form="{ size }">
+      <el-button type="primary" :size="size" @click="syncTable">同步table
+      </el-button>
+
+      <el-button type="primary" :size="size" @click="syncCurd">一键同步CURD
+      </el-button>
+      <el-button type="primary" :size="size" @click="updateExecuteSql(0)">SQL格式化
+      </el-button>
+      <el-button type="primary" :size="size" @click="updateExecuteSql(1)">SQL压缩
+      </el-button>
+      <el-button type="primary" status="success"
+                 @click="setFieldConfig(true)">字段配置
+      </el-button>
+    </template>
+    <template #index="{ row }">
+      <el-tag>{{ row.index }}</el-tag>
+    </template>
+    <template #type="{ row }">
+      <el-select v-model="row.type" :disabled="row.$index == 0" @change="setSql('',row.index)">
+        <el-option v-for="item in dicData.joinFiledDicData" :key="item.value" :label="item.label" :value="item.value"/>
+      </el-select>
+    </template>
+    <template #joinTable="{ row }">
+      <lazy-load-select v-model="row.joinTable" placeholder="请选择数据表" :data="dicData.joinTableDicData" @change="setTable"/>
+    </template>
+    <template #joinFiled="{ row }">
+      <el-input v-model="row.joinFiled" @change="setSql('',row.index)" :disabled="row.$index == 0"></el-input>
+    </template>
+    <template #deleteWhere="{ row }">
+      <el-input v-model="row.deleteWhere"></el-input>
+    </template>
+    <template #fields="{ row }">
+      <el-button type="primary"
+                 @click="setFieldEvent(row)">字段配置
+      </el-button>
+    </template>
+  </avue-form>
+  <field-config ref="filedConfig" @close="filedConfigClose"/>
+</template>
+<script setup>
+import {inject, defineExpose, reactive, onMounted, defineEmits, ref} from "vue"
+import {get, postQs} from "@/utils/http/httpUtils"
+import {setArrayObjectKeyValue} from "@/utils/object"
+import {storeDict} from "@/store/dict";
+import {ElMessage} from "element-plus"
+import sqlFormatter from "sql-formatter";
+import FieldConfig from "@/views/table/add-or-edit/config/field-config/index.vue"
+import LazyLoadSelect from "@/components/lazy-load-select.vue";
+
+const http = inject('http')
+const addOrEditRootData = inject('addOrEditRootData');
+const dict = storeDict();
+const dicData = reactive({
+  joinFiledDicData: [{label: '内连接', value: 'join'}, {
+    label: '左连接',
+    value: 'left join'
+  }, {label: '右连接', value: 'right join'},],
+  joinTableDicData: []
+})
+
+const form = reactive({
+  form: {
+    table: [{index: "t1", type: "主表", joinTable: "", joinFiled: "/", deleteWhere: 'id=${id}'}],
+    executeSql: '',
+    executeWhere: '',
+    orderBy: ''
+  }
+})
+
+const option = reactive({
+  submitBtn: false, emptyBtn: false,
+  column: [
+    /* {
+   label: '转换驼峰', prop: 'hump', border: true, type: 'radio', value: '0', span: 7, dicData: [{
+     label: '不转换', value: '0'
+   }, {
+     label: '转换', value: '1'
+   },{
+     label: '请求转换', value: '2'
+   }],
+   dictCode: 'converting_hump'
+ },*/
+    {
+      label: '数据源类型',
+      type: 'radio',
+      span: 7,
+      prop: 'definitionSql',
+      border: true,
+      value: '0',
+      onChange: ({value}) => {
+        if (value == '0') {
+          setArrayObjectKeyValue(option.column, 'display', true, "executeSql,where,table,orderBy")
+          setArrayObjectKeyValue(option.column, 'display', false, "api,requestType")
+        } else if (value == '1') {
+          setArrayObjectKeyValue(option.column, 'display', true, "executeSql,where,orderBy")
+          setArrayObjectKeyValue(option.column, 'display', false, "api,table,requestType")
+        } else {
+          setArrayObjectKeyValue(option.column, 'display', true, "api,requestType")
+          setArrayObjectKeyValue(option.column, 'display', false, "executeSql,where,table,orderBy")
+        }
+      },
+      dicData: [{
+        label: '自动SQL', value: '0'
+      }, {
+        label: '手动SQL', value: '1'
+      }, {
+        label: 'API', value: '2'
+      }],
+      dictCode: 'tree_data_type'
+    }, {
+      label: '查询表格', prop: 'table', type: 'dynamic', span: 24, children: {
+        align: 'center', minHeight: 100, maxHeight: 170, size: "small", headerAlign: 'center', rowAdd: (done) => {
+          let obj = {
+            index: "t" + (form.form.table.length + 1),
+            type: "join",
+            joinTable: "",
+            joinFiled: "t" + form.form.table.length + ".=t" + (form.form.table.length + 1) + "."
+          }
+          done(obj)
+        }, rowDel: (row) => {
+          if (row.$index != 0) {
+            setSql(row.$index)
+          } else {
+            ElMessage.error("主表不能删除!")
+          }
+        }, column: [{
+          width: 60, prop: "index", label: '序号'
+        }, {
+          label: '类型',
+          prop: "type",
+          width: 120,
+          disabled: true,
+          type: 'select',
+        }, {
+          label: '数据表', prop: "joinTable", type: 'select', dicData: []
+        }, {
+          label: 'on', prop: "joinFiled", width: 200, type: 'input'
+        }, {
+          label: '删除条件', prop: "deleteWhere", type: 'input'
+        }, {
+          label: '操作', prop: "fields", type: 'button', width: 110,
+        }]
+      }
+    }, {
+      label: '执行SQL', display: true, type: 'textarea', maxRows: 7, span: 24, prop: 'executeSql',
+    }, {
+      label: 'where条件', display: true, type: 'input', span: 24, prop: 'executeWhere',
+    }, {
+      label: '排序', display: true, type: 'input', span: 24, prop: 'orderBy',
+    }, {
+      label: '默认参数', type: 'input', span: 24, prop: 'parameterDefault',
+    }, {
+      label: 'API', display: true, type: 'input', span: 24, prop: 'api',
+    }, {
+      label: '请求类型', prop: 'requestType', border: true, type: 'radio', value: '0', span: 6,
+      dicData: [],
+      dictCode: 'request_type',
+    },
+  ]
+})
+const configData = inject('configData')
+
+function parseData(data) {
+  if (form.form.definitionSql == '1') {
+    data.mainTable = form.form.mainTable
+  } else {
+    data.mainTable = form.form.table[0].joinTable
+  }
+  data.definitionSql = form.form.definitionSql
+  data.executeSql = form.form.executeSql
+  data.orderBy = form.form.orderBy
+  data.groupBy = form.form.groupBy
+  data.executeWhere = form.form.executeWhere
+  data.parameterDefault = form.form.parameterDefault
+  data.hump = form.form.hump
+  data.api = form.form.api
+  data.requestType = form.form.requestType
+  if (form.form.definitionSql == 0) {
+    if (form.form.table[0].deleteWhere) {
+      data.deleteWhere = {
+        wheres: form.form.table[0].deleteWhere.trim(),
+        tableName: form.form.table[0].joinTable,
+      }
+    } else {
+      delete data.deleteWhere
+    }
+  }
+}
+
+
+function setData(f) {
+  form.form.definitionSql = f
+  form.form.hump = f.hump
+  form.form.mainTable = f.mainTable
+  form.form.executeSql = f.executeSql
+  form.form.orderBy = f.orderBy
+  form.form.api = f.api
+  form.form.requestType = f.requestType
+  form.form.executeWhere = f.executeWhere
+  form.form.parameterDefault = f.parameterDefault
+  form.form.definitionSql = f.definitionSql
+  if (form.form.definitionSql == 0) {
+    sqlParseTable(f.deleteWhere)
+  }
+}
+
+function setTable() {
+  let promise = []
+  for (let i = 0; i < form.form.table.length; i++) {
+    promise.push(get(http, "/online/getDBTableColumnList/" + addOrEditRootData.form.dbName, {tableName: form.form.table[i].joinTable}))
+  }
+  Promise.all(promise).then((result) => {
+    for (let i = 0; i < result.length; i++) {
+      form.form.table[i]['columnList'] = result[i]
+    }
+    setSql()
+  })
+}
+
+function setSql(index, seq) {
+  if (seq != undefined && seq != 0) {
+    let arr = form.form.table.find(item => {
+      return (item.index == seq)
+    })
+    if (!arr || !arr.joinTable) {
+      return
+    }
+  }
+  if (index != undefined && index != 0) {
+    form.form.table.splice(index, 1)
+  }
+
+  let sqlTableOn = form.form.table[0].joinTable + " t1 "
+  let sqlFiled = ""
+  let tableColumns = []
+  let sort = 0
+  for (let i = 0; i < form.form.table.length; i++) {
+    if (i === index) {
+      continue
+    }
+    let obj = form.form.table[i]
+    for (let j = 0; j < obj.columnList.length; j++) {
+      let column = obj.columnList[j]
+      if (column.checked == 0) {
+        continue
+      }
+      if (sqlFiled.length != 0) {
+        sqlFiled += ","
+      }
+      sort++
+      sqlFiled += obj.index + "." + column.column_name + " AS " + column.column_name
+      let column_name = column.column_name
+      let column_comment = column.column_comment ? column.column_comment : column_name
+      tableColumns.push({
+        sort: sort,
+        tableField: column_name,
+        field: column_name,
+        title: column_comment,
+        label: column_comment,
+        visible: column.visible,
+        display: 1,
+        asName: column_name
+      })
+    }
+    if (i != 0) {
+      sqlTableOn += " " + obj.type + " " + obj.joinTable + " " + obj.index + " on " + obj.joinFiled
+    }
+  }
+  for (let tableColumn of tableColumns) {
+    let add = true
+    for (let c of configData.tableColumn) {
+      if (c.field == tableColumn.field) {
+        add = false
+      }
+    }
+    if (add) {
+      configData.tableColumn.push(tableColumn)
+    }
+  }
+
+  for (let i = 0; i < configData.tableColumn.length; i++) {
+    let remove = true
+    for (let tableColumn of tableColumns) {
+      if (configData.tableColumn[i].field == tableColumn.field) {
+        remove = false
+      }
+    }
+    if (remove) {
+      configData.tableColumn.splice(i, 1)
+    }
+  }
+  form.form.executeSql = "select " + sqlFiled + " from " + sqlTableOn
+
+}
+
+const isSyncCurd = ref(false)
+const sync = ref(false)
+
+function syncTable() {
+  emit('loading', true)
+  configData.form.executeSql = form.form.executeSql
+  configData.form.executeWhere = form.form.where
+  postQs(http, "/online/getTableFiled/" + addOrEditRootData.form.dbName, {
+    sql: form.form.executeSql,
+    where: form.form.where,
+    definitionSql: form.form.definitionSql,
+    uuid: configData.form.uuid
+  }, undefined, false).then((data) => {
+    emit("updateTable", data.data)
+    isSyncCurd.value = form.form?.definitionSql == 0 && form.form?.table?.length == 1
+    if (isSyncCurd.value && sync.value) {
+      emit("updateCurd")
+    }
+    setFieldConfig()
+  }).finally(() => {
+    emit('loading', false)
+  })
+}
+
+const filedConfig = ref()
+
+function setFieldConfig(filedConf) {
+  if (form.form.definitionSql != 0) {
+    return;
+  }
+  postQs(http, "/online/getTableSetFiled/" + addOrEditRootData.form.dbName, {
+    sql: form.form.executeSql,
+    where: form.form.where,
+    definitionSql: form.form.definitionSql,
+    uuid: configData.form.uuid
+  }, false, false).then((data) => {
+    setFormTable(data.data)
+    if (filedConf) {
+      filedConfig.value.init(form.form.table)
+    }
+  })
+}
+
+function getTableNamesByFormSql() {
+  let formSql = form.form.executeSql.substring(form.form.executeSql.indexOf('from') + 4)
+  let tableNames = []
+  for (const join of formSql.split('join')) {
+    tableNames.push(join)
+  }
+  return tableNames
+}
+
+function getTableComment(key) {
+  for (const item of dicData.joinTableDicData) {
+    if (item.value == key) return item.label
+  }
+}
+
+function setFormTable(data) {
+  let tableNames = getTableNamesByFormSql()
+  let tables = []
+  for (const key of Object.keys(data)) {
+    let table = {
+      index: 't1',
+      type: '主表',
+      joinTable: key,
+      joinFiled: '/',
+      deleteWhere: '',
+      columnList: [],
+      tableComment: getTableComment(key)
+    }
+    table.columnList = Object.values(data[key])
+    tables.push(table)
+  }
+  form.form.table = []
+  for (let i = 0; i < tableNames.length; i++) {
+    const tableName = tableNames[i]
+    for (const table of tables) {
+      if (tableName.includes(table.joinTable)) {
+        if (i == 0) {
+          table.deleteWhere = 'id=${id}'
+          table.mainTable = table.joinTable
+        }
+        if (i != 0) {
+          table.index = 't' + (i + 1)
+          table.type = 'join'
+          let joinFiled = tableName.substring(tableName.indexOf('on') + 2).replace(/[\n\t\s]+/g, '')
+          if (tableNames[i - 1].includes('left')) {
+            table.type = 'left join'
+            joinFiled = joinFiled.replace('left', '')
+          }
+          if (tableNames[i - 1].includes('right')) {
+            table.type = 'right join'
+            joinFiled = joinFiled.replace('right', '')
+          }
+          table.joinFiled = joinFiled
+        }
+        form.form.table.push(table)
+        break
+      }
+    }
+  }
+}
+
+function updateExecuteSql(v) {
+  if (v === 0) {
+    form.form.executeSql = sqlFormatter.format(form.form.executeSql,
+        {
+          language: 'sql', keywordCase: 'upper', indentStyle: 'tabularLeft'
+        });
+  } else {
+    form.form.executeSql = form.form.executeSql.replace(/\s+/g, " ");
+  }
+}
+
+function filedConfigClose(data) {
+  if (!data) return;
+  for (let j = 0; j < form.form.table.length; j++) {
+    let obj = form.form.table[j];
+    if (Object.keys(data).includes(obj.index)) {
+      form.form.table[j].columnList = data[obj.index];
+    }
+  }
+  setSql();
+}
+
+function setFieldEvent(row) {
+  postQs(http, "/online/getTableSetFiled/" + addOrEditRootData.form.dbName, {
+    sql: form.form.executeSql,
+    definitionSql: form.form.definitionSql,
+    where: form.form.where,
+    uuid: configData.form.uuid
+  }, undefined, false).then((data) => {
+    row.columnList = Object.values(data.data[row.joinTable])
+    filedConfig.value.init(row)
+  })
+}
+
+/**
+ * 一键同步CURD
+ */
+const syncCurd = () => {
+  sync.value = true
+  syncTable()
+}
+
+const parseTable = (tables) => {
+  let tableData = [{index: "t1", type: "主表", joinTable: configData.form.mainTable, joinFiled: "/"}]
+  form.form.table[0].joinTable = tables[0]
+  for (let i = 2; i < tables.length; i++) {
+    let str = tables[i]
+    if (str == "join") {
+      let type = tables[i - 1] == ("left" || "right") ? tables[i - 1] + " join" : "join"
+      let joinTable = tables[++i]
+      let index = tables[++i]
+      i++
+      let joinFiled = tables[++i]
+      tableData.push({
+        index: index,
+        type: type,
+        joinTable: joinTable,
+        joinFiled: joinFiled
+      })
+    }
+  }
+  return tableData
+}
+
+
+const sqlParseTable = (o) => {
+  if (configData.form.executeSql.indexOf(" from ") == -1) {
+    return;
+  }
+  let sql = configData.form.executeSql.split(" from ")
+  let tables = sql[1].split(" ")
+  let tableData = parseTable(tables)
+  let promise = []
+  for (let i = 0; i < tableData.length; i++) {
+    promise.push(get(http, "/online/getDBTableColumnList/" + addOrEditRootData.form.dbName, {
+      tableName: tableData[i].joinTable
+    }))
+  }
+  Promise.all(promise).then((result) => {
+    for (let i = 0; i < result.length; i++) {
+      let cloumns = result[i]
+      for (let cloumn of cloumns) {
+        let checked = "0"
+        let visible = "0"
+        if (configData.tableColumn.length != 0) {
+          for (let o of configData.tableColumn) {
+            if (cloumn.column_name == o.tableField) {
+              if (cloumn.table_name == tableData[i].joinTable) {
+                checked = '1'
+                visible = o.visible
+              }
+            }
+          }
+        } else {
+          checked = '1'
+          visible = '1'
+        }
+        cloumn.checked = checked
+        cloumn.visible = visible
+      }
+      tableData[i]['columnList'] = cloumns
+    }
+    if (o) {
+      tableData[0].deleteWhere = o.wheres
+    }
+    form.form.table = tableData
+    /*dataConfig.value.setData(state.tableData)
+    nextTick(() => {
+      sqlData.value.refreshColumn();
+    })*/
+  })
+}
+
+function remoteMethod() {
+  get(http, "/online/getDBTableList/", {dbName: addOrEditRootData.form.dbName}).then((data) => {
+    dicData.joinTableDicData = data
+  })
+}
+
+function initDict() {
+  for (const column of option.column) {
+    if (column.dictCode) {
+      column.dicData = dict.val(column.dictCode)
+    }
+  }
+}
+
+const emit = defineEmits(["emits", 'updateTab']) //声明 emits
+onMounted(() => {
+  remoteMethod()
+  initDict()
+})
+
+defineExpose({
+  setData, parseData, form
+})
+</script>
+