olp-table 5.3.1 → 5.3.4

package/src/views/groupTable/ol-table-column-config/columnIndex.vue

@@ -0,0 +1,194 @@
+<template>
+  <vxe-grid v-bind="gridOptions" ref="vexGridRef" :data="gridOptions1.columns">
+    <!-- 通用多选框 -->
+    <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]" @change="checkBoxClick(column, row)"></el-checkbox>
+    </template>
+    <template #select_com="{ column, row }">
+      <el-select v-model="row[column.field]" clearable placeholder="计算类型" @change="gridOptions1.refresh()" size="small">
+        <el-option v-for="type in ['sum','avg','max','min']" :key="type" :value="type" :label="type"></el-option>
+      </el-select>
+    </template>
+  </vxe-grid>
+</template>
+<script>
+import {get} from "@/utils/http/httpUtils";
+import {updateSort} from "@/utils/TableSortUtil";
+
+export default {
+  name: 'columnIndex',
+  data() {
+    return {
+      gridOptions: {
+        border: true,
+        keepSource: true,
+        showOverflow: true,
+        loading: false,
+        height: 'auto',
+        size: 'mini',
+        align: 'center',
+        scrollX: {enabled: true, gt: 15},
+        scrollY: {enabled: true, gt: 0},
+        columnConfig: {
+          resizable: true
+        },
+        rowConfig: {
+          useKey: true
+        },
+        expandConfig: {
+          labelField: 'seq'
+        },
+        editConfig: {
+          trigger: 'click',
+          mode: 'row',
+          showStatus: true,
+        }
+        ,
+        checkboxConfig: {
+          showHeader: false
+        }
+        ,
+        columns: [
+          {
+            field: 'sort',
+            width: 70,
+            className: 'move',
+            title: "序号",
+            slots: {
+              default: 'seq'
+            }
+          },
+          {
+            field: 'title',
+            minWidth: 110,
+            title: '列名称'
+          },
+          {
+            field: 'visible',
+            params: {
+              all: 0
+            },
+            slots: {
+              header: 'checkedBox_header',
+              default: 'checkedBox_default'
+            },
+            width: 70,
+            title: '显示'
+          },
+          {
+            minWidth: 70,
+            title: '分组',
+            field: 'group',
+            slots: {
+              default: 'checkedBox_default'
+            },
+          }, {
+            field: 'computes',
+            minWidth: 100,
+            title: '计算',
+            slots: {
+              default: 'select_com'
+            },
+          },{
+            field: 'footer',
+            minWidth: 100,
+            title: '表尾',
+            slots: {
+              default: 'select_com'
+            },
+          },
+          /*{
+            field: 'align',
+            params: {
+              dictCode: 'align'
+            },
+            slots: {
+              default: 'select_default'
+            },
+            width: 100,
+            title: '对齐'
+          }*/
+        ],
+        toolbarConfig: {},
+        data: []
+      },
+    }
+  },
+  inject: ['gridOptions1'],
+  methods: {
+    headerClick(column) {
+      this.gridOptions.data.forEach(item => {
+        item[column.field] = column.params.all ? '1' : '0'
+      })
+      if (column.params.all == '0') {
+        //全不选的时候
+        if (column.field == 'addDisplay') {
+          this.$emit("checkBoxAll", {
+            checkBoxName: "add",
+            isAll: false,
+            list: this.gridOptions.data
+          })
+        } else if (column.field == 'editDisplay') {
+          this.$emit("checkBoxAll", {
+            checkBoxName: "edit",
+            isAll: false,
+            list: this.gridOptions.data
+          })
+        }
+      } else if (column.params.all == '1') {
+        //全选
+        if (column.field == 'addDisplay') {
+          this.$emit("checkBoxAll", {
+            checkBoxName: "add",
+            isAll: true,
+            list: this.gridOptions.data
+          })
+        } else if (column.field == 'editDisplay') {
+          this.$emit("checkBoxAll", {
+            checkBoxName: "edit",
+            isAll: true,
+            list: this.gridOptions.data
+          })
+        }
+      }
+    },
+    checkBoxClick(column, row) {
+      let f = true
+      this.gridOptions.data.forEach(item => {
+        if (!item[column.visible]) {
+          f = false
+        }
+      })
+      if(column.params){
+        column.params.all = f
+      }
+      this.gridOptions1.refresh()
+    },
+    init(data) {
+      this.gridOptions.loading = true
+      this.gridOptions.data = this.gridOptions1.columns;
+      this.gridOptions.loading = false
+    },
+    getData() {
+      return this.gridOptions.data
+    }
+  }, mounted() {
+    updateSort(this.$refs.vexGridRef, this.gridOptions)
+  }, created() {
+  }
+}
+</script>
+<style scoped>
+</style>

package/src/views/groupTable/ol-table-column-config/index.vue

@@ -0,0 +1,92 @@
+<template>
+  <el-drawer v-model="show" :with-header="true" direction="rtl" size="25%">
+    <template #default>
+      <ColumnIndex ref="columnIndex"/>
+    </template>
+    <template #footer>
+      <div style="flex: auto;display: flex;justify-content: center;">
+        <el-button @click="cancelClick" :loading="loading">取消</el-button>
+        <el-button type="primary" @click="confirmClick" :loading="loading">保存</el-button>
+      </div>
+    </template>
+  </el-drawer>
+</template>
+<script>
+import ColumnIndex from "./columnIndex.vue";
+
+export default {
+  name: 'tableColumnConfig',
+  components: {
+    ColumnIndex,
+  },
+  data() {
+    return {
+      uuid: '',
+      show: false,
+      loading: true,
+    }
+  },
+  methods: {
+    cancelClick() {
+      this.show = false;
+    },
+    confirmClick() {
+      let data = this.$refs.columnIndex.getData();
+      let datas = JSON.parse(JSON.stringify(data));
+      let i = 1;
+      for (let data1 of datas) {
+        i++;
+        data1.sort = i;
+      }
+      this.loading = true;
+     /* put(this.http, '/online/tableConfigColumn/editBatch', datas).then(res => {
+        if (res) {
+          this.$emit('ok');
+          this.show = false;
+        }
+      }).finally(() => {
+        this.loading = false;
+      })*/
+    },
+    open(data, id) {
+      this.show = true;
+      this.loading = true;
+      this.uuid = id;
+      this.$nextTick(() => {
+        this.$refs.columnIndex.init(data)
+        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>