olp-table 5.3.4 → 5.3.5

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

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