olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,201 @@
+<template>
+  <div>
+    <el-dialog
+        class="online-development-table-add-or-edit"
+        v-model="dialogVisible"
+        fullscreen
+        :show-close="false"
+        :showHeader="false"
+        :close-on-press-escape="false"
+        :close-on-click-modal="false"
+        :before-close="handleClose">
+      <div class="left">
+        <el-form :model="addOrEditRootData.form" label-width="80px">
+          <el-form-item label="配置名称" prop="configName" :span="24">
+            <el-input v-model="addOrEditRootData.form.configName"></el-input>
+          </el-form-item>
+          <el-form-item label="主题模板" prop="theme" :span="24">
+            <ol-dict-tag code="theme_model" v-model="addOrEditRootData.form.theme"></ol-dict-tag>
+          </el-form-item>
+          <el-form-item label="数据源" prop="theme" :span="24">
+            <ol-dict-tag code="db_name" v-model="addOrEditRootData.form.dbName"></ol-dict-tag>
+            <!--            <olDictTag code="online,system_data_source,database_chinese,db_name" v-model="addOrEditRootData.form.dbName"></olDictTag>-->
+          </el-form-item>
+          <el-form-item label="树uuid" prop="treeUuid" :span="24" v-if="addOrEditRootData.form.theme==7">
+            <ol-dict-tag v-model="addOrEditRootData.form.treeUuid" code="online,tree_config,config_name,uuid"
+                         :clearable="false"
+                         :whereAnd="whereAnd" style="margin-bottom: 20px"/>
+          </el-form-item>
+          <el-form-item label="搜索占行"
+                        v-if="addOrEditRootData.form.theme == 3|| addOrEditRootData.form.theme == 5 || addOrEditRootData.form.theme == 6"
+                        prop="searchRow" :span="24">
+            <ol-dict-tag code="pubilc_yes_no" v-model="addOrEditRootData.form.searchRow"
+                         :clearable="false"></ol-dict-tag>
+          </el-form-item>
+        </el-form>
+      </div>
+
+      <div class="right">
+        <div style="width: 100%;line-height: 50px;border-bottom: 1px solid #d1d1d1">
+          <vxe-button status="primary" @click="save(false)">{{
+              addOrEditRootData.disabled ? '保存' : '更新'
+            }}
+          </vxe-button>
+          <vxe-button status="primary" @click="save(true)">{{
+              addOrEditRootData.disabled ? '保存并关闭' : '更新并关闭'
+            }}
+          </vxe-button>
+          <vxe-button @click="handleClose(true)">取消</vxe-button>
+        </div>
+        <div style="width: 100%;height: calc(100% - 71px);padding: 10px">
+          <theme-model @initConfig="initConfig" ref="theme" v-bind="addOrEditRootData.form"
+                       @emits="emits"></theme-model>
+          <ol-component ref="vComponent" @emits="emits" v-if="configShow"/>
+        </div>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+<script>
+import ThemeModel from "@/views/table/add-or-edit/themeModel/index.vue";
+import {get, post, put} from "@/utils/http/httpUtils";
+import object from "@/utils/object";
+import OlComponent from "@/components/v-component/index.vue";
+
+export default {
+  name: 'add-or-edit',
+  components: {OlComponent, ThemeModel},
+  inject: ['http'],
+  provide() {
+    return {
+      addOrEditRootData: this.addOrEditRootData
+    }
+  },
+  data() {
+    return {
+      configShow: false,
+      dialogVisible: false,
+      whereAnd: [{
+        key: 'deleted',
+        value: 0
+      }],
+      addOrEditRootData: {
+        form: {
+          configName: "",
+          theme: undefined,
+          dbName: '',
+          searchRow: '0',
+          treeUuid: '',
+        },
+        key: new Date().getTime(),
+        showEditConfig: true,
+        disabled: true,
+      },
+    }
+  }, methods: {
+    handleClose(f) {
+      this.dialogVisible = false;
+      if (f == true) {
+        this.$emit("emits", {m: 'query'});
+      }
+    },
+    init(o) {
+      let form = {
+        configName: "",
+        theme: '1',
+        dbName: '',
+        searchRow: '0',
+        uuid: undefined,
+        treeUuid: ''
+      }
+      this.dialogVisible = true;
+      this.addOrEditRootData.disabled = o == undefined ? true : false;
+      if (o != undefined) {
+        let uuid = o.uuid ? o.uuid : o.UUID
+        console.log(o,uuid)
+        this.$nextTick(() => {
+          get(this.http, "online/tableMain/getOne", {uuid: uuid, deleted: 0}, undefined, true).then((data) => {
+            for (let key of Object.keys(form)) {
+              form[key] = data[key];
+            }
+            this.addOrEditRootData.form = form;
+          })
+        })
+      } else {
+        this.addOrEditRootData.form = form;
+      }
+    },
+    message(f, res) {
+      if (this.addOrEditRootData.disabled) {
+        this.addOrEditRootData.form = res.data;
+        this.addOrEditRootData.disabled = false;
+      }
+      if (f) {
+        this.handleClose(f);
+      }
+    },
+    save(f) {
+      let form = object.clone(this.addOrEditRootData.form);
+      form.parendId = form.id;
+      if (this.addOrEditRootData.disabled) {
+        post(this.http, "/online/tableMain/save", form, undefined, false).then(res => {
+          this.message(f, res);
+        })
+      } else {
+        delete form.version;
+        put(this.http, "/online/tableMain/edit", form, undefined, false).then(res => {
+          this.message(f, res);
+        })
+      }
+
+    },
+    initConfig(v) {
+      this.configShow = true;
+      this.$nextTick(() => {
+        this.$refs.vComponent.setComponent('views/table/add-or-edit/config/index.vue', 'init', {
+          o: v,
+          v: this.addOrEditRootData.form
+        })
+      })
+    },
+    emits({m, v}) {
+      if (m == "configClose") {
+        if (v) {
+          this.$refs.theme.refresh(v);
+        }
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+
+:deep(.online-development-table-add-or-edit) {
+  > header:first-of-type {
+    display: none !important;;
+  }
+
+  > .el-dialog__body:first-of-type {
+    height: 100% !important;
+    padding: 0 !important;
+  }
+}
+
+.online-development-table-add-or-edit {
+  .left {
+    width: 230px !important;
+    height: 100% !important;
+    position: relative !important;
+    float: left !important;
+    border-right: 1px solid #d1d1d1 !important;
+  }
+
+  .right {
+    width: calc(100% - 251px) !important;
+    height: 100% !important;
+    position: relative !important;
+    float: left !important;
+  }
+}
+
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <Model :temp="true" v-bind="$attrs" v-if="$attrs.theme ==1" theme="t1"  ref="theme"></Model>
+    <top-bottom :temp="true" v-bind="$attrs"
+                v-else-if="$attrs.theme ==2"
+                ref="theme"></top-bottom>
+    <left-right :temp="true" v-bind="$attrs"
+                v-else-if="$attrs.theme ==3" ref="theme"></left-right>
+    <Top1Bottom2 :temp="true" v-bind="$attrs"
+                 v-else-if="$attrs.theme ==4"
+                 ref="theme"></Top1Bottom2>
+    <Top2Bottom1 :temp="true" v-bind="$attrs"
+                 v-else-if="$attrs.theme ==5" ref="theme"></Top2Bottom1>
+    <Top2Bottom2 :temp="true" v-bind="$attrs"
+                 v-else-if="$attrs.theme ==6" ref="theme"></Top2Bottom2>
+    <left-tree-right-table v-bind="$attrs" v-else-if="$attrs.theme ==7"
+                           ref="theme"></left-tree-right-table>
+  </div>
+</template>
+<script>
+
+import Model from "@/views/table/add-or-edit/themeModel/init-model-table.vue";
+import TopBottom from "@/views/table/add-or-edit/themeModel/top-bottom";
+import Top1Bottom2 from "@/views/table/add-or-edit/themeModel/top-1-bottom-2";
+import Top2Bottom1 from "@/views/table/add-or-edit/themeModel/top-2-bottom-1";
+import Top2Bottom2 from "@/views/table/add-or-edit/themeModel/top-2-bottom-2";
+import leftRight from "@/views/table/add-or-edit/themeModel/left-right";
+import LeftTreeRightTable from "@/views/table/add-or-edit/themeModel/left-tree-right-table.vue";
+
+export default {
+  name: 'themeModel',
+  components: {Model, TopBottom, Top1Bottom2, Top2Bottom1, Top2Bottom2, leftRight, LeftTreeRightTable},
+  data() {
+    return {
+      table: {},
+    }
+  },
+  provide() {
+    return {
+      tableAll: this.table      //传入一个响应式对象
+    }
+  },
+  methods: {
+    refresh(v) {
+      this.$refs.theme.init(v);
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/views/table/add-or-edit/themeModel/init-model-table.vue

@@ -0,0 +1,48 @@
+<template>
+  <div style=" position: relative;height: 100%;width: 100%">
+    <init-model :temp="temp" :table-name="theme" @initConfig="$emit('initConfig',theme)"></init-model>
+    <olTable v-bind="$attrs" ref="olTable" v-if="!temp" :uuid="uuid" :theme="theme"/>
+  </div>
+</template>
+
+<script>
+
+import InitModel from "./init-model"
+import {get} from "@/utils/http/httpUtils";
+
+export default {
+  components: {InitModel},
+  name: "initModelTable",
+  inject: ['tableAll','http'],
+  props: {
+    uuid: {},
+    theme: {default: 't1'}
+  },
+  data() {
+    return {
+      temp: true
+    }
+  },
+  methods: {
+    init() {
+      this.temp = true;
+      if (!this.uuid) {
+        return
+      }
+      get(this.http,'/online/tableConfig/count', {uuid: this.uuid, theme: this.theme}).then(data => {
+        this.temp = data == 0;
+      })
+    }
+  },
+  watch: {
+    'uuid'() {
+      this.init();
+    }
+  },
+  created() {
+    this.init();
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/views/table/add-or-edit/themeModel/init-model.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="main" v-if="temp">
+    <div class="tableName">{{ tableName }}</div>
+    <div class="back">
+      <div v-if="this.addOrEditRootData.disabled"  class="disabled">
+        第一次请保存后再进行配置
+      </div>
+      <div v-else @click="$emit('initConfig')">
+        开始配置
+      </div>
+    </div>
+  </div>
+  <div class="editConfig" @click="$emit('initConfig')" v-else>编辑配置 - {{ tableName }}</div>
+</template>
+
+<script>
+
+export default {
+  name:'initModel',
+  props: {
+    tableName: {type: String, default: 't1', required: true},
+    temp: {default:false}
+  },
+  inject: ['addOrEditRootData'],
+}
+</script>
+<style lang="less" scoped>
+
+.editConfig {
+  z-index: 100;
+  position: absolute;
+  left: 40%;
+  top: 40%;
+  color: #fff;
+  background-color: #00c260;
+  padding: 40px 80px;
+  border-radius: 10px;
+  font-size: 28px;
+  user-select: none;
+  cursor: pointer;
+}
+.main {
+  height: 100%;
+  min-width: 400px;
+  min-height: 200px;
+
+  .tableName {
+    text-align: left;
+    left: 10px;
+    top: 10px;
+    position: relative;
+    height: 0;
+  }
+
+  .disabled {
+    background-color: aliceblue !important;
+    cursor: no-drop !important;
+  }
+
+  .back {
+    background-color: #cecbcb;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    div {
+      background-color: #00c260;
+      padding: 40px 80px;
+      border-radius: 10px;
+      font-size: 28px;
+      border: 1px solid #fff;
+      user-select: none;
+      cursor: pointer;
+    }
+
+  }
+
+}
+
+</style>

package/src/views/table/add-or-edit/themeModel/left-right.vue

@@ -0,0 +1,24 @@
+<template>
+  <splitpanes-theme-model ref="splitpanesModel"
+                          :horizontal="false" v-bind="$attrs"/>
+</template>
+
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+import SplitpanesThemeModel from "@/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue";
+
+export default {
+  name: 'leftRight',
+  components: {SplitpanesThemeModel},
+  mixins: [olTableSearchModelMixins]
+}
+</script>
+<style scoped>
+.top-bottom {
+  height: 100%;
+}
+
+.olTable {
+  height: calc(100% - 10px);
+}
+</style>

package/src/views/table/add-or-edit/themeModel/left-tree-right-table.vue

@@ -0,0 +1,75 @@
+<template>
+  <div style="height: 100%">
+    <el-card class="tree-left">
+      <ol-tree v-if="show" :uuid="uuid"></ol-tree>
+    </el-card>
+    <div class="table-right">
+      <initModelTable ref="t1" v-bind="$attrs" theme="t1"/>
+    </div>
+  </div>
+</template>
+<script scope>
+import OlTree from "@/components/tree/index.vue";
+import initModelTable from "@/views/table/add-or-edit/themeModel/init-model-table.vue";
+
+export default {
+  name: 'leftTreeRightTable',
+  components: {OlTree, initModelTable},
+  props: {
+    treeUuid: {}
+  },
+  data() {
+    return {
+      uuid: '',
+      show: false
+    }
+  },
+  watch: {
+    treeUuid: function () {
+      this.change()
+    }
+  },
+  methods: {
+    init(v) {
+      if (this.$refs[v]) {
+        this.$refs[v].init()
+      }
+    },
+    change() {
+      this.uuid = this.treeUuid;
+      this.show = false;
+      this.$nextTick(() => {
+        this.show = true;
+      })
+    }
+  },
+  computed: {
+    getStyle() {
+      let px = Math.ceil(this.formConfig.items.length / 4) * 45;
+      let style = 'height: calc(100% - ' + px + 'px)'
+      return style
+    }
+  }, created() {
+    this.$nextTick(() => {
+      this.change();
+    })
+  }
+}
+</script>
+<style lang="less" scoped>
+.table-right {
+  position: relative;
+  height: 100%;
+}
+
+.tree-left {
+  height: 100%;
+  position: relative;
+  float: left;
+  margin-right: 10px;
+  z-index: 100;
+  /deep/ .el-card__body{
+    height: 100%;
+  }
+}
+</style>

package/src/views/table/add-or-edit/themeModel/olTableSearchModelMixins.js

@@ -0,0 +1,42 @@
+import initModelTable from "@/views/table/add-or-edit/themeModel/init-model-table.vue";
+import {Pane, Splitpanes} from "splitpanes";
+
+export const olTableSearchModelMixins = {
+
+    components: {initModelTable, Splitpanes, Pane}, data() {
+        return {
+            formConfig: undefined, customerForm: undefined, paneSize: {
+                minSize: 20, maxSize: 80
+            }
+        }
+    }, methods: {
+        init(v) {
+            if(this.$refs[v]){
+                this.$refs[v].init()
+            }else {
+                if(this.$refs.splitpanesModel && this.$refs.splitpanesModel.$refs[v]){
+                    this.$refs.splitpanesModel.$refs[v].init()
+                }else{
+                    this.$refs.splitpanesModel1.$refs[v].init()
+                }
+            }
+
+        }, initOk({theme, table, customerForm}) {
+            if (this.searchRow == '1' && theme == 't1') {
+                customerForm();//执行自定义表单，这个方法会隐藏table的表单，隐藏搜索按钮
+            }
+            if (theme == 't1') {
+                this.formConfig = table.formConfig;//给原有的自定义搜索
+                this.customerForm = customerForm
+            }
+        }, doCustomerForm() {
+            if(this.customerForm){
+                this.customerForm(this.searchRow == '1')
+            }
+        }
+    }, watch: {
+        searchRow: function () {
+            this.doCustomerForm();
+        }
+    }
+}

package/src/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue

@@ -0,0 +1,49 @@
+<template>
+  <ol-table-search v-if="formConfig && searchRow == '1'" :formConfig="formConfig"></ol-table-search>
+  <splitpanes :style="formConfig ? getStyle :''" class="default-theme" :horizontal="horizontal" @resize="doResize"
+              :push-other-panes="false">
+    <pane style="background: transparent" :size="50" v-bind="paneSize">
+      <div :class="isLR ? 'left' :'top'">
+        <initModelTable :key="'theme1'" :ref="theme1" @initOk="initOk" v-bind="$attrs"
+                        :theme="theme1"/>
+      </div>
+    </pane>
+    <pane style="background: transparent" v-bind="paneSize">
+      <div :class="isLR ? 'right' :'bottom'">
+        <initModelTable :key="'theme2'" :ref="theme2" v-bind="$attrs" :theme="theme2"/>
+      </div>
+    </pane>
+  </splitpanes>
+</template>
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+
+export default {
+  name: 'splitpanesThemeModel',
+  inject: ['addOrEditRootData'],
+  mixins: [olTableSearchModelMixins], props: {
+    theme1: {default: 't1'},
+    theme2: {default: 't2'},
+    searchRow: {default: '0'},
+    horizontal: {default: true},
+    isLR: {default: true},
+    paneSize: {default: {minSize: 20, maxSize: 80}}
+  },
+  computed: {
+    getStyle() {
+      let px = Math.ceil(this.formConfig.items.length / 4) * 45;
+      let style = 'height: calc(100% - ' + px + 'px)'
+      return style
+    }
+  },
+  methods: {
+    doResize($event) {
+      console.log($event)
+    }
+  }
+
+}
+</script>
+<style scoped>
+@import "@/components/table/model/splitpanesModel.css";
+</style>

package/src/views/table/add-or-edit/themeModel/top-1-bottom-2.vue

@@ -0,0 +1,29 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="olTable">
+        <initModelTable @emits="$emit('emits','t1')" v-bind="$attrs" ref="t1" theme="t1"/>
+      </div>
+    </pane>
+    <pane style="background:transparent;" v-bind="paneSize">
+      <splitpanes-theme-model theme1="t2" theme2="t3" @emits="$emit('emits',$event)" ref="splitpanesModel"
+                              :horizontal="false" v-bind="$attrs"/>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+import SplitpanesThemeModel from "@/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue";
+
+export default {
+  name: 'top1Bottom2',
+  components: {SplitpanesThemeModel},
+  mixins:[olTableSearchModelMixins]
+}
+</script>
+<style scoped>
+.olTable {
+  height: calc(100% - 10px);
+}
+</style>

package/src/views/table/add-or-edit/themeModel/top-2-bottom-1.vue

@@ -0,0 +1,32 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="top">
+        <splitpanes-theme-model ref="splitpanesModel"
+                                :horizontal="false" v-bind="$attrs"/>
+      </div>
+    </pane>
+    <pane style="background:transparent;" v-bind="paneSize">
+      <initModelTable v-bind="$attrs" ref="t3" theme="t3"/>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+import SplitpanesThemeModel from "@/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue";
+
+export default {
+  name: 'top2Bottom1',
+  components: {SplitpanesThemeModel},
+  mixins: [olTableSearchModelMixins]
+}
+</script>
+<style scoped>
+.top {
+  height: 100%;
+  padding-bottom: 10px;
+}
+
+
+</style>

package/src/views/table/add-or-edit/themeModel/top-2-bottom-2.vue

@@ -0,0 +1,32 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="top">
+        <splitpanes-theme-model @emits="$emit('emits',$event)" ref="splitpanesModel"
+                                :horizontal="false" v-bind="$attrs"/>
+      </div>
+    </pane>
+    <pane style="background:transparent;" v-bind="paneSize">
+      <splitpanes-theme-model theme1="t3" theme2="t4" @emits="$emit('emits',$event)" ref="splitpanesModel1"
+                              :horizontal="false" v-bind="$attrs"/>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+import SplitpanesThemeModel from "@/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue";
+
+export default {
+  name: 'top2Bottom2',
+  components: {SplitpanesThemeModel},
+  mixins: [olTableSearchModelMixins]
+}
+</script>
+<style scoped>
+.top {
+  height: 100%;
+  padding-bottom: 10px;
+}
+
+</style>

package/src/views/table/add-or-edit/themeModel/top-bottom.vue

@@ -0,0 +1,14 @@
+<template>
+  <splitpanes-theme-model ref="splitpanesModel" v-bind="$attrs"/>
+</template>
+
+<script scope>
+import {olTableSearchModelMixins} from "@/views/table/add-or-edit/themeModel/olTableSearchModelMixins";
+import SplitpanesThemeModel from "@/views/table/add-or-edit/themeModel/splitpanesThemeModel.vue";
+
+export default {
+  name: 'topBottom',
+  components: {SplitpanesThemeModel},
+  mixins: [olTableSearchModelMixins]
+}
+</script>