olp-table 5.3.1 → 5.3.4

package/src/views/tree/index.vue

@@ -0,0 +1,424 @@
+<template>
+  <div>
+    <el-dialog
+        class="tree-add-or-edit"
+        v-model="dialogVisible"
+        fullscreen
+        destroy-on-close
+        :show-close="false"
+        :showHeader="false"
+    >
+      <div v-if="dialogVisible"
+           v-loading="loading" element-loading-text="正在加载数据中..."
+           element-loading-background="rgba(122, 122, 122, 0.8)">
+        <el-card v-if="show" style="height: 100%;position: relative;float: left;margin-right: 20px;">
+          <template #header>组件预览</template>
+          <o-tree :treeConfig="this.treeConfigAll.treeConfig" ref="oTree"
+                  :toolButOptions="treeConfigAll.toolButOptions"
+                  :formMainList="treeConfigAll.formMainMap"
+                  style="height: calc(100vh - 180px)"></o-tree>
+        </el-card>
+        <el-card style="position: relative;height: 100%;">
+          <template #header>配置中心</template>
+          <config-core ref="config" :syncTable="syncTable" :setFormConfigData="setFormConfigData"
+                       :syncFormConfig="syncFormConfig"></config-core>
+        </el-card>
+      </div>
+
+      <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="dialogVisible = false;$emit('emits', {m: 'query'})" :loading="loading">取消</el-button>
+        <el-button type="primary" :loading="loading" @click="save">保存</el-button>
+      </span>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+<script>
+
+import ConfigCore from "@/views/tree/components/config-core.vue";
+import {get, post} from "@/utils/http/httpUtils";
+import OTree from "@/components/tree/components/o-tree.vue";
+
+export default {
+  name: 'treeConfig',
+  components: {OTree, ConfigCore},
+  provide() {
+    return {
+      treeConfigAll: this.treeConfigAll,      //传入一个响应式对象
+      syncFormConfig: this.syncFormConfig
+    }
+  },
+  inject: ['http'],
+  data() {
+    return {
+      loading: true,
+      dialogVisible: false,
+      show: true,
+      data: [
+        {index: "t1", type: "主表", joinTable: "", joinFiled: "/", deleteWhere: 'id=${id}'}
+      ],
+      treeConfigAll: {
+        treeConfig: {
+          hump: 0,
+          configName: '',
+          width: 400,
+          dataSource: '',
+          treeId: '',
+          treeParentId: '',
+          mainTable: '',
+          optionJson: {},
+          tableQueryParams: '',
+          executeSql: '',
+          lazy: '0',
+          firstLazyValue: '',
+          executeWhere: '',
+          orderBy: '',
+          parameterDefault: '',
+          api: '',
+          title: '',
+          label: 'label',
+          value: 'value',
+          expandIcon: '',
+          showCheckbox: 1,
+          drawIcon: '',
+          treeOper: [],
+          convertTree: 1,
+          autoInit: 0,
+          search: 1,
+          firstExpandAll: 1,
+          dbName: '',
+          optionValue: {},//默认多余字段,并接到optionJson
+          propValue: {},//默认多余字段,并接到optionJson
+          eventsValue: {},//默认多余字段,并接到optionJson
+        },
+        toolButOptions: [],
+        formMainList: [],
+        formMainMap: {},
+        tableColumn: [],
+        mainTableColumnList: [],
+        uuid: '',
+        dicData: {
+          joinTableDicData: [],
+          joinFiledDicData: []
+        }
+      }
+    }
+  },
+  watch: {
+    'treeConfigAll.treeConfig.label'() {
+      this.refreshTree()
+    },
+    'treeConfigAll.treeConfig.value'() {
+      this.refreshTree()
+    },
+    'treeConfigAll.treeConfig.treeId'() {
+      this.refreshTree()
+    }, 'treeConfigAll.treeConfig.treeParentId'() {
+      this.refreshTree()
+    },
+    'treeConfigAll.treeConfig.treeOper': {
+      handler(newVal) {
+        if (newVal.includes('add')) {
+          this.syncFormConfigInit('add')
+        }
+        if (newVal.includes('edit')) {
+          this.syncFormConfigInit('edit')
+        }
+      },
+      immediate: false, // 默认不立即执行回调
+      deep: false // 不需要深度监听，因为我们直接指定了属性名
+    },
+  }, 'treeConfigAll.treeConfig.treeId'() {
+    this.refreshTree()
+  },
+  methods: {
+    init(o) {
+      if (o) {
+        this.treeConfigAll.uuid = o.uuid
+        this.loading = true;
+        get(this.http, '/online/treeConfig/getJson', {uuid: o.uuid}, undefined, true).then(({
+                                                                                              treeConfig,
+                                                                                              toolButOptions,
+                                                                                              formMainList
+                                                                                            }) => {
+          this.treeConfigAll.toolButOptions = toolButOptions;
+          this.treeConfigAll.formMainMap = formMainList;
+          treeConfig.treeOper = toolButOptions.map(o => o.code);
+          if (treeConfig.optionJson) {
+            treeConfig.optionJson = JSON.parse(treeConfig.optionJson);
+          } else {
+            treeConfig.optionJson = {}
+          }
+          treeConfig.optionValue = treeConfig.optionJson.optionValue ? treeConfig.optionJson.optionValue : {}
+          treeConfig.propValue = treeConfig.optionJson.propValue ? treeConfig.optionJson.propValue : {}
+          treeConfig.eventsValue = treeConfig.optionJson.eventsValue ? treeConfig.optionJson.eventsValue : {}
+          this.treeConfigAll.treeConfig = treeConfig;
+          this.refreshTree()
+          this.$nextTick(() => {
+            this.initTable()
+          })
+        }).finally(() => {
+          this.loading = false;
+        })
+      } else {
+        this.loading = false;
+      }
+      this.dialogVisible = true;
+
+    },
+    initColumnList() {
+      if (this.treeConfigAll.treeConfig.table && this.treeConfigAll.treeConfig.table.length >= 1) {
+        this.treeConfigAll.mainTableColumnList = this.treeConfigAll.treeConfig.table[0].columnList
+        return
+      }
+      let param = {tableName: this.treeConfigAll.treeConfig.mainTable}
+      get(this.http, '/online/getDBTableColumnList/' + this.treeConfigAll.treeConfig.dbName, param).then((res) => {
+            this.treeConfigAll.mainTableColumnList = res
+          }
+      )
+    },
+    setFormList() {
+      //保存新增和编辑表单配置
+      let formMainList = []
+      if (this.treeConfigAll.treeConfig.treeOper.includes('add')) {
+        formMainList.push(this.getFormMain('add'))
+        this.treeConfigAll.formMainMap['add']= this.getFormMain('add')
+      }
+      if (this.treeConfigAll.treeConfig.treeOper.includes('edit')) {
+        formMainList.push(this.getFormMain('edit'))
+        this.treeConfigAll.formMainMap['edit']= this.getFormMain('edit')
+      }
+      if (formMainList.length != 0) {
+        this.treeConfigAll.formMainList = formMainList
+      }
+    },
+    getFormMain(type) {
+      const formConfigData = this.$refs.config.$refs[type + 'FormConfig'].getData()
+      if (formConfigData) {
+        let data = {
+          formMain: {
+            formType: type,
+            designer: "" + formConfigData.designer,  //表单类型 （0）基础表单  （1）自定义表单
+            uuid: this.treeConfigAll.uuid,
+            saveUrl: formConfigData.saveUrl,
+            customForm: formConfigData.customForm
+          },
+          formMainColumns: formConfigData.vexTable.data,
+          formJson: {
+            optionJson: formConfigData.codeForm,
+            customJson: JSON.stringify(formConfigData.customJson)
+          }
+        }
+        if (type == 'edit') {
+          data.updateKey = formConfigData.updateKey
+        }
+        return data
+      }
+    },
+    initOption(type) {
+      let key = type + 'Value';
+      let ref = this.$refs.config.$refs.tree.$refs[type];
+      if (ref) {
+        ref.setData(this.treeConfigAll.treeConfig, key)
+      }
+      if (this.treeConfigAll.treeConfig[key]) {
+        this.treeConfigAll.treeConfig.optionJson[key] = this.treeConfigAll.treeConfig[key];
+      }
+    },
+
+    async save() {
+      this.treeConfigAll.treeConfig.optionJson = {};
+      this.initOption("option");
+      this.initOption("prop");
+      this.initOption("events");
+      this.treeConfigAll.treeConfig.optionJson = JSON.stringify(this.treeConfigAll.treeConfig.optionJson)
+      this.loading = true;
+      await this.$refs.config.$refs.data.$refs.formRef.validate((v, o) => {
+        if (!v) {
+          this.$refs.config.activeName = "data";
+          this.loading = false;
+          return
+        }
+      })
+      await this.$refs.config.$refs.tree.$refs.formRef.validate((v, o) => {
+        if (!v) {
+          for (let key of Object.keys(o)) {
+            if (this.treeConfigAll.treeConfig[key] == '' || this.treeConfigAll.treeConfig[key] == undefined) {
+              this.$refs.config.activeName = "tree";
+              this.loading = false;
+              return
+            }
+          }
+        }
+        if (this.treeConfigAll.treeConfig.treeOper
+            && this.treeConfigAll.treeConfig.treeOper.length >= 1) {
+          this.syncFormConfig()
+          this.setFormList()
+        }
+        post(this.http, "/online/treeConfig/saveJson", this.treeConfigAll, undefined, false).then(() => {
+          this.$emit("emits", {m: 'query'});
+          this.dialogVisible = false;
+        }).finally(() => {
+          this.loading = false;
+        })
+      })
+    },
+    syncTable() {
+      this.$refs.config.$refs.data.$refs.formRef.validate((v) => {
+        if (!v) {
+          this.$refs.config.activeName = "data";
+          return
+        }
+        this.$refs.oTree.doQuery({
+          sql: this.treeConfigAll.treeConfig.executeSql,
+          dbName: this.treeConfigAll.treeConfig.dbName,
+          queryType: 100,
+          enablePage: false
+        })
+      })
+    },
+    refreshTree() {
+      this.show = false;
+      this.$nextTick(() => {
+        this.show = true;
+      })
+    },
+    initConfigDict() {
+      this.treeConfigAll.dicData.joinFiledDicData = this.dict.val('join_filed')
+      this.remoteMethod()
+    },
+    remoteMethod() {
+      get(this.http, '/online/getDBTableList/', {dbName: this.treeConfigAll.treeConfig.dbName}).then((data) => {
+        this.treeConfigAll.dicData.joinTableDicData = data
+      })
+    },
+    async initTable() {
+      let config = this.treeConfigAll
+      this.treeConfigAll.treeConfig.table = this.data
+      if (!this.treeConfigAll.tableColumn) {
+        this.treeConfigAll.tableColumn = []
+      }
+      await this.sqlParseTable(config.treeConfig.deleteWhere)
+      this.treeConfigAll.treeConfig.mainTable = this.treeConfigAll.treeConfig.table[0].joinTable
+      this.initColumnList()
+    },
+    sqlParseTable(val) {
+      let form = this.treeConfigAll.treeConfig
+      let executeSql = form.executeSql.toLowerCase();
+      if (executeSql.indexOf("from") == -1) {
+        return;
+      }
+      let sql = executeSql.split("from")
+      let tables = sql[1].trim().split(" ")
+      let tableData = this.parseTable(tables)
+      console.log('tableData', tableData)
+      let promise = []
+      for (let i = 0; i < tableData.length; i++) {
+        promise.push(get(this.http, '/online/getDBTableColumnList/' + 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 (this.treeConfigAll.tableColumn.length != 0) {
+              for (let col of this.treeConfigAll.tableColumn) {
+                if (cloumn.column_name == col.tableField
+                    && cloumn.table_name == tableData[i].joinTable) {
+                  checked = '1'
+                  visible = col.visible
+                }
+              }
+            } else {
+              checked = '1'
+              visible = '1'
+            }
+            cloumn.checked = checked
+            cloumn.visible = visible
+          }
+          tableData[i]['columnList'] = cloumns
+        }
+        if (val) {
+          tableData[0].deleteWhere = val.wheres
+        }
+        form.table = tableData
+        if (!this.treeConfigAll.tableColumn) {
+          this.treeConfigAll.tableColumn = form.table[0].columnList
+        }
+        this.treeConfigAll.treeConfig = form
+      })
+    },
+    parseTable(tables) {
+      let tableData = this.data
+      this.treeConfigAll.treeConfig.table[0].joinTable = tables[0].replace(/[\n\t\s]+/g, '')
+      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.replace(/[\n\t\s]+/g, ''),
+            joinFiled: joinFiled
+          })
+        }
+      }
+      return tableData
+    },
+    syncFormConfig() {
+      if (this.treeConfigAll.treeConfig.treeOper.includes('add')) {
+        this.syncFormConfigInit('add')
+      }
+      if (this.treeConfigAll.treeConfig.treeOper.includes('edit')) {
+        this.syncFormConfigInit('edit')
+      }
+    },
+    syncFormConfigInit(formType) {
+      console.log(this.treeConfigAll)
+      if (!this.treeConfigAll.mainTableColumnList || this.treeConfigAll.mainTableColumnList.length == 0) {
+        this.treeConfigAll.mainTableColumnList = this.treeConfigAll.treeConfig.table[0].columnList
+      }
+      let type = formType + 'Display'
+      let rows = []
+      for (const column of this.treeConfigAll.mainTableColumnList) {
+        let row = {
+          prop: column.column_name,
+          field: column.column_name,
+          title: column.column_comment,
+          label: column.column_comment,
+          selectDom: 1,
+          [type]: '1'
+        }
+        rows.push(row)
+      }
+      this.$nextTick(() => {
+        this.$refs.config.$refs[formType + 'FormConfig'].setShow()
+        this.$refs.config.$refs[formType + 'FormConfig'].setAll({list: rows, isAll: true})
+        this.setFormList()
+      })
+    },
+  },
+  created() {
+  }
+}
+</script>
+
+<style lang="less" scoped>
+:deep(.tree-add-or-edit) {
+  > header:first-of-type {
+    display: none !important;;
+  }
+
+  > .el-dialog__body:first-of-type {
+    padding: 0 !important;
+  }
+}
+</style>

package/vue.config.js

@@ -0,0 +1,44 @@
+const {defineConfig} = require('@vue/cli-service')
+
+module.exports = defineConfig({
+    publicPath: "./",
+    transpileDependencies: true,
+    lintOnSave: false,
+    runtimeCompiler: false,  //是否使用包含运行时编译器的Vue构建版本
+    // 生产环境不生成 SourceMap
+    productionSourceMap: false,
+    configureWebpack: (config) => {
+        const isProduction = process.env.NODE_ENV === 'production';
+        const externals = isProduction ? {
+            // 排除 Vue 依赖，避免重复打包
+            'element-plus': 'element-plus',
+            'exceljs': 'exceljs',
+            'axios': 'axios',
+            'vxe-table': 'vxe-table',
+            '@smallwei/avue': '@smallwei/avue',
+            'pinia': 'pinia',
+            'vue': 'vue',
+            'qs': 'qs',
+            'olp-render': 'olp-render',
+        } : {};
+
+        config.externals = externals;
+
+        if (isProduction) {
+            // 移除注释
+            config.optimization.minimizer[0].options.extractComments = false;
+            // 使用哈希文件名以实现缓存控制
+            config.output.filename = 'js/[name].[contenthash:8].js';
+            config.output.chunkFilename = 'js/[name].[contenthash:8].js';
+            // 配置库的输出
+            config.output.library = 'olp-table';
+            config.output.libraryTarget = 'umd';
+            config.output.umdNamedDefine = true;
+        }
+
+        // 开发服务器配置
+        config.devServer = {
+            client: { overlay: false }
+        };
+    },
+})