olp-table 5.3.1 → 5.3.4

package/src/views/table/add-or-edit/configOld/dataTags/index.vue

@@ -0,0 +1,439 @@
+<template>
+  <div>
+
+    <vxe-form :data="configData.form">
+      <vxe-form-item title="主表" field="mainTable" :span="10" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-select v-model="configData.form.mainTable"
+                      :option-props="{label:'label',value:'value',key:'value'}"
+                      placeholder="请选择主表"
+                      :options="state.DBTable"
+                      @change="setTable"
+          ></vxe-select>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="转换驼峰" field="hump" :span="4" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-checkbox v-model="configData.form.hump" checked-value="1" unchecked-value="0"></vxe-checkbox>
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="自定义SQL" field="definitionSql" :span="10" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-checkbox v-model="configData.form.definitionSql" checked-value="1" unchecked-value="0"></vxe-checkbox>
+          <vxe-button v-if="configData.form.definitionSql == 0"
+                      @click="addTableData" :disabled="configData.form.mainTable.length == 0">新增关联表
+          </vxe-button>
+          <!--          <vxe-button @click="tableDelete" status="danger">删除配置</vxe-button>-->
+        </template>
+      </vxe-form-item>
+    </vxe-form>
+    <set-table-sql ref="dataConfig" :DBTable="state.DBTable" @handleDelete="handleDelete" @setTable="setTable"
+                   @setSql="setSql"></set-table-sql>
+    <!--    <vxe-table ref="dataConfig" v-if="configData.form.definitionSql == 0"
+                   :data="state.tableData"
+                   height="180"
+                   stripe
+                   size="mini">
+          <vxe-column field="index" title="序号" width="60" align="center"/>
+          <vxe-column field="type" title="类型" width="90" align="center">
+            <template #default="scope">
+              <vxe-select v-model="scope.row.type" placeholder="请选择关联类型" :disabled="scope.rowIndex === 0"
+                          :options="state.typeOptions" @change="setSql" size="mini"
+                          :option-props="{label:'label',value:'value',key:'value'}" clearable
+                          filterable transfer></vxe-select>
+            </template>
+          </vxe-column>
+          <vxe-column field="joinTable" title="关联表" width="250" align="center">
+            <template #default="scope">
+              <vxe-select v-model="scope.row.joinTable" placeholder="请选择关联表名" :disabled="scope.rowIndex === 0"
+                          :options="state.DBTable" @change="setTable" size="mini"
+                          :option-props="{label:'label',value:'value',key:'value'}" clearable
+                          filterable transfer></vxe-select>
+            </template>
+          </vxe-column>
+          <vxe-column field="joinFiled" title="on" align="center">
+            <template #default="scope">
+              <vxe-input v-model="scope.row.joinFiled" @change="setSql" :placeholder="scope.rowIndex == 0 ? '/' : '请输入关联信息'"
+                         size="mini"
+                         :disabled="scope.rowIndex == 0">
+                &lt;!&ndash;            <template #suffix>
+                              <vxe-button size="mini" :disabled="scope.rowIndex == 0" @click="tableOnConfigShow(scope)">配</vxe-button>
+                            </template>&ndash;&gt;
+              </vxe-input>
+            </template>
+          </vxe-column>
+          <vxe-column field="deleteWhere" title="删除条件" align="center">
+            <template #default="scope">
+              <vxe-input v-model="scope.row.deleteWhere" size="mini">
+              </vxe-input>
+            </template>
+          </vxe-column>
+          <vxe-column field="right" title="操作" width="60" align="center">
+            <template #default="scope">
+              <vxe-button link type="text" size="mini" @click="handleDelete(scope.rowIndex)" status="danger"
+                          :disabled="scope.rowIndex == 0">删除
+              </vxe-button>
+            </template>
+          </vxe-column>
+        </vxe-table>-->
+
+    <vxe-form :data="configData.form">
+      <vxe-form-item title="SQL" field="executeSql" :span="24" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-textarea
+              :disabled="configData.form.definitionSql == 0"
+              v-model="configData.form.executeSql"
+              :autosize="{ minRows: 5 }"
+              type="textarea"
+              placeholder="查询sql"
+          />
+        </template>
+      </vxe-form-item>
+      <vxe-form-item title="where" field="executeWhere" :span="24" :item-render="{}">
+        <template #default="{ data }">
+          <vxe-input
+              v-if="configData.form.definitionSql == 0"
+              v-model="configData.form.executeWhere"
+              placeholder="where条件"
+          />
+        </template>
+      </vxe-form-item>
+
+    </vxe-form>
+    <vxe-button status="primary" @click="getData" :disabled="configData.form.executeSql.length ==0"
+                style="margin:10px 0">执行SQL
+    </vxe-button>
+    <vxe-button status="success" v-if="configData.form.definitionSql == 0"
+                :disabled="configData.form.mainTable.length ==0"
+                @click="$refs.filedConfig.init(state.tableData)">字段配置
+    </vxe-button>
+    <!--    <vxe-button v-if="configData.form.definitionSql == 0" @click="sqlParseTable">SQL解析</vxe-button>-->
+    <vxe-button @click="updateExecuteSql(0)">SQL格式化</vxe-button>
+    <vxe-button @click="updateExecuteSql(1)">SQL压缩</vxe-button>
+    <div v-if="state.dyTable.show != 0" style="text-align: left;color: red">
+      <h1>SQL异常</h1>
+      <p>{{ state.dyTable.errorMsg }}</p>
+    </div>
+    <vxe-table
+        ref="sqlData"
+        v-else
+        align="allAlign"
+        height="250"
+        stripe
+        border
+        size="mini"
+        :data="state.dyTable.tableData">
+      <vxe-column v-if="configData.form.selectBox == 2 " :type="'checkbox'" width="38"/>
+      <vxe-column v-else-if="configData.form.selectBox == 1 " :type="'radio'" width="38"/>
+      <vxe-column type="seq" title="序号" width="60"/>
+      <vxe-column v-for="column in configData.tableColumn" :visible="column.visible == 1"
+                  :title="column.title"
+                  :width="getWidth(column.title)"
+                  :field="column.asName"
+                  show-header-overflow show-overflow>
+        <template #header>
+          <span>{{ column.title }} </span><i class="vxe-icon-error-circle-fill cursor" @click="refreshColumn(column)"/>
+        </template>
+      </vxe-column>
+    </vxe-table>
+    <table-on-config ref="tableOnConfig"></table-on-config>
+    <filed-config ref="filedConfig" @close="filedConfigClose"></filed-config>
+  </div>
+</template>
+
+<script setup>
+import {inject, nextTick, reactive, ref, toRaw} from "vue";
+import TableOnConfig from "@/views/table/add-or-edit/configOld/dataTags/table-on-config.vue"
+import FiledConfig from "@/views/table/add-or-edit/configOld/dataTags/filed-config.vue";
+import sqlFormatter from 'sql-formatter';
+import {get, postQs} from "@/utils/http/httpUtils";
+import SetTableSql from "@/views/table/add-or-edit/configOld/dataTags/set-table-sql.vue";
+const http = inject('http')
+const configData = inject('configData');
+const dataConfig = ref();
+const sqlData = ref();
+const state = reactive({
+  DBTable: [],
+  typeOptions: [
+    {label: '内连接', value: 'join'},
+    {label: '左连接', value: 'left join'},
+    {label: '右连接', value: 'right join'},
+  ],
+  tableData: [{index: "t1", type: "主表", joinTable: "/", joinFiled: "/", deleteWhere: 'id=${t1_id}'}],
+  dyTable: {
+    show: 0,
+    errorMsg: '',
+    tableData: []
+  }
+
+})
+const setDeleteTable = () => {
+  configData.form.deleteWhere = [];
+  for (let o of state.tableData) {
+    if (o.deleteWhere && o.deleteWhere.trim()) {
+      configData.form.deleteWhere.push({
+        tableName: o.joinTable,
+        wheres: o.deleteWhere,
+        theme: o.index
+      })
+    }
+  }
+}
+
+function getWidth(str) {
+  return str.length * 15 + 35;
+}
+
+const sqlParseTable = () => {
+  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/tableMain/getDBTableColumnList", {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;
+    }
+    state.tableData = tableData;
+    dataConfig.value.setData(state.tableData)
+    nextTick(() => {
+      sqlData.value.refreshColumn();
+    })
+    getData();
+  })
+
+}
+
+function getTableDelete(theme) {
+  for (let deleteWhereElement of configData.form.deleteWhere) {
+    if (deleteWhereElement.theme == theme) {
+      return deleteWhereElement.wheres;
+    }
+  }
+}
+
+function remoteMethod() {
+  get(http,"/online/tableMain/getDBTableList").then((data) => {
+    state.DBTable = data;
+  })
+}
+
+remoteMethod();
+
+const parseTable = (tables) => {
+  let tableData = [{index: "t1", type: "主表", joinTable: configData.form.mainTable, joinFiled: "/"}];
+  state.tableData[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
+      });
+    }
+  }
+  for (let data of tableData) {
+    data.deleteWhere = getTableDelete(data.index)
+  }
+  return tableData;
+}
+
+const setTable = (data) => {
+  state.tableData = data;
+  state.tableData[0].joinTable = configData.form.mainTable;
+  let promise = [];
+  for (let i = 0; i < state.tableData.length; i++) {
+    promise.push(get(http,"/online/tableMain/getDBTableColumnList", {tableName: state.tableData[i].joinTable}));
+  }
+  Promise.all(promise).then((result) => {
+    for (let i = 0; i < result.length; i++) {
+      state.tableData[i]['columnList'] = result[i];
+    }
+    setSql();
+  })
+}
+
+const setSql = (data) => {
+  if (data) {
+    state.tableData = data;
+  }
+  let sqlTableOn = configData.form.mainTable + " t1 ";
+  let sqlFiled = "";
+  let tableColumns = [];
+  let sort = 0;
+  for (let i = 0; i < state.tableData.length; i++) {
+    let obj = state.tableData[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 " + obj.index + "_" + 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: obj.index + "_" + column_name,
+        title: column_comment,
+        label: column_comment,
+        visible: column.visible,
+        display: 1,
+        asName: obj.index + "_" + 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);
+    }
+  }
+  configData.form.executeSql = "select " + sqlFiled + " from " + sqlTableOn;
+  nextTick(() => {
+    sqlData.value.refreshColumn();
+  })
+}
+
+const addTableData = () => {
+  state.tableData = [...state.tableData, {
+    index: "t" + (state.tableData.length + 1),
+    type: "join",
+    joinTable: "",
+    joinFiled: "t" + state.tableData.length + ".=t" + (state.tableData.length + 1) + "."
+  }]
+  dataConfig.value.setData(state.tableData)
+}
+
+const updateExecuteSql = (v) => {
+  if (v === 0) {
+    configData.form.executeSql = sqlFormatter.format(configData.form.executeSql,
+        {
+          language: 'sql', keywordCase: 'upper', indentStyle: 'tabularLeft'
+        });
+  } else {
+    configData.form.executeSql = configData.form.executeSql.replace(/\s+/g, " ");
+  }
+}
+
+const filedConfigClose = (data) => {
+  if (!data) {
+    return;
+  }
+  for (let j = 0; j < state.tableData.length; j++) {
+    let obj = state.tableData[j];
+    state.tableData[j].columnList = data[obj.index];
+  }
+  setSql();
+}
+
+function tableDelete() {
+
+}
+
+const getData = () => {
+  let sql = toRaw(configData.form.executeSql);
+  if (configData.form.executeWhere.trim()) {
+    sql += 'where ' + configData.form.executeWhere.trim();
+  }
+  postQs(http,"/online/tableMain/getTableData", {sql: sql}, undefined, false).then(res => {
+    if (res.code == 200) {
+      if (res.data[0]) {
+        state.dyTable.show = 0;
+        state.dyTable.tableData = res.data;
+      } else {
+        state.dyTable.show = 1;
+        state.dyTable.errorMsg = "无数据";
+      }
+
+    } else {
+      state.dyTable.show = 1;
+      state.dyTable.errorMsg = res.msg;
+    }
+  })
+}
+
+const handleDelete = (index) => {
+  var parse = JSON.parse(JSON.stringify(state.tableData));
+  parse.splice(index, 1);
+  state.tableData = parse;
+  dataConfig.value.setData(parse)
+  setSql();
+}
+const refreshColumn = (column) => {
+  if (column) {
+    column.visible = 0;
+  }
+  nextTick(() => {
+    sqlData.value.refreshColumn();
+  })
+}
+defineExpose({
+  sqlParseTable,
+  setDeleteTable,
+  refreshColumn,
+})
+</script>
+<style scoped lang="less">
+.cursor {
+  cursor: pointer;
+}
+
+.cursor:hover {
+  color: red;
+}
+</style>

package/src/views/table/add-or-edit/configOld/dataTags/set-table-sql.vue

@@ -0,0 +1,79 @@
+<template>
+  <vxe-table ref="dataConfig"
+             :data="state.data"
+             height="180"
+             stripe
+             size="mini">
+    <vxe-column field="index" title="序号" width="60" align="center"/>
+    <vxe-column field="type" title="类型" width="90" align="center">
+      <template #default="scope">
+        <vxe-select v-model="scope.row.type" placeholder="请选择关联类型" :disabled="scope.rowIndex === 0"
+                    :options="state.typeOptions" @change="emit('setSql',state.data)" size="mini"
+                    :option-props="{label:'label',value:'value',key:'value'}" clearable
+                    filterable transfer></vxe-select>
+      </template>
+    </vxe-column>
+    <vxe-column field="joinTable" title="关联表" width="250" align="center">
+      <template #default="scope">
+        <vxe-select v-model="scope.row.joinTable" placeholder="请选择关联表名" :disabled="scope.rowIndex === 0"
+                    :options="props.DBTable" @change="emit('setTable',state.data)" size="mini"
+                    :option-props="{label:'label',value:'value',key:'value'}" clearable
+                    filterable transfer></vxe-select>
+      </template>
+    </vxe-column>
+    <vxe-column field="joinFiled" title="on" align="center">
+      <template #default="scope">
+        <vxe-input v-model="scope.row.joinFiled" @change="emit('setSql',state.data)"
+                   :placeholder="scope.rowIndex == 0 ? '/' : '请输入关联信息'"
+                   size="mini"
+                   :disabled="scope.rowIndex == 0">
+          <!--            <template #suffix>
+                        <vxe-button size="mini" :disabled="scope.rowIndex == 0" @click="tableOnConfigShow(scope)">配</vxe-button>
+                      </template>-->
+        </vxe-input>
+      </template>
+    </vxe-column>
+    <vxe-column field="deleteWhere" title="删除条件" align="center">
+      <template #default="scope">
+        <vxe-input v-model="scope.row.deleteWhere" size="mini">
+        </vxe-input>
+      </template>
+    </vxe-column>
+    <vxe-column field="right" title="操作" width="60" align="center">
+      <template #default="scope">
+        <vxe-button link type="text" size="mini" @click="handleDelete(scope.rowIndex)" status="danger"
+                    :disabled="scope.rowIndex == 0">删除
+        </vxe-button>
+      </template>
+    </vxe-column>
+  </vxe-table>
+</template>
+<script setup>
+import {defineEmits, defineProps, reactive, watch} from "vue";
+
+const props = defineProps({
+  DBTable: {required: true},
+})
+function setData(data){
+  state.data = data;
+}
+const state = reactive({
+  data:[],
+  DBTable:[],
+  typeOptions: [
+    {label: '内连接', value: 'join'},
+    {label: '左连接', value: 'left join'},
+    {label: '右连接', value: 'right join'},
+  ]
+})
+
+const handleDelete = (index) => {
+  emit("handleDelete", index)
+}
+
+const emit = defineEmits(["setSql"]); //声明 emits
+// 对外暴露
+defineExpose({
+  setData
+})
+</script>

package/src/views/table/add-or-edit/configOld/dataTags/table-on-config.vue

@@ -0,0 +1,74 @@
+<template>
+<!--  <vxe-dialog
+      class="table-on-config"
+      v-model="dialogVisible"
+      :show-close="false"
+      title="关联字段配置"
+      width="700px"
+      :before-close="handleClose">
+    <vxe-table height="200px">
+      <vxe-table-column type="index" label="序号" width="60" align="center"/>
+      <vxe-table-column prop="filedName" label="字段-名称" width="180" align="center"/>
+      <vxe-table-column prop="filedName" label="关联表" width="180" align="center"/>
+      <vxe-table-column prop="filedName" label="字段-名称（关联表）" align="center"/>
+      <vxe-table-column fixed="right" label="操作" width="60" align="center">
+        <template #default="scope">
+          <vxe-button link type="primary" size="small" @click="handleDelete(scope.row)" :disabled="scope.$index == 0">删除
+          </vxe-button>
+        </template>
+      </vxe-table-column>
+    </vxe-table>
+    <vxe-form :model="form" style="padding: 10px">
+      <vxe-form-item label="自定义">
+        <vxe-input v-model="form.name"/>
+      </vxe-form-item>
+      <vxe-form-item label="on">
+        <vxe-input v-model="form.name" disabled=""/>
+      </vxe-form-item>
+    </vxe-form>
+    <template #footer>
+      <span class="dialog-footer">
+        <vxe-button @click="dialogVisible = false">取消</vxe-button>
+        <vxe-button type="primary" @click="dialogVisible = false">保存</vxe-button>
+      </span>
+    </template>
+  </vxe-dialog>-->
+
+</template>
+<script>
+import {reactive, ref} from "vue";
+export default {
+  name:'tableOnConfig',
+  setup() {
+    const dialogVisible = ref(false)
+    const form = reactive({
+      mainTable: '',
+      hump: '1',
+    })
+    const tab = reactive({
+      activeName: 'data'
+    })
+    const size = ref(0)
+    size.value =  window.innerHeight-210;
+    window.onresize = () => {
+      size.value = window.innerHeight-210;
+    };
+    return {dialogVisible, tab, form, size}
+  },
+  methods: {
+    handleClose() {
+
+    },
+    handleDelete(row){
+
+    },
+
+    handleClick() {
+
+    }
+  }
+}
+</script>
+<style lang="less">
+
+</style>