olp-table 5.3.1 → 5.3.4

package/src/components/table/ol-table-operate/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <slot name="left"></slot>
+  <template v-if="$attrs.value !== undefined">
+    <vxe-button class="table-right-operation-but"
+                v-for="obj in $attrs.value" type="text" :status="obj['status']"
+                :loading="bindLoading(obj,props.row)"
+                :disabled="getCallBack('disabledCallBack',obj,props.row,false)"
+                v-show="getCallBack('showCallBack',obj,props.row,true)"
+                @click="$emit('handleOperationClick',{row:props.row,obj:obj,setLoading:setLoading})">
+      <i :class="obj['icon']"></i>{{ obj['name'] }}
+    </vxe-button>
+  </template>
+  <slot name="right"></slot>
+</template>
+<script>
+export default {
+  name: 'olTableOperate'
+}
+</script>
+<script scope setup>
+import {computed} from "@vue/runtime-core";
+import {reactive, defineProps} from "vue";
+
+const props = defineProps({
+  row: {
+    required: true,
+    type: Object
+  }
+})
+const getCallBack = (type, obj, row, reVal) => {
+  if (obj[type]) {
+    try {
+      const dynamicFunc = new Function('row', obj[type]);
+      const result = dynamicFunc(row); // 返回 true 或 undefined
+      if (result != undefined) {
+        return result;
+      }
+    } catch (e) {
+    }
+  }
+  return reVal;
+}
+const setLoading = (o, r, v) => {
+  loading[o.code + r._X_ROW_KEY] = v;
+}
+const loading = reactive({})
+const bindLoading = computed(() => (o, row) => {
+  if (o.loading == 1) {
+    if (loading[o.code + row._X_ROW_KEY] == undefined) {
+      loading[o.code + row._X_ROW_KEY] = false;
+    }
+  }
+  return loading[o.code + row._X_ROW_KEY];
+})
+
+</script>
+<style lang="less" scoped>
+.table-right-operation-but {
+  margin: 0;
+}
+</style>

package/src/components/table/ol-table-search/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <vxe-form v-bind="$attrs.formConfig">
+    <template v-for='item in $attrs.formConfig.items' v-slot:[item.slotsName]>
+      <olSelectDom :item="item" v-model="$attrs.formConfig.data[item.key]"/>
+    </template>
+  </vxe-form>
+</template>
+<script>
+export default {
+  name: 'olTableSearch',
+}
+</script>
+<style lang="less" scoped>
+.table-right-operation-but {
+  margin: 0;
+}
+</style>

package/src/components/table/ol-table-tool-btn/index.vue

@@ -0,0 +1,60 @@
+<template>
+  <div>
+    <slot name="left"></slot>
+    <template v-if="$attrs.value!== undefined">
+      <vxe-button
+          v-hasPermi="[currentPermi+obj.code]"
+          v-for="obj in $attrs.value"
+          :key="obj.code"
+          :status="obj['status']"
+          :disabled="obj['disabled']"
+          v-show="obj['show']"
+          :circle="obj.alignMode === 'right' &&!obj['status']"
+          :loading="loading[obj.code]"
+          @click="handleToolbarBtnClick(obj.code)"
+      >
+        <span v-if="obj.alignMode === 'right' &&!obj['status']" :title="obj.name">
+          <i :class="obj['icon']"></i>
+        </span>
+        <span v-else-if="obj.code === 'sortable'">
+          <i style="color:#1677FF" :class=" obj.values? 'vxe-icon-checkbox-checked' : 'vxe-icon-checkbox-unchecked'"></i>{{
+            obj['name']
+          }}
+        </span>
+        <span v-else>
+          <i :class="obj['icon']"></i>{{ obj['name'] }}
+        </span>
+      </vxe-button>
+    </template>
+    <slot name="right"></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'olTableToolBtn',
+  props: {
+    currentPermi: {
+      type: String,
+      default: '',
+      required: false
+    }
+  },
+  data() {
+    return {
+      loading: this.$attrs.loading
+    };
+  },
+  methods: {
+    handleToolbarBtnClick(code) {
+      this.$emit('toolbarBtnClick', code);
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.table-right-operation-but {
+  margin: 0;
+}
+</style>

package/src/components/tree/components/o-tree.vue

@@ -0,0 +1,289 @@
+<template>
+  <div :style="'width:'+(treeConfig.width+'px')">
+    <div class="search" v-if="treeConfig.search == 1">
+      <el-input placeholder="关键字搜索" v-model="filterText" clearable>
+      </el-input>
+    </div>
+    <div class="tree">
+      <div class="title" v-if="treeConfig.title || toolButOptions.length >0">
+        <b style="font-size: 16px" v-if="treeConfig.title">{{ treeConfig.title }}</b>
+        <span @click="handleOperationClick('add')" v-if="toolButOptions.map(o=>o.code).indexOf('add') != -1"
+              style="position: absolute;right: 5px;font-size: 18px;line-height: 20px;cursor: pointer;">
+                    <el-tooltip class="item" effect="dark" content="新增" placement="top">
+                      <i class="vxe-icon-add" style="margin-right:5px;"></i>
+                    </el-tooltip>
+                    </span>
+      </div>
+      <el-scrollbar style="height: calc(100% - 70px)" v-loading="loading" element-loading-text="正在加载数据中...">
+        <el-tree ref="treeBox"
+                 :lazy="treeConfig.lazy == 1"
+                 :data="data"
+                 :load="load"
+                 :show-border="false"
+                 :expand-on-click-node="treeConfig['expand-on-click-node']"
+                 :default-expand-all="treeConfig.lazy == 0 && treeConfig.firstExpandAll == 1"
+                 :props="props"
+                 v-bind="$attrs"
+                 @nodeClick="nodeClick"
+                 :show-checkbox="treeConfig.showCheckbox == 1"
+                 :highlight-current="true"
+                 :filter-node-method="filterNode">
+          <template #default="{ node, data }">
+        <span class="custom-tree-node">
+          <span>{{ node.label }}</span>
+          <span style="position: absolute;right: 5px">
+            <olTableOperate :row="data" :value="toolButOptions"
+                            @handleOperationClick="handleOperationClick($event)"></olTableOperate>
+          </span>
+        </span>
+          </template>
+        </el-tree>
+      </el-scrollbar>
+    </div>
+    <olForm ref="form" @query="doQuery"></olForm>
+  </div>
+</template>
+
+<script>
+
+import olTableOperate from "@/components/table/ol-table-operate/index.vue";
+import {handleTree} from "@/utils/tree";
+import {useMessage} from "@/utils/message";
+import {fillTemplate} from "@/utils/object";
+import olForm from "@/components/table/ol-form/index.vue";
+import {post} from "@/utils/http/httpUtils";
+
+const {error} = useMessage() // 消息弹窗
+export default {
+  name: "oTree",
+  components: {olForm, olTableOperate},
+  props: {
+    treeConfig: {},
+    toolButOptions: {},
+    formMainList: {}
+  },
+  inject: ['tableAll', 'http'],
+  computed: {
+    props() {
+      return {
+        key: this.treeConfig.value,
+        label: this.treeConfig.label,
+        children: this.treeConfig.children
+      }
+    }
+  },
+  data() {
+    return {
+      data: [],
+      search: '关键字搜索',
+      filterText: "",
+      loading: false,
+      value: '',
+    }
+  },
+  methods: {
+    nodeClick(params) {
+      if (this.treeConfig.optionJson.eventsValue && this.treeConfig.optionJson.eventsValue['node-click']) {
+        eval(this.treeConfig.optionJson.eventsValue['node-click']);
+      } else if (this.treeConfig.tableQueryParams) {
+        this.doRightTable(params)
+      }
+    },
+    doGetParams(param, v, getParams) {
+      let kv = param.split(":");
+      if (kv.length == 1) {
+        getParams[kv[0]] = v[kv[0]]
+      } else {
+        if (param.indexOf("$") != -1) {
+          getParams[kv[0]] = fillTemplate(kv[1], v)
+        } else {
+          getParams[kv[0]] = v[kv[1]]
+        }
+
+      }
+    },
+    doRightTable(v) {
+      let getParams = {};
+      let paramsStr = this.treeConfig.tableQueryParams.trim();
+      if (paramsStr.indexOf(",") != -1) {
+        let params = paramsStr.split(",");
+        for (let param of params) {
+          this.doGetParams(param, v, getParams);
+        }
+      } else {
+        this.doGetParams(paramsStr, v, getParams);
+      }
+      this.tableAll.t1.queryParams(getParams, true);
+    },
+    async handleOperationClick(e) {
+      let {obj, row} = e;
+      if (obj.customFunction) {
+        eval(obj.customFunction);
+      } else if (obj.code == "delete") {
+        await this.remove(e);
+      } else if (obj.code == 'edit' || obj.code == 'add') {
+        let form = {}
+        if (obj.code == 'edit') {
+          form = this.formMainList.edit
+        } else if (obj.code == 'add') {
+          form = this.formMainList.add
+        }
+        let data = {
+          type: form.formMain.designer,
+          saveUrl: form.formMain.saveUrl,
+          formData: row,
+          theme: this.theme,
+          tableConfigId: this.tableConfigId
+        }
+        data.form = JSON.parse(form.formJson[data.type == 0 ? 'optionJson' : 'customJson'])
+        if (obj.code == 'edit') {
+          data.updateKey = form.formMain.updateKey
+          this.$refs["form"].init(data, true)
+        }
+        if (obj.code == 'add') {
+          data.formData = {}
+          this.$refs["form"].init(data)
+        }
+      }
+      this.$emit("handleOperationClick", e)
+    },
+    /**
+     * 内置删除方法
+     * @param o
+     * @returns {Promise<void>}
+     */
+    async remove(o) {
+      let {row} = o;
+      const type = await this.confirm('数据删除后不可恢复，您确定要删除吗？', '删除提示', 'error')
+      if (type != "cancel") {
+        /*let params = this.deleteParameter;
+        for (let key of Object.keys(this.deleteParameter)) {
+          if (key != '$parentId') {
+            params[key] = row[key];
+          }
+        }
+        await post(this.http, '/crud/delete', params).then(r => {
+          if (r != false) {
+            this.query()
+          }
+        })*/
+      }
+    },
+    load(node, resolve) {
+      if (node.level === 0) {
+        return;
+      } else {
+        this.value = node.data[this.treeConfig.value]
+      }
+      post(this.http, '/online/crud/query', this.getParams()).then(({
+                                                                      data,
+                                                                      code,
+                                                                      msg
+                                                                    }) => {
+        if (code != 200) {
+          error(msg);
+          return;
+        }
+        resolve(data.listData)
+      })
+    },
+    getParams(params) {
+      if (!params) {
+        params = {
+          id: this.treeConfig.uuid,
+          queryType: 1,
+          enablePage: false
+        }
+      }
+      if (this.value) {
+        let lazyValue = this.value.trim();
+        if (lazyValue.indexOf("=") != -1) {
+          params.executeWhere = lazyValue;
+        } else {
+          params.executeWhere = this.treeConfig.treeParentId.trim() + "='" + lazyValue + "'";
+        }
+      }
+      return params;
+    },
+    doQuery(params) {
+      this.loading = true;
+      post(this.http, '/online/crud/query', this.getParams(params), false, false).then(({
+                                                                                          data,
+                                                                                          code,
+                                                                                          msg
+                                                                                        }) => {
+        if (code != 200) {
+          error(msg);
+          return;
+        }
+        if (this.treeConfig.convertTree == 1) {
+          this.data = handleTree(data.listData, this.treeConfig.treeId, this.treeConfig.treeParentId)
+        } else {
+          this.data = data.listData;
+        }
+      }).finally(() => {
+        this.loading = false;
+      });
+    },
+    filterNode(value, data) {
+      if (!this.treeShow) {
+        this.treeShow = value;
+      }
+      if (!value) return true;
+      return data[this.treeConfig.label].indexOf(value) !== -1;
+    }
+  },
+  watch: {
+    filterText(val) {
+      this.$refs.treeBox.filter(val);
+    }
+  }, created() {
+    this.$nextTick(() => {
+      if (this.treeConfig.autoInit == 1) {
+        if (this.treeConfig.lazy == 1 && this.treeConfig.firstLazyValue != '' && this.treeConfig.firstLazyValue != undefined) {
+          this.value = this.treeConfig.firstLazyValue.toString().trim();
+        }
+        this.doQuery();
+      }
+      this.$emit("initOk")
+    })
+  },
+
+}
+
+</script>
+
+<style>
+
+</style>
+<style lang="scss" scoped>
+.search {
+  height: 38px;
+
+  div:first-child {
+    width: 100%
+  }
+}
+
+.tree {
+  position: relative;
+  background-color: white;
+  height: 100%;
+
+  .title {
+    height: 20px;
+    padding: 6px;
+    border-bottom: 1px solid #dcdfe685;
+    position: relative;
+
+    b {
+      position: relative;
+      font-size: 14px
+    }
+
+    div {
+      font-size: 8px;
+    }
+  }
+}
+</style>

package/src/components/tree/index.vue

@@ -0,0 +1,46 @@
+<template>
+  <o-tree ref="oTree" style="height: 100%" v-if="treeConfig.uuid" v-bind="$attrs" :treeConfig="treeConfig"
+          :toolButOptions="toolButOptions" :formMainList="formMainList"></o-tree>
+</template>
+
+<script>
+import OTree from "@/components/tree/components/o-tree.vue";
+import {get} from "@/utils/http/httpUtils";
+
+export default {
+  name: "olTree",
+  components: {OTree},
+  inject:['http'],
+  props: {
+    uuid: {}
+  },
+  data() {
+    return {
+      treeConfig: {},
+      toolButOptions: [],
+      formMainList: {}
+    }
+  },
+  methods: {
+    init() {
+      get(this.http,'/online/treeConfig/getJson', {uuid: this.uuid}).then(({treeConfig, toolButOptions,formMainList}) => {
+        treeConfig.optionJson = JSON.parse(treeConfig.optionJson);
+        if (treeConfig.optionJson.optionValue) {
+          for (let key of Object.keys(treeConfig.optionJson.optionValue)) {
+            treeConfig[key] = treeConfig.optionJson.optionValue[key];
+          }
+        }
+        this.treeConfig = treeConfig;
+        this.toolButOptions = toolButOptions;
+        this.formMainList = formMainList
+      })
+    }
+  }, created() {
+    if (this.uuid) {
+      this.init();
+    }
+  }
+
+}
+
+</script>

package/src/components/v-component/index.vue

@@ -0,0 +1,43 @@
+<template>
+    <component v-bind="$attrs" ref="components" v-if="show && customUrl != undefined" :is="customUrl"/>
+</template>
+<script>
+import {useMessage} from "@/utils/message";
+
+const msg = useMessage() // 消息弹窗
+
+export default {
+  name: 'olComponent',
+  data() {
+    return {
+      customUrl: undefined,
+      show: false,
+    }
+  },
+  methods: {
+    setComponent(url, method, props) {
+      this.show = false;
+      try {
+        this.customUrl = require(`@/${url}`).default
+        this.$nextTick(() => {
+          this.show = true;
+          if (method) {
+            this.$nextTick(async () => {
+              this.$refs.components[method](props);
+            })
+          }
+        })
+      } catch (e) {
+        msg.error("找不到路径：" + `@/${url}`)
+      }
+    },
+    handleClose() {
+      this.show = false;
+      this.customUrl = undefined;
+      this.$emit('close')
+    }
+  },
+  created() {
+  }
+}
+</script>

package/src/config/dev-config.js

@@ -0,0 +1,5 @@
+
+module.exports = {
+  //服务地址
+  SERVER_ADDR: "http://172.18.10.13:8888"
+}

package/src/config/prod-config.js

@@ -0,0 +1,5 @@
+module.exports = {
+  //服务地址
+  SERVER_ADDR: "http://121.37.0.247:8889"
+  //SERVER_ADDR: "http://172.18.10.13:8888"
+}

package/src/config/shared-config.js

@@ -0,0 +1,20 @@
+const dev = require("./dev-config")
+const prod = require("./prod-config")
+
+module.exports = {
+  //系统名称
+  VUE_APP_TITLE: "后台基础框架管理系统",
+  // 部署时的URL
+  PUBLIC_PATH: "/",
+  // 打包出入目录
+  OUT_PUT_DIR: "online-web",
+  //后台服务名称
+  VUE_APP_BASE_API: "online-server",
+  //后台服务地址
+  SERVER_ADDR: process.env.NODE_ENV == "development" ? dev.SERVER_ADDR : prod.SERVER_ADDR,
+  //token头部信息
+  TOKEN_AUTHENTICATION:"Authorization",
+  //设置请求超时时间，单位毫秒
+  REQUEST_TIME_OUT: 1000 * 60
+
+}