olp-table 5.3.1 → 5.3.4

package/src/components/table/ol-table/components/ol-table-column-config/columnIndex.vue

@@ -0,0 +1,233 @@
+<template>
+  <vxe-grid v-bind="gridOptions" ref="vexGridRef" @edit-closed="doUpdate(undefined)">
+    <!-- 通用多选框 -->
+    <template #checkedBox_header="{ column }">
+      <div style="display: flex;align-items: center;">
+        <el-checkbox v-model="column.params.all" @change="headerClick(column)"></el-checkbox>
+        <span style="margin-left: 5px;">{{ column.title }} </span>
+
+      </div>
+    </template>
+    <template #seq="{  rowIndex}">
+      <vxe-button size="mini" style="padding:0" type="text">
+        <span class="vxe-icon-sort"/>{{ rowIndex + 1 }}
+      </vxe-button>
+    </template>
+    <template #checkedBox_default="{ column, row }">
+      <el-checkbox v-model="row[column.field]" v-if="column.field == 'visible'" @change="checkBoxClick(column,row)"
+                   true-value="1"
+                   false-value="0">{{ row.title }}
+      </el-checkbox>
+
+      <el-checkbox v-model="row[column.field]" v-else @change="checkBoxClick(column,row)"
+                   true-value="1"
+                   false-value="0"></el-checkbox>
+    </template>
+    <!-- 通用下拉框 -->
+    <template #select_default="{ column, row }">
+      <ol-dict-tag :code="column.params.dictCode" size="small" clearable @change="doUpdate(row)"
+                   v-model="row[column.field]">
+      </ol-dict-tag>
+    </template>
+  </vxe-grid>
+</template>
+<script>
+import {updateSort} from "@/utils/TableSortUtil";
+import OlDictTag from "@/components/ol-dict-tag.vue";
+import {inject} from "vue";
+
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+
+const http = inject('http')
+
+const dict = storeDict();
+const dictType = storeDictType();
+dict.init(http)
+dictType.init(http)
+export default {
+  name: 'columnIndex',
+  components: {OlDictTag},
+  inject: ['http'],
+  data() {
+    return {
+      gridOptions: {
+        border: true,
+        keepSource: true,
+        showOverflow: true,
+        loading: false,
+        height: 'auto',
+        size: 'mini',
+        rowConfig: {isHover: true, isCurrent: true},
+        editConfig: {
+          trigger: 'click',
+          showStatus: true,
+          mode: 'row'
+        },
+        align: 'center',
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 0},
+        columnConfig: {
+          resizable: true
+        },
+        expandConfig: {
+          labelField: 'seq'
+        },
+        checkboxConfig: {
+          showHeader: false
+        },
+        columns: [],
+        columnSource: [
+          {
+            field: 'sort',
+            width: 60,
+            className: 'move',
+            title: "序号",
+            slots: {
+              default: 'seq'
+            }
+          },
+          {
+            field: 'visible',
+            align: 'left',
+            fixed:'left',
+            params: {
+              all: 0
+            },
+            slots: {
+              header: 'checkedBox_header',
+              default: 'checkedBox_default'
+            },
+            minWidth: 120,
+            title: '标题'
+          },
+          {
+            field: 'sortable',
+            params: {
+              all: 0,
+              dictCode: 'order_by_type'
+            },
+            editRender: {
+              props: {clearable: true, filterable: true},
+              events: {change: this.doUpdate},
+              name: '$select',
+              options: dict.val('order_by_type')
+            },
+            width: 80,
+            title: '排序'
+          },
+          {
+            field: 'fixed',
+            params: {
+              dictCode: 'table_fixed'
+            },
+            editRender: {
+              props: {clearable: true, filterable: true},
+              events: {change: this.doUpdate}, name: '$select', options: dict.val('table_fixed')
+            },
+            width: 80,
+            title: '固定'
+          },
+          {
+            title: '合计',
+            field: 'totalToOtherProp',
+            params: {
+              dictCode: 'online_calculation_type'
+            },
+            editRender: {
+              props: {clearable: true, filterable: true},
+              events: {change: this.doUpdate},
+              name: '$select',
+              options: dict.val('online_calculation_type')
+            },
+            width: 80,
+          }
+        ],
+        toolbarConfig: {},
+        data: [],
+        updateSortMethod: this.doUpdate
+      },
+    }
+  },
+  methods: {
+    doUpdate(rows) {
+      setTimeout(() => {
+        if (rows == undefined) {
+          rows = this.gridOptions.data;
+        }
+        rows = rows instanceof Array ? JSON.parse(JSON.stringify(rows)) : [rows]
+        let updates = [];
+        for (let row of rows) {
+          let obj = {id:row.id,field:row.field};
+          for (let column of this.gridOptions.columns) {
+            obj[column.field] = row[column.field];
+          }
+          if(obj.field){
+            updates.push(obj);
+          }
+        }
+        this.$emit('update', updates)
+      }, 300)
+    },
+    headerClick(column) {
+      let updateSource = [];
+      this.gridOptions.data.forEach(row => {
+        row[column.field] = column.params.all ? '1' : '0'
+        updateSource.push(row)
+      })
+      this.doUpdate(updateSource)
+    },
+    checkBoxClick(column, row) {
+      let f = true
+      this.gridOptions.data.forEach(item => {
+        if (item[column.field] != '1') {
+          f = false
+        }
+      })
+      column.params.all = f
+      if (row != undefined) {
+        this.doUpdate(row)
+      }
+    },
+    init({paging}, columns) {
+      columns = columns.filter(o => o.columnAuth == 1);
+      let columnSource = JSON.parse(JSON.stringify(this.gridOptions.columnSource));
+      if (paging == 2) {
+        columnSource.push({
+          title: '分组',
+          field: 'groupToOtherProp',
+          width: 60,
+          params: {
+            all: null
+          },
+          slots: {
+            default: 'checkedBox_default'
+          }
+        });
+        columnSource.push({
+          title: '分组合计',
+          field: 'groupTotalToOtherProp',
+          params: {
+            dictCode: 'online_calculation_type'
+          },
+          width: 100,
+          editRender: {
+            props: {clearable: true, filterable: true},
+            name: '$select',
+            options: dict.val('online_calculation_type')
+          },
+        });
+      }
+      this.gridOptions.columns = columnSource;
+      this.gridOptions.data = columns
+      this.checkBoxClick(this.gridOptions.columns[2])
+      updateSort(this.$refs.vexGridRef, this.gridOptions)
+    },
+    getData() {
+      return this.gridOptions.data
+    }
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/components/table/ol-table/components/ol-table-column-config/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <el-drawer v-model="show"
+             destroy-on-close
+             :show-close="false"
+             :close-on-click-modal="false"
+             :title="'列配置 -'+uuid " direction="rtl" size="25%">
+    <div style="height: calc(100% - 50px);">
+      <ColumnIndex ref="columnIndex" @update="$emit('update',$event)"/>
+    </div>
+    <div class="button-container">
+      <el-button @click="cancelClick" :loading="loading">返回页面</el-button>
+      <el-popconfirm
+          @confirm="confirmClick"
+          title="保存当前设置？"
+      >
+        <template #reference>
+          <el-button type="primary" :loading="loading">保存</el-button>
+        </template>
+      </el-popconfirm>
+    </div>
+  </el-drawer>
+</template>
+<style scoped>
+.button-container {
+  height: 50px;
+  display: grid;
+  grid-template-columns: auto auto; /* 两列布局 */
+  justify-content: end; /* 靠右对齐 */
+  align-items: center; /* 垂直居中 */
+  grid-column-gap: 10px; /* 列之间的间距 */
+  padding-right: 10px; /* 右侧内边距，可根据需要调整 */
+}
+</style>
+<script>
+import {put} from "@/utils/http/httpUtils";
+import ColumnIndex from "@/components/table/ol-table/components/ol-table-column-config/columnIndex.vue";
+
+export default {
+  name: 'olTableColumnConfig',
+  inject: ['http'],
+  components: {
+    ColumnIndex,
+  },
+  data() {
+    return {
+      uuid: '',
+      show: false,
+      loading: true,
+    }
+  },
+  methods: {
+    cancelClick() {
+      this.show = false;
+    },
+    confirmClick() {
+      let gridOptions = this.$refs.columnIndex.gridOptions
+      let datas = [];
+      for (let data of gridOptions.data) {
+        let o = {id: data.id,visible:data.visible == 1 ? 1 : 0};
+        for (let j = 2; j < gridOptions.columns.length; j++) {
+          let column = gridOptions.columns[j];
+          o[column.field] = data[column.field];
+          if (column.field.indexOf("ToOtherProp") != -1) {
+            data.otherProp[column.field] = data[column.field];
+            o.otherProp = data.otherProp;
+          }
+        }
+        delete o.groupTotalToOtherProp;
+        if (o.fixed == 'left') {
+          o.fixed = 1;
+        } else if (o.fixed == 'right') {
+          o.fixed = 2;
+        }
+
+        datas.push(o)
+      }
+      let i = 1;
+      for (let data1 of datas) {
+        i++;
+        data1.sort = i;
+        if (data1.otherProp) {
+          data1.otherProp = JSON.stringify(data1.otherProp);
+        }
+      }
+      datas[0].uuid = gridOptions.data[0].uuid;
+      datas[0].thmem = gridOptions.data[0].thmem;
+      this.loading = true;
+      put(this.http, '/online/tableConfigColumn/editBatch', datas).then(res => {
+        if (res) {
+          this.$emit('ok');
+          this.show = false;
+        }
+      }).finally(() => {
+        this.loading = false;
+      })
+    },
+    copyTextToClipboard(text) {
+      navigator.clipboard.writeText(text).then(() => {
+        console.log('Text copied to clipboard');
+      }).catch(err => {
+        console.error('Failed to copy text: ', err);
+      });
+    },
+    open(tableConfig, id, columns) {
+      this.show = true;
+      this.loading = true;
+      this.uuid = id;
+      this.$nextTick(() => {
+        this.$refs.columnIndex.init(tableConfig, JSON.parse(JSON.stringify(columns)))
+        this.loading = false;
+      })
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.page-left {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.vxe-pager {
+  height: 35px;
+  top: 5px;
+}
+
+.container :deep(.el-drawer__header) {
+  padding: 0px 20px;
+  margin-bottom: 0px;
+}
+
+.el-tag:hover {
+  background-color: #f56c6c; /* 红色背景 */
+  color: #fff; /* 白色文字 */
+  cursor: pointer;
+}
+
+:deep(.move) {
+  cursor: move;
+}
+
+</style>

package/src/components/table/ol-table/components/ol-table-column-dict-color/index.vue

@@ -0,0 +1,88 @@
+<template>
+  <div class="OTableColumnDictColor_container" v-if="title">
+    <div class="box">{{ title }}：</div>
+    <div v-for="item in cssClass" class="box">
+      <div class="color" :style="item.style"></div>
+      <span class="dictLabel">{{ item.dictLabel }}</span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  name: 'olTableColumnDictColor',
+  props: {
+    columns: {default: []}
+  },
+  data() {
+    return {
+      cssClass: [],
+      title: undefined,
+    }
+  },
+  created() {
+    for (let column of this.columns) {
+      if (column.params && column.params.cssClass) {
+        let cssClass = [];
+        for (let obj of Object.keys(column.params.cssClass)) {
+          let st = column.params.cssClass[obj];
+          this.title = column.title;
+          let style = 'background-color:' + st['backgroundColor'] + ";color:" + st['color'];
+          cssClass.push({
+            dictValue: obj,
+            dictLabel: column.params.dictValueLabel[obj],
+            style: style
+          })
+        }
+        this.cssClass = cssClass
+      }
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.OTableColumnDictColor_container {
+  float: left;
+  font-size: 11px;
+  color: #000000;
+
+  .box {
+    float: left;
+    display: flex;
+    justify-content: center; /* 水平居中，如需 */
+    align-items: center; /* 垂直居中 */
+  }
+}
+
+.text-with-line {
+  text-align: center; /* 文字居中 */
+  position: relative; /* 相对定位 */
+  padding-top: 10px; /* 文字与横线之间的间隔 */
+}
+
+.text-with-line::after {
+  content: ""; /* 伪元素内容为空 */
+  position: absolute; /* 绝对定位 */
+  left: 0; /* 横线左边界与div左边界对齐 */
+  right: 0; /* 横线右边界与div右边界对齐 */
+  top: 0; /* 横线顶部与div内部内容顶部对齐 */
+  height: 1px; /* 横线高度 */
+  background: black; /* 横线颜色 */
+  transform: scaleY(0.5); /* 将线性缩小一半，看起来更细 */
+}
+
+.dictLabel {
+  margin-right: 5px;
+  float: left;
+}
+
+.color {
+  float: left;
+  margin-right: 5px;
+  text-align: center;
+  width: 12px;
+  height: 12px;
+  border-radius: 10px;
+}
+</style>

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

@@ -0,0 +1,232 @@
+<template>
+    <slot :name="getSlotName('search')" v-if="table.formConfig.show"></slot>
+    <vxe-grid v-bind="table" class="ol-table" :footer-method="footerMethod" @checkboxChange="selectRowChange"
+              @radioChange="selectRowChange"
+              v-on="events"
+              @checkboxAll="selectRowChange">
+      <template v-for='item in table.formConfig.items.filter(item =>item.slotsName != undefined)' v-slot:[item.slotsName]>
+        <olSelectDom :item="item" v-model="table.formConfig.data[item.key]"></olSelectDom>
+      </template>
+      <template #img_default="{row,column}">
+        <el-image
+            style="height: 40px"
+            :src="row[getFiledName(column)]"
+            :preview-src-list="[row[column[getFiledName(column)]]]"
+            :zoom-rate="1.2"
+            :max-scale="7"
+            :min-scale="0.2"
+            :initial-index="4"
+            fit="scale-down"
+        />
+      </template>
+      <template #icon_default="{row,column}">
+        <i :class="row[getFiledName(column)]"></i>{{ row[column[getFiledName(column)]] }}
+      </template>
+      <template #header_left>
+      <span class="title" v-if="table['table-title']">{{ table['table-title'] }}
+      </span>
+        <span style="margin: 0px 15px -30px 0px" v-else></span>
+        <slot :name="getSlotName('headerLeftLeft')"></slot>
+        <ol-table-tool-btn :loading="loading" :value="toolBtn.filter(o=>o.alignMode == 'left')" :currentPermi="uuid+':'+theme+':'"
+                           @toolbarBtnClick="toolbarBtnClick($event)"/>
+        <slot :name="getSlotName('headerLeftRight')"></slot>
+      </template>
+      <template #header_right>
+        <slot :name="getSlotName('headerRightLeft')"></slot>
+        <ol-table-tool-btn :loading="loading" :value="toolBtn.filter(o=>o.alignMode == 'right' && ['olp_fullscreen','olp_refresh','olp_setting','olp_search'].indexOf(o.code) == -1)" :currentPermi="uuid+':'+theme+':'"
+                           @toolbarBtnClick="toolbarBtnClick($event)">
+          <template #right>
+            <vxe-button @click="zoomEvent" v-if="showToolName('olp_fullscreen')" circle>
+              <i class="vxe-icon-fullscreen" v-if="!isMaximized" title="全屏"/>
+              <i class=" vxe-icon-minimize" title="取消全屏" v-else/>
+            </vxe-button>
+            <vxe-button icon="vxe-icon-refresh" v-if="showToolName('olp_refresh')" @click="query" title="刷新" circle></vxe-button>
+            <vxe-button icon="vxe-icon-setting-fill"  v-if="showToolName('olp_setting')" title="设置"
+                        @click="$refs.olTableColumnConfig.open(tableConfig, tableConfig.uuid,table.columns)"
+                        circle></vxe-button>
+            <vxe-button icon="vxe-icon-search" title="搜索" v-if="showToolName('olp_search')" @click="toggleFormDisplay" circle></vxe-button>
+          </template>
+        </ol-table-tool-btn>
+        <slot :name="getSlotName('headerRightRight')"></slot>
+      </template>
+      <!--操作-->
+      <template #operate="{ row }">
+        <slot :name="getSlotName('operateLeft')"></slot>
+        <olTableOperate :row="row" :value="operationBtn"
+                        @handleOperationClick="handleOperationClick($event)"></olTableOperate>
+        <slot :name="getSlotName('operateRight')"></slot>
+      </template>
+      <!--分页-->
+      <template #pager v-if="pagination.enabled && table.columns.length !=0">
+        <olPager v-bind="pagination" @page-change="handlePageChange"
+                 @clearSelected="clearSelected">
+          <template #left>
+            <ol-table-column-dict-color :columns="table.columns"/>
+            <slot :name="getSlotName('pageLeft')"></slot>
+          </template>
+          <template #right>
+            <slot :name="getSlotName('pageRight')"></slot>
+          </template>
+        </olPager>
+      </template>
+    </vxe-grid>
+    <component ref="components" v-if="customUrl != undefined" :is="customUrl" @emits="emits"/>
+    <ol-table-column-config ref="olTableColumnConfig" @update="updateColumn" @ok="init(true)"/>
+    <olForm ref="form" @query="query"></olForm>
+    <OlMainFormSubTable ref="subForm" @query="query"/>
+</template>
+
+<script>
+import {OTMixin} from "@/mixins/VTMixin";
+import olTableOperate from "@/components/table/ol-table-operate"
+import olPager from "@/components/table/ol-pager"
+import olForm from "@/components/table/ol-form"
+import OlTableColumnConfig from "@/components/table/ol-table/components/ol-table-column-config/index.vue";
+import OlTableToolBtn from "@/components/table/ol-table-tool-btn/index.vue";
+import {Delete} from "@element-plus/icons-vue";
+import OlTableColumnDictColor from "@/components/table/ol-table/components/ol-table-column-dict-color/index.vue";
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+import getFiledName from "@/utils/columnProp";
+import OlMainFormSubTable from "@/components/table/ol-main-form-sub-table/index.vue";
+import {storePermi} from "@/store/permi";
+
+const dict = storeDict();
+const dictType = storeDictType();
+const permi = storePermi();
+export default {
+  name: 'olTable',
+  props: {
+    theme: {
+      type: String
+    },
+    initDataSource: {
+      default: true
+    }
+  },
+  mixins: [OTMixin],
+  components: {
+    OlMainFormSubTable,
+    OlTableColumnDictColor, Delete, OlTableToolBtn, OlTableColumnConfig, olTableOperate, olPager, olForm},
+  data() {
+    return {
+      uuid: this.$attrs.uuid
+    }
+  },
+  methods: {
+    showToolName(code){
+      for (let toolBtn of this.toolBtn) {
+        if(toolBtn.code == code){
+          return true;
+        }
+      }
+      return false;
+    },
+    getFiledName,
+    handleClose() {
+      this.selectRowChange()
+    }, getSlotName(name) {
+      return name + "_" + this.theme
+    }
+  },
+  mounted() {
+    setTimeout(() => {
+      this.updateSort()
+    }, 500)
+  },
+  created() {
+    dict.init();
+    dictType.init();
+    permi.init();
+  }
+}
+</script>
+
+<style>
+@import "@/styles/theme.scss";
+</style>
+<style lang="less" scoped>
+
+.codemirror-el-dialog {
+
+  > .el-dialog__header {
+    display: block;
+  }
+}
+
+.cursor-pointer {
+  cursor: pointer;
+}
+
+.table-right-operation-but {
+  margin: 0;
+}
+
+
+/deep/ .vxe-table--body-wrapper {
+  min-height: 110px;
+}
+
+.tableCard {
+  height: 100%;
+
+  :deep(.el-card__body) {
+    padding: 8px 16px;
+    height: 100%;
+  }
+}
+
+/*
+/deep/ .vxe-grid--form-wrapper .vxe-form .vxe-form--wrapper{
+  border: 1px solid #e8eaec;
+  border-radius: 2px;
+  padding: 15px 0;
+}
+*/
+
+.page-left {
+  position: absolute;
+  left: 10px;
+  top: 50%;
+  transform: translateY(-50%);
+  z-index: 10;
+}
+
+.vxe-pager {
+  height: 34px;
+  top: 3px;
+}
+
+.t-bottom {
+  float: left;
+  position: relative;
+  font-size: 13px;
+  width: 100%;
+  top: 4px;
+  border-top: 0;
+}
+
+.title {
+  z-index: 15;
+  margin: 0px 15px -23px 0px;
+  background-color: #fff;
+  border-radius: 2px;
+  border: 1px solid rgb(232, 234, 236);
+  border-bottom: 0;
+  padding: 0px 9px;
+  line-height: 25px;
+  color: #49494b;
+}
+
+/deep/ .size--mini {
+  .title {
+    margin: 0px 15px -20px 0px !important;
+  }
+}
+
+/deep/ .size--medium {
+  .title {
+    margin: 0px 15px -29px 0px !important;
+  }
+}
+</style>