olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,340 @@
+<template>
+  <div>
+    <vxe-grid
+        v-bind="option"
+        v-if="show"
+        ref="tableRef"
+        @edit-closed="editClosedEvent"
+        :data="configData.form[props.type].filter(o => o.alignMode == props.alignMode)">
+      <template #toolbar_buttons>
+        <el-button @click="onAdd">新增</el-button>
+      </template>
+      <template #switch_default="{ row,column }">
+        <el-switch
+            active-value="1"
+            inactive-value="0"
+            v-model="row[column.field]"
+        />
+      </template>
+      <template #checkedBox_default="{ column, row,rowIndex }">
+        <el-checkbox v-model="row[column.field]" :disabled="row['code'] == 'add' || row['code'] == 'edit'"
+                     @change="checkbox" true-value="1"
+                     false-value="0"/>
+      </template>
+      <template #codemirror="{ row,column }">
+        <olCodemirrorTag v-model="row[column.field]"/>
+      </template>
+      <template #operation="{ row,rowIndex }">
+        <el-button @click="removeBtn(row, rowIndex)" type="danger" circle plain>
+          <el-icon>
+            <Delete/>
+          </el-icon>
+        </el-button>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+<script setup>
+import {Delete} from '@element-plus/icons-vue'
+import {defineExpose, defineProps, inject, nextTick, onMounted, reactive, ref} from "vue";
+import {getNewArrData, updateSortCall} from "@/utils/TableSortUtil";
+import VXETable from "vxe-table";
+
+const configData = inject("configData")
+const updateBtnData = inject('updateBtnData', Function, true)
+const props = defineProps({
+  type: {
+    required: true,
+    type: String
+  }, alignMode: {
+    required: true,
+    type: String
+  },
+})
+const tableRef = ref();
+const show = ref(true)
+const option = reactive({
+  expandConfig: {
+    trigger: "cell"
+  },
+  rowConfig: {
+    isCurrent: true
+  },
+  align: 'center',
+  editConfig: {
+    trigger: 'click',
+    mode: 'cell',
+    showStatus: true,
+    beforeEditMethod: ({column, row}) => {
+      const field = column.field
+      if ((row.code == 'add' || row.code == 'edit') && field == "code") {
+        return false
+      }
+      return true
+    }
+  },
+  pagerConfig: {
+    enabled: false
+  },
+  toolbarConfig: {
+    slots: {
+      buttons: 'toolbar_buttons'
+    },
+  },
+  scrollX: {enabled: true, gt: 1},
+  scrollY: {enabled: true, gt: 1},
+  height: 350,
+  index: true,
+  searchBtn: false,
+  emptyBtn: false,
+  menu: false,
+  header: false,
+  columns: [
+    /* {
+       title: '序号',
+       field: 'sort',
+       width: 80,
+     },*/
+    {
+      type: "seq",
+      className: 'move',
+      width: 60,
+      title: "序号",
+    },
+    {
+      title: '按钮名称',
+      field: 'name',
+      editRender: {name: 'input'},
+    },
+    {
+      title: '定义编码',
+      field: 'code',
+      editRender: {
+        name: 'input', events: {
+          change: ({row}) => {
+            setTimeout(() => {
+              if (row.code != '') {
+                row.clickCallBackMethod = row.code + "ButClick"
+              } else {
+                row.clickCallBackMethod = ''
+              }
+            }, 100)
+          }
+        }
+      },
+    }, {
+      title: '图标',
+      field: 'icon',
+      editRender: {name: 'input'},
+    },
+    {
+      title: '主题',
+      field: 'status',
+      editRender: {name: 'input'},
+    },
+    {
+      title: '是否启用表单',
+      field: 'isForm',
+      slots: {
+        // 使用插槽模板渲染
+        default: 'checkedBox_default',
+      }
+    },
+    {
+      title: '单击回调方法',
+      visible: props.type == 'toolButOptions',
+      field: 'clickCallBackMethod',
+    },
+    {
+      title: '自定义函数',
+      field: 'customFunction',
+      slots: {
+        // 使用插槽模板渲染
+        default: 'codemirror',
+      },
+    },
+    {
+      title: '参数1',
+      field: 'beforeFunction',
+      slots: {
+        // 使用插槽模板渲染
+        default: 'codemirror',
+      },
+    },
+    {
+      title: '参数2',
+      field: 'afterFunction',
+      slots: {
+        // 使用插槽模板渲染
+        default: 'codemirror',
+      },
+    },
+    {
+      title: 'json',
+      field: 'json',
+      slots: {
+        // 使用插槽模板渲染
+        default: 'codemirror',
+      },
+    },
+    {
+      title: '默认',
+      children: [
+        {
+          title: '禁用',
+          field: 'defaultDisabled',
+          visible: props.type == 'toolButOptions',
+          width: 80,
+          slots: {
+            // 使用插槽模板渲染
+            default: 'switch_default',
+          },
+        }, {
+          title: '显示',
+          field: 'defaultShow',
+          visible: props.type == 'toolButOptions',
+          width: 80,
+          slots: {
+            // 使用插槽模板渲染
+            default: 'switch_default',
+          }
+        }
+      ],
+    },
+    {
+      title: '回调方法',
+      children: [
+        {
+          title: '单击(click)',
+          field: 'clickCallBackMethod',
+          visible: props.type != 'toolButOptions',
+        }, {
+          title: '显示(show)',
+          field: 'showCallBack',
+          visible: props.type != 'toolButOptions',
+          slots: {
+            // 使用插槽模板渲染
+            default: 'codemirror',
+          },
+        }, {
+          title: '禁用(disabled)',
+          field: 'disabledCallBack',
+          visible: props.type != 'toolButOptions',
+          slots: {
+            // 使用插槽模板渲染
+            default: 'codemirror',
+          },
+        }
+      ],
+    }, {
+      title: '操作',
+      field: 'operation',
+      width: 80,
+      slots: {
+        // 使用插槽模板渲染
+        default: 'operation',
+      }
+    }
+  ]
+});
+const checkbox = (params) => {
+  console.log(params)
+}
+const onAdd = () => {
+  let newBtn = {
+    name: '',
+    code: '',
+    defaultShow: '1',
+    deleted: 0,
+    isForm: 0,
+    seq: getDataSource().length + 1,
+    sort: getDataSource().length + 1
+  }
+  if (props.alignMode) {
+    newBtn.alignMode = props.alignMode;
+  }
+  configData.form[props.type].push(newBtn)
+  loadData();
+  setTimeout(() => {
+    tableRef.value.setEditRow(tableRef.value.getData(newBtn.sort), 'name')
+  }, 500)
+}
+const removeBtn = (row, rowIndex) => {
+  configData.form[props.type].splice(rowIndex, 1)
+  let index = 0;
+  for (var obj of configData.form[props.type.replaceAll("Options", "")]) {
+    if (obj == row.code) {
+      configData.form[props.type.replaceAll("Options", "")].splice(index, 1)
+      return
+    }
+    index++;
+  }
+}
+const editClosedEvent = ({row, column}) => {
+  const $table = tableRef.value
+  if ($table) {
+    const field = column.field
+    const cellValue = row[field]
+    // 判断单元格值是否被修改
+    if ($table.isUpdateByRow(row, field)) {
+      setTimeout(() => {
+        VXETable.modal.message({
+          content: `局部保存成功！ ${field}=${cellValue}`,
+          status: 'success'
+        })
+        // 局部更新单元格为已保存状态
+        $table.reloadRow(row, null, field)
+      }, 300)
+    }
+  }
+  updateBtnData(configData.form[props.type], props.type)
+}
+
+function getDataSource() {
+  if (props.alignMode) {
+    return configData.form[props.type].filter(o => o.alignMode == props.alignMode)
+  }
+  return configData.form[props.type];
+}
+
+function loadData() {
+  tableRef.value.reloadData(getDataSource())
+}
+
+function updateSort(oldIndex, newIndex) {
+  let newsArr = getNewArrData(oldIndex, newIndex, getDataSource())
+  let index = 0;
+  for (const obj of newsArr) {
+    obj.sort = ++index;
+  }
+  show.value = false;
+  let reverseArr = configData.form[props.type].filter(o => o.alignMode != props.alignMode)
+  for (let reverseArrElement of reverseArr) {
+    newsArr.push(reverseArrElement)
+  }
+  configData.form[props.type] = newsArr
+  nextTick(() => {
+    show.value = true;
+    nextTick(() => {
+      updateSortCall(tableRef, updateSort)
+    })
+  })
+}
+
+onMounted(() => {
+  nextTick(() => {
+    updateSortCall(tableRef, updateSort)
+  })
+})
+defineExpose({
+  loadData
+})
+
+</script>
+
+<style lang="scss">
+.newBtn {
+  background: #f2f8fe
+}
+
+</style>

package/src/views/table/add-or-edit/config/table-config/btn-sort.vue

@@ -0,0 +1,132 @@
+<template>
+  <div style="height: 55vh">
+    <vxe-grid
+        :key="key"
+        v-if="tableShow"
+        v-bind="option"
+        ref="sortTableRef"
+        row-class-name="default-row"
+        :data="list">
+      <template #sort-slot>
+        <div style="display: flex;justify-content: center;align-items: center">
+          <el-icon>
+            <SemiSelect/>
+          </el-icon>
+        </div>
+      </template>
+    </vxe-grid>
+  </div>
+</template>
+<script setup>
+import {SemiSelect} from '@element-plus/icons-vue'
+import Sortable from "sortablejs";
+import {defineExpose,defineProps, nextTick, onMounted, reactive, ref} from "vue";
+
+const props = defineProps({
+  list: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  }
+})
+const list = reactive(JSON.parse(JSON.stringify(props.list)));
+const sortTableRef = ref();
+const sorter = ref()
+const tableShow = ref(true)
+const key = ref(0)
+
+const option = reactive({
+  height: 'auto',
+  columns: [
+    {
+      width: 100,
+      title: '',
+      slots: {
+        default: 'sort-slot'
+      }
+    },
+    {
+      title: '序号',
+      width: 100,
+      field: 'form.sortSeq',
+    },
+    {
+      title: '名称',
+      field: 'form.name',
+      search: true,
+    },
+    {
+      title: '编码',
+      field: 'form.code',
+      search: true,
+    }
+  ]
+});
+
+
+const startSort = () => {
+  let el = sortTableRef.value.$el.querySelector(".vxe-table--body-wrapper tbody")
+  sorter.value = Sortable.create(el, {
+    animation: 150,
+    sort: true,
+    handle: '.vxe-body--row',
+    // 结束拖拽
+    onEnd: function ({oldIndex, newIndex}) {
+      console.log(list)
+      if (oldIndex == newIndex) return;
+      let dire = newIndex > oldIndex ? 1 : -1; // 1: 向下, -1: 向上
+      list[oldIndex].form.sortSeq = list[newIndex].form.sortSeq
+      // 从拖拽位置开始
+      let cur = oldIndex
+      while (cur != newIndex) {
+        cur += dire
+        list[cur].form.sortSeq -= dire // 向反方向挪动一个单位
+      }
+      //调整数据顺序，防止数据混乱
+      cur = oldIndex
+      while (cur != newIndex) {
+        let temp = list[cur];
+        list[cur] = list[cur + dire];
+        list[cur + dire] = temp;
+        cur += dire
+      }
+    },
+
+  })
+}
+const setList = (data) => {
+  key.value++
+  nextTick(() => {
+    list.length = 0
+    for (let item of data) {
+      item.form.sortSeq = item.form.seq
+      list.push(item)
+    }
+    sortTableRef.value.reloadData(list)
+    startSort()
+  })
+}
+
+onMounted(() => {
+  startSort()
+})
+
+defineExpose({
+  list,
+  setList,
+  tableShow
+})
+
+</script>
+
+<style>
+.default-row {
+  cursor: move;
+  user-select: none;
+}
+
+.default-row:hover {
+  background-color: rgba(192, 192, 192, .1);
+}
+</style>