olp-table 5.3.4 → 5.3.5

package/src/utils/tree.js

@@ -1,54 +0,0 @@
-/**
- * 构造树型结构数据
- * @param {*} data 数据源
- * @param {*} id id字段 默认 'id'
- * @param {*} parentId 父节点字段 默认 'parentId'
- * @param {*} children 孩子节点字段 默认 'children'
- */
-export const handleTree = (data, id, parentId, children) => {
-    if (!Array.isArray(data)) {
-        console.warn('data must be an array')
-        return []
-    }
-    const config = {
-        id: id || 'id',
-        parentId: parentId || 'parentId',
-        children: children || 'children'
-    }
-    const childrenListMap = {}
-    const nodeIds = {}
-    const tree = []
-
-    for (const d of data) {
-        const parentId = d[config.parentId]
-        if (childrenListMap[parentId] == null) {
-            childrenListMap[parentId] = []
-        }
-        nodeIds[d[config.id]] = d
-        childrenListMap[parentId].push(d)
-    }
-
-    for (const d of data) {
-        const parentId = d[config.parentId]
-        if (nodeIds[parentId] == null) {
-            tree.push(d)
-        }
-    }
-
-    for (const t of tree) {
-        adaptToChildrenList(t)
-    }
-
-    function adaptToChildrenList(o) {
-        if (childrenListMap[o[config.id]] !== null) {
-            o[config.children] = childrenListMap[o[config.id]]
-        }
-        if (o[config.children]) {
-            for (const c of o[config.children]) {
-                adaptToChildrenList(c)
-            }
-        }
-    }
-
-    return tree
-}

package/src/utils/util.js

@@ -1,127 +0,0 @@
-/**
- * 过滤对象中为空的属性
- * @param obj
- * @returns {*}
- */
-export function filterObj(obj) {
-    if (!(typeof obj == 'object')) {
-        return;
-    }
-
-    for ( let key in obj) {
-        if (obj.hasOwnProperty(key)
-            && (obj[key] == null || obj[key] == undefined || obj[key] === '')) {
-            delete obj[key];
-        }
-    }
-    return obj;
-}
-/** 用于js增强事件，运行JS代码，可以传参 */
-// options 所需参数：
-//    参数名         类型            说明
-//    vm             VueComponent    vue实例
-//    event          Object          event对象
-//    jsCode         String          待执行的js代码
-//    errorMessage   String          执行出错后的提示（控制台）
-export function jsExpand(options = {}) {
-
-    // 绑定到window上的keyName
-    let windowKeyName = 'J_CLICK_EVENT_OPTIONS'
-    if (typeof window[windowKeyName] != 'object') {
-        window[windowKeyName] = {}
-    }
-
-    // 随机生成JS增强的执行id，防止冲突
-    let id = randomString(16, 'qwertyuioplkjhgfdsazxcvbnm'.toUpperCase())
-    // 封装按钮点击事件
-    let code = `
-    (function (o_${id}) {
-      try {
-        (function (globalEvent, vm) {
-          ${options.jsCode}
-        })(o_${id}.event, o_${id}.vm)
-      } catch (e) {
-        o_${id}.error(e)
-      }
-      o_${id}.done()
-    })(window['${windowKeyName}']['EVENT_${id}'])
-  `
-    // 创建script标签
-    const script = document.createElement('script')
-    // 将需要传递的参数挂载到window对象上
-    window[windowKeyName]['EVENT_' + id] = {
-        vm: options.vm,
-        event: options.event,
-        // 当执行完成时，无论如何都会调用的回调事件
-        done() {
-            // 执行完后删除新增的 script 标签不会撤销执行结果（已产生的结果不会被撤销）
-            script.outerHTML = ''
-            delete window[windowKeyName]['EVENT_' + id]
-        },
-        // 当js运行出错的时候调用的事件
-        error(e) {
-            console.group(`${options.errorMessage || '用户自定义JS增强代码运行出错'}（${new Date()}）`)
-            console.error(e)
-            console.groupEnd()
-        }
-    }
-    // 将事件挂载到document中
-    script.innerHTML = code
-    document.body.appendChild(script)
-}
-/**
- * 随机生成字符串
- * @param length 字符串的长度
- * @param chats 可选字符串区间（只会生成传入的字符串中的字符）
- * @return string 生成的字符串
- */
-export function randomString(length, chats) {
-    if (!length) length = 1
-    if (!chats) chats = '0123456789qwertyuioplkjhgfdsazxcvbnm'
-    let str = ''
-    for (let i = 0; i < length; i++) {
-        let num = randomNumber(0, chats.length - 1)
-        str += chats[num]
-    }
-    return str
-}
-/**
- * 随机生成数字
- *
- * 示例：生成长度为 12 的随机数：randomNumber(12)
- * 示例：生成 3~23 之间的随机数：randomNumber(3, 23)
- *
- * @param1 最小值 | 长度
- * @param2 最大值
- * @return int 生成后的数字
- */
-export function randomNumber() {
-    // 生成 最小值 到 最大值 区间的随机数
-    const random = (min, max) => {
-        return Math.floor(Math.random() * (max - min + 1) + min)
-    }
-    if (arguments.length === 1) {
-        let [length] = arguments
-        // 生成指定长度的随机数字，首位一定不是 0
-        let nums = [...Array(length).keys()].map((i) => (i > 0 ? random(0, 9) : random(1, 9)))
-        return parseInt(nums.join(''))
-    } else if (arguments.length >= 2) {
-        let [min, max] = arguments
-        return random(min, max)
-    } else {
-        return Number.NaN
-    }
-}
-
-export function sleep(time) {
-    return new Promise((resolve) => setTimeout(resolve, time));
-}
-/**
- * 转换为大小驼峰命名
- * abc-efg => abcEfg
- */
-export const toCamelCase = str => {
-    return str.indexOf('_') !== -1
-        ? str.replace(/_([a-zA-Z])/g, ($0, $1) => $1.toUpperCase())
-        : str
-}

package/src/views/Test/index.vue

@@ -1,77 +0,0 @@
-<template>
-  <div>
-    <vxe-form
-        :data="formData"
-        :items="formItems"
-        titleColon
-        @submit="submitEvent"
-        @reset="resetEvent">
-      <template #myregion="{ data, field }">
-        <el-switch v-model="data[field]"></el-switch>
-      </template>
-    </vxe-form>
-  </div>
-</template>
-
-<script setup>
-import { ref, reactive } from 'vue'
-import { VXETable } from 'vxe-table'
-
-
-const formData = reactive({
-  name: '',
-  nickname: '',
-  sex: '0',
-  role: '',
-  age: 22,
-  val1: [],
-  val2: false,
-  val3: '',
-  flag: false,
-  region: true
-})
-
-const formItems = ref([
-  {
-    title: '左侧',
-    span: 12,
-    children: [
-      { field: 'name', title: '名称', span: 8, itemRender: { name: 'VxeInput', props: { placeholder: '请输入名称' } } },
-      { field: 'sex', title: '性别', span: 8, itemRender: { name: 'VxeSelect', options: [{ value: '0', label: '女' }, { value: '1', label: '男' }], props: { placeholder: '请选择性别' } } },
-      { field: 'role', title: '角色', span: 8, itemRender: { name: 'VxeInput', props: { placeholder: '请输入角色' } } },
-      { field: 'age', title: '年龄', span: 24, itemRender: { name: 'VxeInput', props: { type: 'number', placeholder: '请输入年龄' } } },
-      { field: 'val1', title: '复选框-组', span: 12, itemRender: { name: 'VxeCheckboxGroup', options: [{ label: '爬山', value: '11' }, { label: '健身', value: '22' }] } },
-      { field: 'val2', title: '复选框', span: 12, itemRender: { name: 'VxeCheckbox' } },
-      { field: 'val3', title: '单选框', span: 12, itemRender: { name: 'VxeRadioGroup', options: [{ label: '是', value: 'Y' }, { label: '否', value: 'N' }] } },
-      { field: 'flag', title: '开关', span: 24, itemRender: { name: 'VxeSwitch', props: { openLabel: '是', closeLabel: '否' } } },
-      { field: 'region', title: '地区', span: 24, itemRender: {}, slots: { default: 'myregion' } }
-    ]
-  },
-  {
-    title: '右侧',
-    span: 12,
-    children: [
-      { field: 'nickname', title: '昵称', span: 24, itemRender: { name: 'VxeInput', props: { placeholder: '请输入昵称' } } }
-    ]
-  },
-  {
-    align: 'center',
-    span: 24,
-    itemRender: {
-      name: '$buttons',
-      children: [
-        { props: { type: 'submit', content: '提交', status: 'primary' } },
-        { props: { type: 'reset', content: '重置' } }
-      ]
-    }
-  }
-])
-
-const submitEvent= () => {
-  VXETable.modal.message({ content: '保存成功', status: 'success' })
-}
-
-const resetEvent = () => {
-  VXETable.modal.message({ content: '重置事件', status: 'info' })
-}
-</script>

package/src/views/Test/index2.vue

@@ -1,33 +0,0 @@
-<template>
-  <div style="height: calc(100vh - 30px)">
-    <model-index uuid="1749619280421036032"/>
-  </div>
-</template>
-
-
-<script>
-
-import ModelIndex from "@/components/table/model/model-index.vue";
-
-export default {
-  name: 'olTable',
-  components: {ModelIndex},
-  data() {
-    return {
-      width: 0,
-      height: 0,
-      top: 0,
-      left: 0
-    }
-  },
-
-  methods: {
-    resize(newRect) {
-      this.width = newRect.width;
-      this.height = newRect.height;
-      this.top = newRect.top;
-      this.left = newRect.left;
-    }
-  }
-}
-</script>

package/src/views/components/btn-config/index.vue

@@ -1,202 +0,0 @@
-<template>
-  <vxe-grid
-      v-bind="option"
-      ref="tableRef"
-      :data="$attrs.data">
-    <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 #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>
-</template>
-<script>
-
-import {getNewArrData, updateSortCall} from "@/utils/TableSortUtil";
-
-export default {
-  name: "btnConfig",
-  props: {
-    type: {
-      required: true,
-      type: String
-    }
-  },
-  data() {
-    return {
-      data: [],
-      show: true,
-      option: {
-        expandConfig: {
-          trigger: "cell"
-        },
-        rowConfig: {
-          isCurrent: true
-        },
-        align: 'center',
-        editConfig: {
-          trigger: 'click',
-          mode: 'row',
-          showStatus: true
-        },
-        pagerConfig: {
-          enabled: false
-        },
-        toolbarConfig: {
-          slots: {
-            buttons: 'toolbar_buttons'
-          },
-        },
-        height: 300,
-        index: true,
-        searchBtn: false,
-        emptyBtn: false,
-        menu: false,
-        header: false,
-        columns: [
-          {
-            title: '序号',
-            className: 'move',
-            field: 'sort',
-            width: 80,
-          },
-          {
-            title: '按钮名称',
-            field: 'name',
-            editRender: {name: 'input'},
-          },
-          {
-            title: '定义编码',
-            field: 'code',
-            editRender: {
-              name: 'input', events: {
-                change: ({row}) => {
-                  setTimeout(() => {
-                    row.clickCallBackMethod = row.code != '' ? row.code + "ButClick" : ''
-                  }, 150)
-                }
-              }
-            },
-          }, {
-            title: '图标',
-            field: 'icon',
-            editRender: {name: 'input'},
-          },
-          {
-            title: '主题',
-            field: 'status',
-            editRender: {name: 'input'},
-          },
-          {
-            title: 'customFunction',
-            field: 'customFunction',
-            slots: {
-              // 使用插槽模板渲染
-              default: 'codemirror',
-            },
-          },
-          {
-            title: '回调方法',
-            children: [
-              {
-                title: '单击(click)',
-                field: 'clickCallBackMethod',
-              }, {
-                title: '显示(show)',
-                field: 'showCallBack',
-              }, {
-                title: '禁用(disabled)',
-                field: 'disabledCallBack',
-              }
-            ],
-          }, {
-            title: '操作',
-            field: 'operation',
-            width: 80,
-            slots: {
-              // 使用插槽模板渲染
-              default: 'operation',
-            }
-          }
-        ]
-      },
-    }
-  },
-  created() {
-    this.$nextTick(() => {
-      updateSortCall(this.$refs.tableRef, this.updateSort)
-    })
-  },
-  methods: {
-    updateSort(oldIndex, newIndex) {
-      let newsArr = getNewArrData(oldIndex, newIndex, this.$attrs.data)
-      this.$attrs.data.length = 0;
-      this.$nextTick(() => {
-        let index = 0;
-        for (const obj of newsArr) {
-          index++;
-          obj.sort = index;
-          this.$attrs.data.push(obj)
-        }
-      })
-
-    },
-    onAdd() {
-      let newBtn = {
-        name: '',
-        code: '',
-        defaultShow: '1',
-        status: 'primary',
-        deleted: 0,
-        sort: this.$attrs.data.length
-      }
-      this.$attrs.data.push(newBtn);
-      this.doSort();
-    },
-    removeBtnOper(code) {
-      for (let i = 0; i < this.$attrs.data.length; i++) {
-        if (this.$attrs.data[i].code == code) {
-          this.$attrs.data.splice(i, 1)
-          return;
-        }
-      }
-    },
-    doSort() {
-      let sort = 0;
-      for (let data of this.$attrs.data) {
-        sort++;
-        data.sort = sort;
-      }
-      this.$refs.tableRef.reloadData(this.$attrs.data)
-    },
-    removeBtn(rowIndex) {
-      this.$attrs.data.splice(rowIndex, 1);
-      this.doSort();
-      this.$emit('updateValue', this.$attrs.data.map(o => o.code))
-    }
-  }
-}
-
-</script>
-
-<style lang="scss">
-.newBtn {
-  background: #f2f8fe
-}
-
-</style>

package/src/views/components/option-config/index.vue

@@ -1,192 +0,0 @@
-<template>
-  <div>
-    <vxe-grid
-        v-bind="option"
-        :data="data">
-      <template #num1_default="{ row }">
-        <el-switch v-if="row.t3 == 'boolean'" v-model="row.value"/>
-        <el-input-number style="width: 100%;" v-else-if="row.t3 == 'number'"
-                         v-model="row.value"/>
-        <el-radio-group v-else-if="row.t3.indexOf('/') != -1" v-model="row.value">
-          <el-radio v-for="item in row.t3.toString().split('/')" :key="item" :label="item" :value="item">{{
-              item
-            }}
-          </el-radio>
-        </el-radio-group>
-        <p v-else-if="row.t3 == 'any'"></p>
-        <olCodemirrorTag v-else-if="row.t3 == 'function'" @open="onOpen(row)" v-model="row.value">
-          <template #tip-header>
-            <div style="background: #282C34">
-              <el-alert style="background: rgba(0,0,0,0); color: white" type="info" :title="11" show-icon
-                        class="alert-padding" :closable="false">
-                <template #title>
-                  <div><span></span><span>const  {{ row.t5 }} = params</span></div>
-                </template>
-              </el-alert>
-            </div>
-          </template>
-        </olCodemirrorTag>
-        <el-input v-else style="width: 100%;" v-model="row.value"/>
-      </template>
-    </vxe-grid>
-  </div>
-</template>
-<script>
-
-export default {
-  name: "optionConfig",
-  props: {
-    dataSource: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    height: {},
-    defaultData: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    }
-  },
-  data() {
-    return {
-      activeName: 'page',
-      search: {},
-      data: [],
-      option: {
-        height: 300,
-        index: true,
-        indexLabelClassName: '序号',
-        searchBtn: false,
-        emptyBtn: false,
-        menu: false,
-        cellBtn: true,
-        header: false,
-        resizable: true,
-        treeConfig: {
-          transform: true,
-          rowField: '$index',
-          parentField: 'parentId'
-        },
-        columns: [
-          {
-            title: '参数',
-            field: 't1',
-            width: 200,
-            search: true,
-            treeNode: true
-          }, {
-            title: '说明',
-            field: 't2',
-            search: true,
-            width: 200,
-          }, {
-            title: '类型',
-            field: 't3',
-            width: 320,
-          }, {
-            title: '默认值',
-            field: 't5',
-            width: 200,
-          }, {
-            title: '当前值',
-            field: 'value',
-            cell: true,
-            minWidth: 100,
-            slots: {
-              // 使用插槽模板渲染
-              default: 'num1_default',
-            }
-          }]
-      },
-    }
-  },
-  watch: {
-    search: {
-      deep: true,
-      handler() {
-        let data = [];
-        let keys = Object.keys(this.search);
-        let i = 0;
-        for (let key of keys) {
-          if (this.search[key]) {
-            i++;
-            for (let obj of this.dataSource) {
-              if (obj[key].indexOf(this.search[key]) != -1) {
-                data.push(obj);
-              }
-            }
-          }
-        }
-        if (i == 0) {
-          this.data = this.dataSource;
-        } else {
-          this.data = data;
-        }
-      }
-    },
-    defaultData() {
-      this.setDefaultData()
-    }
-  },
-  methods: {
-    setDefaultData() {
-      if (this.data[0].$index == null || !this.data[0].parentId == null) {
-        this.option.treeConfig = null
-        this.option.columns[0].treeNode = false
-      }
-      this.data.forEach(item => {
-        let obj = this.defaultData[item.t1];
-        if (obj instanceof Array) {
-          obj = JSON.stringify(obj)
-        }
-        if (obj != null) {
-          if (!(obj instanceof Object)) {
-            item.value = obj
-          } else if (obj.isFunction) {
-            item.value = obj.code
-          } else if (item.children) {
-            for (let child of item.children) {
-              child.value = obj[child.t1]
-            }
-          }
-        } else if (item.value == undefined && item.t3 != 'any' && item.t5 != undefined) {
-          if (item.t3 != 'function') {
-            item.value = item.t5
-          }
-        }
-      })
-    },
-    setData(config, type) {
-      let params = {};
-      for (let data of this.data) {
-        if (data.value != undefined && data.value.toString().trim() != '') {
-          params[data.t1] = data.value;
-        }
-      }
-      if (Object.keys(params) == 0) {
-        return;
-      }
-      config[type] = params;
-    },
-    onOpen(row) {
-      if (!row.value || row.value == "") {
-        if (!row.noParams) {
-          row.value = 'const ' + row.t5 + ' = params;\n'
-        } else {
-          row.value = row.t5 + '\n'
-        }
-      }
-    }
-  },
-  created() {
-    this.data = this.dataSource;
-    this.setDefaultData()
-    if (this.height) {
-      this.option.height = this.height;
-    }
-  }
-}
-</script>