olp-table 5.3.4 → 5.3.5

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

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

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