olp-table 5.3.1 → 5.3.4

package/src/utils/tree.js

@@ -0,0 +1,54 @@
+/**
+ * 构造树型结构数据
+ * @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

@@ -0,0 +1,127 @@
+/**
+ * 过滤对象中为空的属性
+ * @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

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

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

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

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