olp-table 5.3.4 → 5.3.5

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

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