olp-table 5.3.1 → 5.3.4

package/src/components/ol-table-select.vue

@@ -0,0 +1,150 @@
+<!-- 表格选取组件 -->
+<!--使用示例如下：
+@olTableSelectChange 选中数据后的回调方法
+:config 配置下拉选择框的配置信息key和label对应的字段名字
+注意：弹出的table是表格构建的配置出的表格，需要再该表格构建配置页面增加选中和关闭按钮的事件，否则无法正常使用
+按钮名称  |        方法名         | 触发事件
+选中      getSelectRowChange    this.$emit('getSelectRowChangeButClick',this.getSelectRows())
+关闭      getSelectRowClose     this.$emit('getSelectRowCloseButClick','')
+以下是例子：
+测试下拉框：
+<ol-table-select @olTableSelectChange="olTableSelectChange" :http="http" :uuid="'1900437634399076352'"
+                 :config="{
+                                key:'code', //选择的key字段名称
+                                label:'name', //显示的字段，默认是name
+                                labelIsAppendCode:true,//标签是否追加编码如：[1]男
+                              }"></ol-table-select>
+其他属性配置例子：
+{
+  "olTableSelect":{
+    "uuid":"1901841070608990208",
+    "key":"id",
+    "label":"name",
+    "labelIsAppendCode":true,
+    "otherResult":"name:name,age:age,sex:sex"
+  }
+}
+-->
+<template>
+  <el-select v-model="selectValue.value" placeholder="请选择" @click="openTable"
+             @change="updateValue" @clear="clearedSelectValue"
+             clearable>
+    <el-option
+        v-for="item in selectDataList"
+        :key="item.value"
+        :label="item.label"
+        :value="item.value">
+    </el-option>
+  </el-select>
+
+  <ol-dialog-table ref="table" @emits="getSelectRowChangeButClick"/>
+
+<!--  <el-dialog :close-on-click-modal="false"-->
+<!--             :key="dialogKey"-->
+<!--             top="5vh"-->
+<!--             v-model="dialogVisible"-->
+<!--             title="选择数据"-->
+<!--             width="80%"-->
+<!--             append-to-body>-->
+<!--    <div style="height: 80vh; overflow-y: auto;">-->
+<!--      <model-index ref="modelIndex" :http="http" :uuid="uuid" style="height: calc(100% - 50px)"/>-->
+<!--      <el-row style="height: 50px" justify="center">-->
+<!--        <el-button type="primary" @click="getSelectRowChangeButClick">确定</el-button>-->
+<!--        <el-button @click="getSelectRowCloseButClick">关闭</el-button>-->
+<!--      </el-row>-->
+<!--    </div>-->
+<!--  </el-dialog>-->
+</template>
+
+<script>
+
+import ModelIndex from "@/components/table/model/model-index.vue";
+import OlDialogTable from "@/components/ol-dialog-table.vue";
+
+export default {
+  name: 'olTableSelect',
+  components: {
+    OlDialogTable,
+    ModelIndex,
+  },
+  props: {
+    defaultValue: {required: false,default: ''},
+    slotName: {required: false},
+    uuid: {required: true},
+    http: {},
+    config: {},
+  },
+  provide() {
+    return {
+      tableAll: this.table,
+      http: this.http
+    }
+  },
+  data() {
+    return {
+      selectDataList: [],
+      dialogVisible: false,
+      selectValue: {
+        value: this.defaultValue,
+        label: '',
+        data: [],
+      },
+      dialogKey: 1
+    }
+  },
+  methods: {
+    //打开表格选择组件
+    openTable() {
+      this.dialogKey++;//每次打开对话框时，key值加1,防止对话框重复渲染
+      this.dialogVisible = true;//打开对话框
+      this.$refs.table.init({uuid: this.uuid,title: '选择数据'})
+    },
+    //选中数据按钮回调
+    getSelectRowChangeButClick({v}) {
+      // let rows = this.$refs.modelIndex.$refs.tableModel.getSelectRows()
+      let rows = v
+      if (rows.length === 0) {
+        this.clearedSelectValue()//清空下拉框的值
+        this.dialogVisible = false;//关闭对话框
+        return;
+      }
+      for (const [index, row] of rows.entries()) {
+        //给下拉框选项添加
+        let label = this.config.labelIsAppendCode ? `[${row[this.config.key]}]${row[this.config.label]}` : row[this.config.label]
+        this.selectDataList.push({
+          label: label,
+          value: row[this.config.key],
+        });
+      }
+      //选中第一行数据,目前暂时支持单选
+      this.selectValue = {
+        value: rows[0][this.config.key],
+        label: rows[0][this.config.label],
+        data: rows[0]
+      }
+      this.updateValue()//更新下拉框的值
+      this.dialogVisible = false;//关闭对话框
+      this.$refs.table.cancelEvent()
+    },
+    //关闭选择数据按钮回调
+    getSelectRowCloseButClick() {
+      this.dialogVisible = false;
+    },
+    //更新父组件的值
+    updateValue() {
+      this.$emit('olTableSelectChange', this.slotName, this.selectValue);
+    },
+    clearedSelectValue() {
+      this.selectValue = {value: '', label: '', data: []};
+      this.updateValue();//更新下拉框的值
+      this.$refs.table.cancelEvent()
+    },
+  },
+  created() {
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/pinia-init.vue

@@ -0,0 +1,18 @@
+<script>
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+
+export default {
+  name: 'pinaInit',
+  props: {
+    http: {}
+  }, methods: {
+    async init() {
+      await storeDict().init(this.props.http);
+      await storeDictType().init(this.props.http);
+    }
+  }, mounted() {
+    this.init()
+  }
+}
+</script>

package/src/components/table/model/ModelMixins.js

@@ -0,0 +1,43 @@
+import {Pane, Splitpanes} from "splitpanes";
+import 'splitpanes/dist/splitpanes.css'
+import {nextTick} from "vue";
+
+export const modelMixins = {
+    components: {Splitpanes, Pane},
+    emits: ['initOk'],
+    props: {
+        paneSize: {
+            minSize: 20, maxSize: 80
+        }
+    },
+    data() {
+        return {
+            formConfig: undefined,
+        }
+    }, methods: {
+        initOk(e) {
+            let {theme, table, customerForm} = e;
+            if (this.searchRow == '1' && theme == 't1') {
+                this.formConfig = table.formConfig;//给原有的自定义搜索
+                customerForm();//执行自定义表单，这个方法会隐藏table的表单，隐藏搜索按钮
+                this.customerForm = customerForm
+            }
+            this.$emit('initOk', e)
+        }, setDataSource(data) {
+            nextTick(() => {
+                let keys = Object.keys(data).filter(o => o.toString().length == 2 && o.toString().indexOf("t") == 0);
+                for (let key of keys) {
+                    if (this.$refs[key]) {
+                        this.$refs[key].setDataSource(data[key])
+                    } else {
+                        if (this.$refs.splitpanesModel.$refs[key]) {
+                            this.$refs.splitpanesModel.$refs[key].setDataSource(data[key])
+                        } else {
+                            this.$refs.splitpanesModel1.$refs[key].setDataSource(data[key])
+                        }
+                    }
+                }
+            })
+        }
+    }
+}

package/src/components/table/model/model-index.vue

@@ -0,0 +1,121 @@
+<template>
+  <auto-height v-slot="{ height }"
+               v-loading="loading"
+               element-loading-text="正在初始化页面...">
+    <olTable v-bind="$attrs" ref="tableModel" v-if="theme == 1" :uuid="uuid" :init-data-source="false"
+             theme="t1">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </olTable>
+    <otTopBottom v-bind="$attrs" ref="tableModel" v-if="theme == 2" :uuid="uuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </otTopBottom>
+    <OtLeftRight :searchRow="searchRow" v-bind="$attrs" ref="tableModel" v-else-if="theme == 3" :uuid="uuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </OtLeftRight>
+    <OtTop1Bottom2 v-bind="$attrs" ref="tableModel" v-else-if="theme == 4" :uuid="uuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </OtTop1Bottom2>
+    <OtTop2Bottom1 :searchRow="searchRow" v-bind="$attrs" ref="tableModel" v-else-if="theme == 5" :uuid="uuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </OtTop2Bottom1>
+    <otTop2Bottom2 :searchRow="searchRow" v-bind="$attrs" ref="tableModel" v-else-if="theme == 6" :uuid="uuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </otTop2Bottom2>
+    <otLeftTreeRightTable v-bind="$attrs" ref="tableModel" v-else-if="theme == 7" :uuid="uuid" :treeUuid="treeUuid">
+      <template v-for='item in Object.keys($slots)' v-slot:[item]>
+        <slot :name="item"></slot>
+      </template>
+    </otLeftTreeRightTable>
+  </auto-height>
+</template>
+<script>
+import OtTopBottom from "@/components/table/model/ot-top-bottom.vue";
+import OtLeftRight from "@/components/table/model/ot-left-right.vue";
+import {get} from "@/utils/http/httpUtils";
+import OtTop1Bottom2 from "@/components/table/model/ot-top-1-bottom-2.vue";
+import OtTop2Bottom1 from "@/components/table/model/ot-top-2-bottom-1.vue";
+import OtTop2Bottom2 from "@/components/table/model/ot-top-2-bottom-2.vue";
+import otLeftTreeRightTable from "@/components/table/model/ot-left-tree-right-table.vue";
+import AutoHeight from "@/components/auto-height/index.vue";
+import {decryptWithDecompress} from "@/utils/AESCRUDUtils";
+export default {
+  name: 'modelIndex',
+  components: {
+    AutoHeight,
+    OtTopBottom, OtLeftRight, OtTop1Bottom2, OtTop2Bottom1, OtTop2Bottom2, otLeftTreeRightTable
+  },
+  props: {
+    uuid: {required: true},
+    http: {}
+  }, provide() {
+    return {
+      tableAll: this.table,
+      http: this.http
+    }
+  },
+  data() {
+    return {
+      cas: 0,
+      table: {},
+      theme: 0,
+      searchRow: 0,
+      treeUuid: '',
+      loading: true,
+    }
+  },
+  methods: {
+    initConfig() {
+      this.loading = true;
+      get(this.http, "/onlineAes/initAll", {uuid: this.uuid}).then(data => {
+        data = JSON.parse(decryptWithDecompress(data));
+        this.theme = data.theme;
+        this.searchRow = data.searchRow;
+        this.treeUuid = data.treeUuid;
+        this.doSetDataSource(data);
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    doSetDataSource(data) {
+      this.$nextTick(() => {
+        if (this.$refs.tableModel) {
+          if (data.theme == 1 || data.theme == 7) {
+            this.$refs.tableModel.setDataSource(data['t1'])
+          } else {
+            this.$refs.tableModel.setDataSource(data)
+          }
+        } else {
+          setTimeout(() => {
+            this.cas++;
+            if (this.cas <= 5) {
+              console.log("自旋》" + this.cas)
+              this.doSetDataSource(data)
+            }
+          }, 500)
+        }
+      })
+    }
+  }, created() {
+    this.initConfig()
+  }
+}
+</script>
+
+<style scoped lang="less">
+div {
+  height: 100%;
+  width: 100%;
+}
+</style>

package/src/components/table/model/ot-left-right.vue

@@ -0,0 +1,18 @@
+<template>
+  <splitpanes-model ref="splitpanesModel" :paneSize="paneSize" :horizontal="false" @initOk="initOk" v-bind="$attrs">
+    <template v-for='item in Object.keys($slots)' v-slot:[item]>
+      <slot :name="item"></slot>
+    </template>
+  </splitpanes-model>
+</template>
+
+<script scope>
+import {modelMixins} from "@/components/table/model/ModelMixins";
+import SplitpanesModel from "@/components/table/model/splitpanesModel.vue";
+
+export default {
+  name: 'otLeftRight',
+  components: {SplitpanesModel},
+  mixins: [modelMixins]
+}
+</script>

package/src/components/table/model/ot-left-tree-right-table.scss

@@ -0,0 +1,14 @@
+.table-right {
+  position: relative;
+  height: 100%;
+}
+
+.tree-left {
+  height: 100%;
+  position: relative;
+  float: left;
+  margin-right: 10px;
+  z-index: 100;
+}
+
+

package/src/components/table/model/ot-left-tree-right-table.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="height: 100%">
+    <el-card class="tree-left">
+      <ol-tree :uuid="treeUuid"></ol-tree>
+    </el-card>
+    <el-card class="table-right">
+      <olTable v-bind="$attrs" ref="t1" :uuid="uuid" :init-data-source="false" theme="t1">
+        <template v-for='item in Object.keys($slots)' v-slot:[item]>
+          <slot :name="item"></slot>
+        </template>
+      </olTable>
+    </el-card>
+  </div>
+</template>
+
+<script scope>
+import OlTree from "@/components/tree/index.vue";
+import {nextTick} from "vue";
+export default {
+  name: 'otLeftTreeRightTable',
+  components: { OlTree},
+  props:{
+    uuid:{},
+    treeUuid:{},
+  },
+  methods:{
+    setDataSource(data) {
+      nextTick(() => {
+        this.$refs['t1'].setDataSource(data)
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+@import "ot-left-tree-right-table.scss";
+/deep/ .el-card__body {
+  height: 100%;
+}
+
+</style>

package/src/components/table/model/ot-top-1-bottom-2.vue

@@ -0,0 +1,39 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="top">
+        <olTable v-bind="$attrs" ref="t1" theme="t1" :initDataSource="false">
+          <template v-for='item in Object.keys($slots)' v-slot:[item]>
+            <slot :name="item"></slot>
+          </template>
+        </olTable>
+      </div>
+    </pane>
+    <pane style="background:transparent" v-bind="paneSize">
+      <splitpanes-model ref="splitpanesModel" :paneSize="paneSize" theme1="t2" theme2="t3" :horizontal="false"
+                        v-bind="$attrs">
+        <template v-for='item in Object.keys($slots)' v-slot:[item]>
+          <slot :name="item"></slot>
+        </template>
+      </splitpanes-model>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {modelMixins} from "@/components/table/model/ModelMixins";
+import SplitpanesModel from "@/components/table/model/splitpanesModel.vue";
+
+export default {
+  name: 'otTop1Bottom2',
+  components: {SplitpanesModel},
+  mixins: [modelMixins]
+}
+</script>
+<style scoped>
+.top {
+  height: 100%;
+  padding-bottom: 10px;
+}
+
+</style>

package/src/components/table/model/ot-top-2-bottom-1.vue

@@ -0,0 +1,38 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="top">
+        <splitpanes-model ref="splitpanesModel" :paneSize="paneSize" :horizontal="false" @initOk="initOk" v-bind="$attrs">.
+          <template v-for='item in Object.keys($slots)' v-slot:[item]>
+            <slot :name="item"></slot>
+          </template>
+        </splitpanes-model>
+      </div>
+    </pane>
+    <pane style="background:transparent;padding-bottom: 5px" v-bind="paneSize">
+      <olTable v-bind="$attrs" ref="t3" theme="t3">
+        <template v-for='item in Object.keys($slots)' v-slot:[item]>
+          <slot :name="item"></slot>
+        </template>
+      </olTable>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {modelMixins} from "@/components/table/model/ModelMixins";
+import SplitpanesModel from "@/components/table/model/splitpanesModel.vue";
+
+export default {
+  name: 'otTop2Bottom1',
+  components: {SplitpanesModel},
+  mixins: [modelMixins]
+}
+</script>
+<style scoped>
+.top {
+  height: 100%;
+  padding-bottom: 10px;
+}
+
+</style>

package/src/components/table/model/ot-top-2-bottom-2.vue

@@ -0,0 +1,38 @@
+<template>
+  <splitpanes class="default-theme" horizontal :push-other-panes="false">
+    <pane style="background:transparent" :size="50" v-bind="paneSize">
+      <div class="top">
+        <splitpanes-model ref="splitpanesModel" :paneSize="paneSize" :horizontal="false" @initOk="initOk" v-bind="$attrs">
+          <template v-for='item in Object.keys($slots)' v-slot:[item]>
+            <slot :name="item"></slot>
+          </template>
+        </splitpanes-model>
+      </div>
+    </pane>
+    <pane style="background:transparent;padding-bottom: 5px" v-bind="paneSize">
+        <splitpanes-model ref="splitpanesModel1" :paneSize="paneSize" theme1="t3" theme2="t4" :horizontal="false" v-bind="$attrs">
+          <template v-for='item in Object.keys($slots)' v-slot:[item]>
+            <slot :name="item"></slot>
+          </template>
+        </splitpanes-model>
+    </pane>
+  </splitpanes>
+</template>
+
+<script scope>
+import {modelMixins} from "@/components/table/model/ModelMixins";
+import SplitpanesModel from "@/components/table/model/splitpanesModel.vue";
+
+export default {
+  name: 'otTop2Bottom2',
+  components: {SplitpanesModel},
+  mixins: [modelMixins]
+}
+</script>
+<style scoped>
+.top {
+  height: 100%;
+  padding-bottom: 10px;
+}
+
+</style>

package/src/components/table/model/ot-top-bottom.vue

@@ -0,0 +1,18 @@
+<template>
+  <splitpanes-model ref="splitpanesModel" :paneSize="paneSize" v-bind="$attrs">
+    <template v-for='item in Object.keys($slots)' v-slot:[item]>
+      <slot :name="item"></slot>
+    </template>
+  </splitpanes-model>
+</template>
+
+<script scope>
+import {modelMixins} from "@/components/table/model/ModelMixins";
+import SplitpanesModel from "@/components/table/model/splitpanesModel.vue";
+
+export default {
+  name: 'otLeftRight',
+  components: {SplitpanesModel},
+  mixins: [modelMixins]
+}
+</script>

package/src/components/table/model/splitpanesModel.css

@@ -0,0 +1,22 @@
+
+.left {
+    height: 100%;
+}
+
+.top {
+    height: 100%;
+}
+
+.splitpanes__splitter {
+    border: 0 !important;
+}
+
+.bottom {
+    height: 100%;
+}
+
+.right {
+    height: 100%;
+}
+
+

package/src/components/table/model/splitpanesModel.vue

@@ -0,0 +1,54 @@
+<template>
+  <div style="height: 100%;width: 100%">
+    <ol-table-search v-if="formConfig && searchRow == '1'" :formConfig="formConfig"></ol-table-search>
+    <splitpanes :style="formConfig ? getStyle : ''" class="default-theme splitpanesModel" :horizontal="horizontal"
+                :push-other-panes="false">
+      <pane style="background: transparent" :size="50" v-bind="paneSize">
+        <div :class="isLR ? 'left' :'top'">
+          <olTable :ref="theme1" v-bind="$attrs" @initOk="initOk" :initDataSource="false" :theme="theme1">
+            <template v-for='item in Object.keys($slots).filter(o=>o.indexOf("_t1") != -1)' v-slot:[item]>
+              <slot :name="item"></slot>
+            </template>
+          </olTable>
+        </div>
+      </pane>
+      <pane style="background: transparent" v-bind="paneSize">
+        <div :class="isLR ? 'right' :'bottom'">
+          <olTable :ref="theme2" v-bind="$attrs" :initDataSource="false" :theme="theme2">
+            <template v-for='item in Object.keys($slots).filter(o=>o.indexOf("_t2") != -1)' v-slot:[item]>
+              <slot :name="item"></slot>
+            </template>
+          </olTable>
+        </div>
+      </pane>
+    </splitpanes>
+
+  </div>
+</template>
+<script scope>
+import {Pane, Splitpanes} from "splitpanes";
+import {modelMixins} from "@/components/table/model/ModelMixins";
+
+export default {
+  name: 'splitpanesModel',
+  mixins: [modelMixins],
+  components: {Splitpanes, Pane}, props: {
+    searchRow: {default: '0'},
+    theme1: {default: 't1'},
+    theme2: {default: 't2'},
+    horizontal: {default: true},
+    isLR: {default: true},
+  }, computed: {
+    getStyle() {
+      let px = Math.ceil(this.formConfig.items.length / 4) * 45;
+      let style = 'height: calc(100% - ' + px + 'px)'
+      return style
+
+    },
+  }, methods: {}, created() {
+  }
+}
+</script>
+<style scoped>
+@import "splitpanesModel.css";
+</style>