olp-table 5.3.4 → 5.3.5

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

@@ -1,233 +0,0 @@
-<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

@@ -1,145 +0,0 @@
-<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

@@ -1,88 +0,0 @@
-<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

@@ -1,232 +0,0 @@
-<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>