olp-table 5.3.4 → 5.3.5

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

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

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

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