olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,790 @@
+<template>
+  <div>
+    <vxe-grid v-if="show" v-bind="gridOptions" ref="vexGridRef"
+              :expand-config="{ labelField: 'seq' }"
+              resizable>
+      <template #toolbar_buttons>
+        <el-button @click="onAdd">新增列</el-button>
+        <el-button @click="headerConfigShow">多级表头配置</el-button>
+        <el-button @click="setGroupByMin">批量设置分组为SUM</el-button>
+      </template>
+      <template #seq="{  rowIndex}">
+        <vxe-button size="mini" style="padding:0" type="text">
+          <span class="vxe-icon-sort"/>{{ rowIndex + 1 }}
+        </vxe-button>
+      </template>
+      <template #label_filter="{ column, $panel }">
+        <input type="type" v-for="(option, index) in column.filters"
+               :key="index"
+               v-model="option.data"
+               @input="$panel.changeOption($event, !!option.data, option)"
+               @keyup.enter="enterFilterEvent({ column, $panel })">
+      </template>
+      <!-- 通用多选框 -->
+      <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 #checkedBox_default="{ column, row }">
+        <el-checkbox v-model="row[column.field]" true-value="1" false-value="0"
+                     @change="checkBoxClick(column, row)"/>
+      </template>
+      <!-- 通用下拉框 -->
+      <template #select_default="{ column, row }">
+        <el-select filterable clearable v-model="row[column.field]"
+                   placeholder="可搜索">
+          <el-option
+              v-for="item in dictType.val()"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+          </el-option>
+        </el-select>
+      </template>
+      <!-- 通用弹窗 -->
+      <template #dialog_default="{ column, row }">
+        <olCodemirrorTag v-model="row[column.field]" :title="row.title+' - console.log(cellValue, row, column) '"
+                         size="small">
+          <template #toolbar-left>
+            <el-button type="primary" @click="row[column.prompt] = !row[column.prompt]">用法提示</el-button>
+          </template>
+          <template #tip-header>
+            <div v-if="row[column.prompt]"
+                 style="text-align: center;padding: 10px;background-color: #282C34;color: #fff;">
+              <h3>格式化显示的内容</h3>
+              <p>格式化字符串，以下为实例，当前处于函数中,可直接return</p>
+              <p>参数：(({ cellValue, row, column }) => any) | any[] | string</p>
+              <p>return cellValue && cellValue >= 18 ? cellValue + '成年人' : cellValue + '未成年'</p>
+            </div>
+          </template>
+        </olCodemirrorTag>
+      </template>
+      <!-- 展开行 -->
+      <!--    <template #content="{ row, rowIndex }">
+            <div style="width: 80%;padding:30px 50px 12px;display: flex;">
+              <avue-form ref="formRef" :option="option" v-model="row.form"></avue-form>
+            </div>
+          </template>-->
+      <!-- 操作栏 -->
+      <template #operate="{ row }">
+        <el-button @click="removeRowEvent(row)" type="danger" size="small" circle plain>
+          <el-icon>
+            <Delete/>
+          </el-icon>
+        </el-button>
+      </template>
+    </vxe-grid>
+    <HeaderConfig ref="headerConfig" @ok="setGroupColumnData"/>
+  </div>
+
+</template>
+<script setup>
+import {ref, reactive, defineExpose, onMounted, nextTick, defineEmits, watch, defineProps, inject} from "vue"
+import {Delete} from '@element-plus/icons-vue'
+import VXETable from 'vxe-table'
+import XEUtils from 'xe-utils'
+import Sortable from "sortablejs"
+import {storeDict} from "@/store/dict";
+import {storeDictType} from "@/store/dictType";
+import HeaderConfig from "@/views/table/add-or-edit/config/column-config/header-config.vue";
+import {get} from "@/utils/http/httpUtils";
+
+const props = defineProps({
+  addVisible: {},
+  editVisible: {},
+})
+const show = ref(false)
+const vexGridRef = ref()
+const headerConfig = ref()
+const dict = storeDict();
+const dictType = storeDictType();
+
+function setShow(value) {
+  nextTick(() => {
+    show.value = value;
+    updateSort()
+  })
+}
+
+function setGroupByMin() {
+  gridOptions.data.forEach(item => {
+    if (item.groupToOtherProp != 1 && !item.groupTotalToOtherProp) {
+      item.groupTotalToOtherProp = 'sum'
+    }
+  })
+}
+
+const http = inject('http')
+
+dict.init(http)
+dictType.init(http)
+
+function headerConfigShow() {
+  if (gridOptions.data) {
+    let tableConfigId = gridOptions.data[0].parentId;
+    get(http, '/online/tableConfigColumn/queryGroupByParentId', {id: tableConfigId}).then(res => {
+      headerConfig.value.setColumn(res)
+    })
+  }
+}
+
+watch(props, () => {
+  for (let column of gridOptions.columns) {
+    if (column.prop == 'addDisplay' || column.field == 'addDisplay') {
+      if (!column.visible && props.addVisible) {
+        checkBoxAllChange(column.field)
+      }
+      column.visible = props.addVisible;
+    }
+    if (column.prop == 'editDisplay' || column.field == 'editDisplay') {
+      if (!column.visible && props.editVisible) {
+        checkBoxAllChange(column.field)
+      }
+      column.visible = props.editVisible;
+    }
+  }
+  if (show.value) {
+    vexGridRef.value.loadColumn(gridOptions.columns)
+  }
+}, {deep: true})
+
+const checkBoxAllChange = (field) => {
+  emits('checkBoxAll', {
+    checkBoxName: field == 'editDisplay' ? 'edit' : 'add',
+    isAll: true,
+    list: gridOptions.data.filter(row => row[field] == '1')
+  })
+
+}
+//表头全选框更新
+const headerClick = (column) => {
+  if (column.field != 'columnAuth' && column.field == 'visible') {
+    let columnField = vexGridRef.value.getColumnByField('columnAuth');
+    columnField.params.all = column.params.all
+    headerClick(columnField)
+  }
+
+  gridOptions.data.forEach(item => {
+    item[column.field] = column.params.all ? '1' : '0'
+  })
+  if (column.params.all == '0') {
+    //全不选的时候
+    if (column.field == 'addDisplay') {
+      emits("checkBoxAll", {
+        checkBoxName: "add",
+        isAll: false,
+        list: gridOptions.data
+      })
+    } else if (column.field == 'editDisplay') {
+      emits("checkBoxAll", {
+        checkBoxName: "edit",
+        isAll: false,
+        list: gridOptions.data
+      })
+    }
+  } else if (column.params.all == '1') {
+    //全选
+    if (column.field == 'addDisplay') {
+      emits("checkBoxAll", {
+        checkBoxName: "add",
+        isAll: true,
+        list: gridOptions.data
+      })
+    } else if (column.field == 'editDisplay') {
+      emits("checkBoxAll", {
+        checkBoxName: "edit",
+        isAll: true,
+        list: gridOptions.data
+      })
+    }
+  }
+}
+//表格多选框更新
+const checkBoxClick = (column, row) => {
+  emits("checkBoxChange", {
+    row: row,
+    column: column,
+  })
+  if (column.field != 'columnAuth' && column.field == 'visible') {
+    let columnField = vexGridRef.value.getColumnByField('columnAuth');
+    row.columnAuth = row.visible
+    checkBoxClick(columnField, row)
+  }
+
+  let f = true
+  gridOptions.data.forEach(item => {
+    if (item[column.field] != '1') {
+      f = false
+    }
+  })
+  column.params.all = f
+}
+
+//拿到数据
+const setData = (data) => {
+  if (!data) {
+    return
+  }
+  gridOptions.data = data
+  //查看多选框是否多选
+  gridOptions.columns.forEach(item => {
+    if (item.slots && item.slots.default == "checkedBox_default") {
+      //默认全选状态
+      let flag = gridOptions.data.length > 0
+      gridOptions.data.forEach(row => {
+        if (row[item.field] != "1") {
+          //有某个参数没选择则不是全选的状态
+          flag = false
+        }
+      })
+      item.params.all = flag
+    }
+  })
+}
+
+//新增新字段
+const onAdd = () => {
+  let newBtn = {visible: 0, form: {}, sort: gridOptions.data.length + 1}
+  gridOptions.data.push(newBtn)
+  vexGridRef.value.loadData(gridOptions.data)
+  setTimeout(() => {
+    vexGridRef.value.scrollToRow(gridOptions.data[newBtn.sort - 1], null)
+  }, 500)
+}
+
+//删除数据
+const removeRowEvent = (row) => {
+  VXETable.modal.confirm('您确定要删除该数据?')
+      .then(() => {
+        gridOptions.data = gridOptions.data.filter(item => item._X_ROW_KEY != row._X_ROW_KEY)
+        handleCheckBoxClick(row)
+      })
+      .catch(() => {
+      })
+}
+
+const handleCheckBoxClick = (row) => {
+  for (let column of gridOptions.columns) {
+    if (column.field == 'addDisplay' || column.field == 'editDisplay') {
+      row.addDisplay = undefined
+      row.editDisplay = undefined
+      checkBoxClick(column, row)
+    }
+  }
+}
+
+//表更新
+const updateData = (data) => {
+  let list = gridOptions.data
+  // 字段映射hash表
+  let map = {}
+  for (let item of list) {
+    if (item.visible == 1) {
+      item.visible = "1"
+    }
+    map[item.asName] = item
+  }
+  gridOptions.data = []
+  if (!data) {
+    return
+  }
+  data.forEach((item, index) => {
+    if (map[item.prop]) {
+      // 存在字段不覆盖
+      gridOptions.data.push(map[item.prop])
+      return
+    }
+
+    if (!item.column_comment || item.column_comment.toString().trim()) {
+      item.column_comment = item.prop
+    }
+    let data = {
+      field: item.prop,
+      title: item.column_comment,
+      tableField: item.column_name,
+      asName: item.prop,
+      sort: index,
+      visible: "1",
+      form: {},
+      label: item.column_comment
+    }
+    //映射表更新返回的字段
+    gridOptions.data.push(data)
+  })
+  // title格式化
+  updateTitleAndWidth()
+  // 列权限更新
+  updateColumnAuth()
+}
+const visible = (item) => {
+  return item.visible && '1' == item.visible
+}
+const setAddDisplay = (value) => {
+  let data = []
+  gridOptions.data.forEach(item => {
+    if (visible(item)) {
+      item.addDisplay = value
+      data.push(item)
+    }
+  })
+  doEmits('add', data)
+}
+const doEmits = (name, data) => {
+  emits('checkBoxAll', {
+    checkBoxName: name,
+    isAll: true,
+    list: data
+  })
+}
+const setEditDisplay = (value) => {
+  let data = []
+  gridOptions.data.forEach(item => {
+    if (visible(item)) {
+      item.editDisplay = value
+      data.push(item)
+    }
+  })
+  doEmits('edit', data)
+}
+const updateColumnAuth = () => {
+  gridOptions.data.forEach(item => {
+    if (item.visible == '0') {
+      item.columnAuth = item.visible
+    }
+  })
+}
+const updateTitleAndWidth = () => {
+  gridOptions.data.forEach(item => {
+    let index = -1
+    if (item.title) {
+      item.title = item.title.trim()
+    }
+    if (item.title && (index = item.title.indexOf(' ')) != -1) {
+      item.title = item.title.substring(0, index)
+    }
+    if (item.title && (index = item.title.indexOf('（')) >= 1) {
+      item.title = item.title.substring(0, index)
+    }
+    if (item.title && (index = item.title.lastIndexOf('(')) >= 1) {
+      item.title = item.title.substring(0, index)
+    }
+  })
+}
+
+//表格配置项
+const gridOptions = reactive({
+  scrollX: {enabled: true, gt: 1},
+  scrollY: {enabled: true, gt: 1},
+  border: true,
+  showHeaderOverflow: true,
+  showOverflow: true,
+  height: 620,
+  align: "center",
+  size: 'mini',
+  rowConfig: {isHover: true, isCurrent: true},
+  editConfig: {
+    trigger: 'click',
+    mode: 'cell'
+  },
+  toolbarConfig: {
+    custom: true,
+    zoom: true,
+    slots: {
+      buttons: 'toolbar_buttons'
+    },
+    perfect: true,
+  },
+  columns: [
+    /* {
+       type: "expand",
+       title: "其他属性",
+       width: 80,
+       fixed: "left",
+       slots: {
+         content: 'content',
+       },
+     },*/
+    {
+      type: "seq",
+      width: 60,
+      title: "序号",
+      slots: {
+        default: 'seq'
+      },
+    },
+    {
+      title: '字段',
+      field: 'field',
+      fixed: 'left',
+      width: 200,
+      editRender: {props: {clearable: true}, name: '$input'},
+      filters: [{data: ''}],
+      filterMethod({option, row, column}) {
+        if (option.data) {
+          return XEUtils.toValueString(row[column.field]).toLowerCase().indexOf(option.data) > -1
+        }
+        return true
+      },
+      slots: {filter: 'label_filter'}
+    },
+    {
+      title: '字段描述',
+      field: 'label',
+      fixed: 'left',
+      width: 200,
+      filters: [{data: ''}],
+      filterMethod({option, row, column}) {
+        if (option.data) {
+          return XEUtils.toValueString(row[column.field]).toLowerCase().indexOf(option.data) > -1
+        }
+        return true
+      },
+      slots: {filter: 'label_filter'}
+    }, {
+      title: '标题',
+      field: 'title',
+      width: 200,
+      editRender: {props: {clearable: true}, name: '$input'},
+      filters: [{data: ''}],
+      filterMethod({option, row, column}) {
+        if (option.data) {
+          return XEUtils.toValueString(row[column.field]).toLowerCase().indexOf(option.data) > -1
+        }
+        return true
+      },
+      slots: {filter: 'label_filter'}
+    },
+    {
+      title: '显示',
+      field: 'visible',
+      align: 'center',
+      width: 80,
+      params: {
+        all: null
+      },
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      },
+    },
+    {
+      title: '新增',
+      field: 'addDisplay',
+      align: 'center',
+      visible: props.addVisible,
+      params: {
+        all: 1
+      },
+      width: 80,
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      }
+    }, {
+      title: '编辑',
+      field: 'editDisplay',
+      align: 'center',
+      width: 80,
+      visible: props.editVisible,
+      params: {
+        all: 0
+      },
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      }
+    },
+    {
+      title: '不保存',
+      field: 'tableSaveToOtherProp',
+      width: 100,
+      params: {
+        all: 0
+      },
+      slots: {
+        default: 'checkedBox_default'
+      }
+    }, {
+      title: '排序',
+      field: 'sortable',
+      align: 'center',
+      width: 100,
+      params: {
+        all: 0,
+        dictCode: 'order_by_type'
+      },
+      editRender: {props: {clearable: true, filterable: true}, name: '$select', options: dict.val('order_by_type')},
+    },
+    {
+      title: '数据字典',
+      field: 'dictCode',
+      params: {
+        dictCode: 'dictCode'
+      },
+      width: 200,
+      editRender: {props: {clearable: true, filterable: true}, name: '$select', options: dictType.val()}
+      // editRender: {props: {clearable: true, filterable: true}, name: 'input', options: dictType.val()}
+    }, {
+      title: '搜索类型',
+      field: 'selectType',
+      params: {
+        dictCode: 'select_type'
+      },
+      width: 120,
+      editRender: {props: {clearable: true, filterable: true}, name: '$select', options: dict.val('select_type')},
+    },
+    {
+      title: '控件类型',
+      field: 'selectDom',
+      /*params: {
+        dictCode: 'select_dom'
+      },*/
+      width: 180,
+      editRender: {props: {clearable: true, filterable: true}, name: '$select', options: dict.val('select_dom')}
+      /*slots: {
+        default: 'select_default'
+      },*/
+    },
+    {
+      title: '固定',
+      field: 'fixed',
+      params: {
+        dictCode: 'table_fixed'
+      },
+      editRender: {props: {clearable: true}, name: '$select', options: dict.val('table_fixed')},
+      width: 80,
+    },
+    {
+      title: '合计',
+      field: 'totalToOtherProp',
+      width: 100,
+      params: {
+        all: null
+      },
+      editRender: {
+        props: {clearable: true, filterable: true},
+        name: '$select',
+        options: dict.val('online_calculation_type')
+      }
+    },
+    {
+      title: '分组',
+      field: 'groupToOtherProp',
+      width: 100,
+      params: {
+        all: null
+      },
+      slots: {
+        default: 'checkedBox_default'
+      }
+    },
+    {
+      title: '分组合计',
+      field: 'groupTotalToOtherProp',
+      width: 100,
+      editRender: {
+        props: {clearable: true, filterable: true},
+        name: '$select',
+        options: dict.val('online_calculation_type')
+      }
+    },
+    {
+      title: '行合并',
+      field: 'mergeFlag',
+      width: 100,
+      params: {
+        all: null
+      },
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      },
+    },
+    {
+      title: '可列配置',
+      field: 'columnAuth',
+      align: 'center',
+      width: 80,
+      params: {
+        all: null
+      },
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      },
+    },
+    {
+      title: '对齐',
+      field: 'align',
+      params: {
+        dictCode: 'align'
+      },
+      editRender: {props: {clearable: true}, name: '$select', options: dict.val('align')},
+      width: 80,
+    },
+    {
+      title: '列宽',
+      width: 80,
+      field: 'width',
+      editRender: {props: {clearable: true}, name: '$input'},
+    },
+    {
+      title: '列宽拖动',
+      field: 'resizable',
+      width: 80,
+      params: {
+        all: null
+      },
+      slots: {
+        header: 'checkedBox_header',
+        default: 'checkedBox_default'
+      },
+    },
+    {
+      title: 'formatter',
+      field: 'formatter',
+      width: 168,
+      slots: {
+        default: 'dialog_default'
+      }
+    }, {
+      title: '搜索顺序',
+      field: 'searchSort',
+      width: 100,
+      editRender: {name: '$input', props: {type: 'number'}},
+    },
+    {
+      title: '搜索默认值',
+      field: 'valueSEARCHToOtherProp',
+      width: 100,
+      editRender: {name: '$input'},
+    },
+    {
+      title: '不可清空',
+      field: 'clearableSEARCHToOtherProp',
+      width: 100,
+      params: {},
+      slots: {
+        default: 'checkedBox_default'
+      }
+    },
+    {
+      title: '时间',
+      field: 'toDateSEARCHToOtherProp',
+      width: 80,
+      params: {},
+      slots: {
+        default: 'checkedBox_default'
+      }
+    },
+    {
+      title: '搜索span',
+      field: 'spanSEARCHToOtherProp',
+      width: 110,
+      editRender: {name: '$input', props: {clearable: true, min: 2, max: 24, type: 'number'},},
+    },
+    {
+      title: '搜索label',
+      field: 'titleSEARCHToOtherProp',
+      width: 120,
+      editRender: {name: '$input', props: {clearable: true}}
+    },
+    {
+      title: '搜索别名',
+      field: 'tableNameSEARCHToOtherProp',
+      width: 100,
+      editRender: {name: '$input', props: {clearable: true}}
+    },
+    {
+      title: '操作',
+      width: 100,
+      fixed: 'right',
+      align: 'center',
+      slots: {
+        default: 'operate'
+      }
+    }
+  ],
+  data: [],
+  groupColumns: [],
+})
+//表格拖动更新
+const updateSort = () => {
+  nextTick(() => {
+    if (!vexGridRef.value) {
+      return
+    }
+    //el绑定元素需要找到vxe的DOM下的tbody元素
+    Sortable.create(vexGridRef.value.$el.querySelector('.body--wrapper>.vxe-table--body tbody'), {
+      animation: 200,//拖拽动画过渡时间
+      sort: true,
+      handle: '.col--seq', //必须设置该属性，属性值为你要拖动的该单元格的样式名
+      // 元素被选中
+      onStart: function (/**Event*/evt) {
+        //关闭所有展开行
+        vexGridRef.value.clearRowExpand()
+        evt.oldIndex  // element index within parent
+      },
+      // 结束拖拽
+      onEnd: function (/**Event*/{oldIndex, newIndex, item}) {
+        //evt.to;    // 目标列表
+        //evt.from;  // 来自以前的列表
+        //evt.oldIndex;  // 元素在旧父元素中的旧索引
+        //evt.newIndex;  // 元素在新父元素中的新索引
+        //evt.clone // 克隆元素
+        //evt.pullMode;  // 当项在另一个可排序中时："clone"(克隆)，"true"(移动)
+        let rowNode = vexGridRef.value.getRowNode(item);
+        newIndex = rowNode.index - oldIndex + newIndex
+
+        const list = JSON.parse(JSON.stringify(gridOptions.data)) //保存旧数据
+        const targetRow = list.splice(rowNode.index, 1)[0] //保存移动的元素并删除原列表中移动的元素
+        list.splice(newIndex, 0, targetRow) //插入到目标新索引中
+        const newsArr = JSON.parse(JSON.stringify(list)) //重新赋值数组
+        //将新数据重新排序
+        for (let i = 0; i < newsArr.length; i++) {
+          newsArr[i].sort = i + 1
+        }
+        gridOptions.data = newsArr
+      },
+    })
+  })
+}
+
+onMounted(() => {
+  updateSort()
+})
+const enterFilterEvent = ({$panel}) => {
+  $panel.confirmFilter()
+}
+
+// 子组件调用父组件
+const emits = defineEmits(['checkBoxChange']) //声明 emits
+function getColumns() {
+  return gridOptions.data
+}
+
+function getGroupColumnData() {
+  return gridOptions.groupColumns
+}
+
+function setGroupColumnData(value) {
+  gridOptions.groupColumns = value.groupColumns
+}
+
+// 对外暴露
+defineExpose({
+  setData, updateData, gridOptions, vexGridRef, getColumns, setAddDisplay, setEditDisplay, setShow, getGroupColumnData
+})
+</script>
+<style>
+.expand-wrapper {
+  padding: 20px;
+}
+
+.test {
+  padding: 80px;
+}
+</style>