olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,475 @@
+<template>
+  <el-dialog
+      v-model="show"
+      title="配置中心"
+      width="90%"
+      style="height: 600px;"
+      align-center
+  >
+    <vxe-grid v-bind="gridOptions" ref="vexGridRef">
+      <template #toolbar_buttons>
+        <vxe-button status="success" @click="saveEvent">保存表头</vxe-button>
+        <vxe-button status="success" @click="delEvent">取消上级表头</vxe-button>
+      </template>
+      <!-- 通用多选框 -->
+      <template #checkedBox_header="{ column }">
+        <div style="display: flex;align-items: center;">
+          <el-checkbox v-model="column.params.all" @change="checkBoxClick(column,)"
+                       :disabled="column.params.all == true && column.params.disabled == 'sss'"><span
+              style="margin-left: 5px;">{{ column.title }} </span></el-checkbox>
+          <i v-if="column.children" class="vxe-icon-edit"
+             @click="menuClickEvent({menu:'edit',column: column})"/>
+          <i v-if="column.children" class="vxe-icon-add"
+             @click="menuClickEvent({menu:'add',column: column})"/>
+          <i v-if="column.children" class="vxe-icon-delete"
+             @click="menuClickEvent({menu:'del',column: column})"/>
+          <i v-else-if="column.params.parentField" class="vxe-icon-delete"
+             @click="menuClickEvent({menu:'oneDel',column: column})"/>
+        </div>
+      </template>
+    </vxe-grid>
+    <div v-if="gridOptions.selectedColumns.length >= 1">
+      <span>表头信息</span>
+      <el-form style="margin-top: 20px" :model="gridOptions.form" label-width="80px">
+        <el-form-item label="表头名称" prop="title" :span="24">
+          <el-input v-model="gridOptions.form.title"/>
+        </el-form-item>
+      </el-form>
+    </div>
+    <template #footer>
+      <span>
+        <vxe-button @click="close">取消</vxe-button>
+        <vxe-button status="primary" @click="save(true)">保存</vxe-button>
+      </span>
+    </template>
+
+    <el-dialog v-model="showPopup" title="表头信息" :width="600" :height="300" show-zoom>
+      <el-form style="margin-top: 20px" :model="gridOptions.form" label-width="80px">
+        <el-form-item label="表头名称" prop="title" :span="24">
+          <el-input v-model="gridOptions.form.title"/>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+      <span>
+        <vxe-button @click="editClose">取消</vxe-button>
+        <vxe-button status="primary" @click="editSave(true)">保存</vxe-button>
+      </span>
+      </template>
+    </el-dialog>
+
+  </el-dialog>
+</template>
+<script setup>
+import {ref, reactive, defineExpose, nextTick, onMounted} from "vue"
+import {storeDict} from "@/store/dict";
+import {useMessage} from "@/utils/message";
+
+const show = ref(false)
+const formShow = ref(false)
+const showPopup = ref(false)
+const vexGridRef = ref()
+const dict = storeDict();
+// 子组件调用父组件
+const emits = defineEmits(['headerCommit']) //声明 emits
+const close = () => {
+  show.value = false
+}
+const save = () => {
+  let columns = gridOptions.columns;
+  let rows = getColumns(columns)
+  console.log('rows:', JSON.stringify(rows))
+  emits('ok', {
+    groupColumns: rows
+  })
+  close()
+}
+const getColumns = (columns) => {
+  let rows = []
+  for (const column of columns) {
+    let row = {
+      id: column.id,
+      field: column.field,
+      title: column.title
+    }
+    if (column.children) {
+      row.children = getColumns(column.children)
+    }
+    rows.push(row)
+  }
+  return rows;
+}
+const editClose = () => {
+  showPopup.value = false
+}
+const editSave = () => {
+  let columns = gridOptions.columns;
+  setColumnTitle(columns)
+  showPopup.value = false
+  vexGridRef.value.loadColumn(gridOptions.columns)
+}
+const setColumnTitle = (columns) => {
+  for (let col of columns) {
+    if (col.field == gridOptions.form.field) {
+      col.title = gridOptions.form.title
+      gridOptions.form.title = ''
+    } else if (col.children) {
+      setColumnTitle(col.children)
+    }
+  }
+}
+const clearCheckAll = (columns) => {
+  gridOptions.selectedColumns = []
+  for (const column of columns) {
+    if (column.params.all == true) {
+      column.params.all = false
+    }
+    if (column.children) {
+      clearCheckAll(column.children)
+    }
+  }
+  vexGridRef.value.loadColumn(gridOptions.columns)
+}
+const menuClickEvent = ({menu, column}) => {
+  // eslint-disable-next-line no-case-declarations
+  let columns = gridOptions.columns;
+  switch (menu) {
+    case 'edit':
+      if (!column.children) {
+        useMessage().error("当前表头不可以编辑！")
+        return
+      }
+      gridOptions.form = column
+      showPopup.value = true
+      break
+    case 'del':
+      let rows = del(column, columns)
+      if (rows && rows.length >= 1) {
+        columns.push(...rows)
+      }
+      break
+    case 'add' :
+      // eslint-disable-next-line no-case-declarations
+      let addColumns = []
+      addDel(column, columns, addColumns)
+      if (addColumns && addColumns.length >= 1) {
+        addChildren(column, columns, addColumns)
+      }
+      delTableFieldNull(columns)
+      break
+    case 'oneDel' :
+      // eslint-disable-next-line no-case-declarations
+      let addColumns1 = []
+      oneDel(column, columns, addColumns1)
+      if (addColumns1 && addColumns1.length >= 1) {
+        columns.push(...addColumns1)
+      }
+      delTableFieldNull(columns)
+      gridOptions.columns.sort((a, b) => a.sort - b.sort);
+      break
+  }
+  clearCheckAll(gridOptions.columns)
+}
+const oneDel = (column, columns, addColumns) => {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    if (column.field == row.field) {
+      row.params.parentField = undefined
+      addColumns.push(row)
+      columns.splice(i, 1)
+      return
+    }
+    if (row.children) {
+      oneDel(column, row.children, addColumns)
+    }
+  }
+}
+// 往分组表头加入标题
+const addDel = (column, columns, addColumns) => {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    if (!row.children && row.params.all == true) {
+      row.params.parentField = undefined
+      addColumns.push(row)
+      columns.splice(i, 1)
+      --i
+      continue
+    }
+    if (row.children) {
+      addDel(column, row.children, addColumns)
+    }
+  }
+}
+const delTableFieldNull = (columns) => {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    if (!row.tableField && (!row.children || row.children.length == 0)) {
+      columns.splice(i, 1)
+      --i
+      continue
+    }
+    if (row.children) {
+      delTableFieldNull(row.children)
+    }
+  }
+}
+const addChildren = (column, columns, addColumns) => {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    // 当前加入表头
+    if (row.field == column.field) {
+      row.children.push(...addColumns)
+      return
+    }
+    if (row.children) {
+      addChildren(column, row.children, addColumns)
+    }
+  }
+
+}
+// 当前 模板
+const del = (column, columns) => {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    if (row.field == column.field) {
+      columns.splice(i, 1)
+      return row.children;
+    }
+    if (row.children) {
+      let rows = del(column, row.children);
+      if (rows && rows.length >= 1) {
+        row.children.push(...rows)
+      }
+    }
+  }
+}
+const del1 = (column) => {
+  // eslint-disable-next-line no-case-declarations
+  let columns = column.children;
+  // eslint-disable-next-line no-case-declarations
+  let addColumns = []
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i]
+    if (row.params.all != true) {
+      addColumns.push(row)
+      columns.splice(i, 1)
+      --i;
+    }
+  }
+  let rows = gridOptions.columns;
+  for (let i = 0; i < rows.length; i++) {
+    let row = rows[i]
+    if (row.field == column.field) {
+      row.children = columns
+      rows.splice(i + 1, 0, ...addColumns)
+      break
+    }
+  }
+}
+
+const delChildren = (columns, column) => {
+  for (let i = 0; i < columns.length; i++) {
+    let col = columns[i];
+    if (column.field == col.field) {
+      columns.splice(i, 1)
+      break
+    }
+    if (col.children) {
+      delChildren(col.children, column)
+    }
+  }
+}
+const delEvent = () => {
+  let columns = gridOptions.columns;
+  let addColumns = []
+  let column = {}
+  addDel(column, columns, addColumns)
+  columns.push(...addColumns)
+  delTableFieldNull(columns)
+  clearCheckAll(gridOptions.columns)
+  gridOptions.columns.sort((a, b) => a.sort - b.sort);
+}
+const saveEvent = () => {
+  let column = getColumn();
+  column.title = gridOptions.form.title
+  gridOptions.form.title = ''
+  const uuid = require('uuid');
+  const uniqueId = uuid.v4();
+  column.field = uniqueId
+  let rows = []
+  let columns = JSON.parse(JSON.stringify(gridOptions.columns));
+
+  let start = -1;
+  // for (let i = 0; i < columns.length; i++) {
+  //   let row = columns[i];
+  //   if (row.params.all == true) {
+  //     row.params.disabled = true
+  //     row.params.parentField = column.field
+  //     rows.push(row)
+  //     columns.splice(i, 1)
+  //     if (start < i) {
+  //       start = i;
+  //     }
+  //     i = i - 1
+  //   }
+  // }
+  column.children = []
+  gridOptions.hasAdd = true
+  getSelectedColumn(columns, column);
+  // column.children = rows
+  // columns.splice(start, 0, column)
+  gridOptions.columns = columns
+  vexGridRef.value.loadColumn(columns)
+  formShow.value = false
+  showPopup.value = false
+  clearCheckAll(gridOptions.columns)
+}
+
+function getSelectedColumn(columns, column) {
+  for (let i = 0; i < columns.length; i++) {
+    let row = columns[i];
+    // 把子表头赋值给父表头
+    if (row.params.all == true) {
+      row.params.disabled = true
+      row.params.all = false
+      row.params.parentField = column.field
+      column.children.push(row)
+      // 删除表头信息
+      columns.splice(i, 1)
+      if (gridOptions.hasAdd) {
+        gridOptions.hasAdd = false
+        // 添加表头信息
+        columns.splice(i, 0, column)
+      }
+      --i;
+    }
+    if (row.children) {
+      getSelectedColumn(row.children, column)
+    }
+  }
+}
+
+function setColumn(columns) {
+  if (!columns) {
+    return
+  }
+  gridOptions.selectedColumns = []
+  nextTick(() => {
+    show.value = true;
+    showPopup.value = false
+    columns = JSON.parse(JSON.stringify(columns));
+    // table_fixed
+    columns = addColumnSlots(columns)
+    gridOptions.columns = columns
+    // arr = addColumnSlots(arr)
+    // gridOptions.columns = arr
+    //vexGridRef.value.loadColumn(gridOptions.columns)
+  })
+}
+
+const addColumnSlots = (rows) => {
+  let columns = []
+  for (let row of rows) {
+    if (row.visible == '0') {
+      continue
+    }
+    if (row.fixed) {
+      row.fixed = getDictLabelByValue('table_fixed', row.fixed)
+    }
+    row = Object.assign({}, getColumn(), row)
+    row.minWidth = row.width
+    columns.push(row)
+    if (row.children) {
+      row.tableField = undefined
+      row.children = addColumnSlots(row.children)
+      continue
+    }
+  }
+  return columns
+}
+const getColumn = () => {
+  return {
+    params: {
+      all: '0',
+      disabled: false
+    },
+    slots: {
+      header: 'checkedBox_header'
+    }
+  }
+}
+const checkBoxClick = (column) => {
+  formShow.value = column.params.all
+  gridOptions.selectedColumns = []
+  setSelectedColumns(gridOptions.columns)
+}
+const setSelectedColumns = (columns) => {
+  for (const row of columns) {
+    if (row.params.all == true) {
+      gridOptions.selectedColumns.push(row)
+    }
+    if (row.children) {
+      setSelectedColumns(row.children)
+    }
+  }
+}
+const getDisabled = (val) => {
+  if (val.params.all == true) {
+    return true
+  }
+  return false;
+}
+
+const getDictLabelByValue = (dictCode, val) => {
+  for (const option of dict.val(dictCode)) {
+    if (option.value == val) {
+      return option.label
+    }
+  }
+  return val
+}
+//表格配置项
+const gridOptions = reactive({
+  border: true,
+  showHeaderOverflow: false,
+  height: 0,
+  align: "center",
+  columnConfig: {
+    resizable: true
+  },
+  toolbarConfig: {
+    slots: {
+      buttons: 'toolbar_buttons'
+    }
+  },
+  selectedColumns: [],
+  columns: [],
+  data: [],
+  form: {
+    title: ''
+  },
+  curColumnIndex: 0,
+  // 判断是否添加表头信息
+  hasAdd: true,
+})
+onMounted(() => {
+  setColumn()
+})
+// 对外暴露
+defineExpose({
+  setColumn
+})
+</script>
+<style>
+.expand-wrapper {
+  padding: 20px;
+}
+
+.test {
+  padding: 80px;
+}
+
+.vxe-icon-edit, .vxe-icon-add, .vxe-icon-delete {
+  margin: 5px;
+  cursor: pointer
+}
+</style>