olp-table 5.3.1 → 5.3.4

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

@@ -0,0 +1,446 @@
+<template>
+  <div>
+    <el-divider content-position="left">常用属性</el-divider>
+    <!--  <avue-form v-if="configDataSource.show" v-model="configData.form" :option="options">-->
+    <!--  </avue-form>-->
+    <table-form v-if="configDataSource.show" :formData="configData.form"></table-form>
+    <el-divider content-position="left">详细配置</el-divider>
+    <el-tabs
+        v-model="activeName"
+        type="card"
+    >
+      <el-tab-pane lazy label="Option" name="Option">
+        <OptionConfig :data-source="Option" :default-data="configData.form.tableObj"></OptionConfig>
+      </el-tab-pane>
+      <el-tab-pane lazy v-if="configData.form.paging == 1" label="Page" name="page">
+        <OptionConfig :data-source="Page"
+                      :default-data="configData.form.optionObj.pagination"></OptionConfig>
+      </el-tab-pane>
+      <el-tab-pane lazy label="Events" name="events">
+        <OptionConfig :data-source="Events" :default-data="configData.form.optionObj.events"></OptionConfig>
+      </el-tab-pane>
+      <el-tab-pane lazy label="左工具按钮" name="toolbarBtn">
+        <btn-config ref="toolButOptions" alignMode="left" type="toolButOptions"/>
+      </el-tab-pane>
+      <el-tab-pane lazy label="操作按钮" name="actionbarBtn">
+        <btn-config ref="operationButOptions" type="operationButOptions"/>
+      </el-tab-pane>
+
+      <el-tab-pane lazy label="右工具按钮" name="righttoolbarBtn">
+        <btn-config ref="toolButOptions" alignMode="right" type="toolButOptions"/>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TableConfig'
+}
+</script>
+<script setup>
+import events from "@/views/table/add-or-edit/config/data/events";
+import page from "@/views/table/add-or-edit/config/data/page";
+import option from "@/views/table/add-or-edit/config/data/option";
+import OptionConfig from "@/views/components/option-config/index.vue";
+import {inject, reactive, ref, defineExpose, defineEmits, nextTick, provide} from "vue";
+import BtnConfig from "@/views/table/add-or-edit/config/table-config/btn-config.vue";
+import tableForm from '@/views/table/add-or-edit/config/base-config/table-form.vue'
+
+const configData = inject("configData")
+provide('updateBtn', updateBtn)
+const configDataSource = reactive({
+  toolButConfig: [],
+  operationButConfig: [],
+  show: false,
+  columns: [],
+})
+const options = reactive({
+  menuBtn: false,
+  gutter: 20,
+  labelWidth: 100,
+  labelPosition: 'right',
+  column: [
+    {
+      label: '分页',
+      type: 'switch',
+      prop: 'paging',
+      dicData: [{
+        value: '0'
+      }, {
+        value: '1'
+      }],
+      activeIcon: "el-icon-check",
+      inactiveIcon: "el-icon-close",
+      span: 3
+    },
+    {
+      label: '序号',
+      type: 'switch',
+      dicData: [{
+        value: '0'
+      }, {
+        value: '1'
+      }],
+      prop: 'seq',
+      activeIcon: "el-icon-check",
+      inactiveIcon: "el-icon-close",
+      value: true,
+      span: 3
+    },
+    {
+      label: '表格选择框',
+      type: 'radio',
+      prop: 'selectBox',
+      border: true,
+      span: 6,
+      dicData: [
+        {
+          label: '多选',
+          value: '2',
+        }, {
+          label: '单选',
+          value: '1'
+        }, {
+          label: '无',
+          value: '0'
+        }]
+    }, {
+      label: '工具栏按钮',
+      type: 'checkbox',
+      prop: 'toolBut',
+      border: true,
+      labelPosition: 'right',
+      span: 7,
+      props: {
+        label: 'name',
+        value: 'code',
+      },
+      onChange: () => {
+        nextTick(() => {
+          updateBtn('toolBut')
+        })
+      },
+      dicData: configDataSource.toolButConfig
+    }, {
+      label: '表格操作栏',
+      type: 'checkbox',
+      prop: 'operationBut',
+      border: true,
+      props: {
+        label: 'name',
+        value: 'code',
+      },
+      onChange: () => {
+        nextTick(() => {
+          updateBtn('operationBut')
+        })
+      },
+      span: 5,
+      dicData: configDataSource.operationButConfig
+    }, {
+      label: '首次自动查询',
+      type: 'switch',
+      prop: 'init',
+      dicData: [{
+        value: '0'
+      }, {
+        value: '1'
+      }],
+      span: 3,
+      activeIcon: "el-icon-check",
+      inactiveIcon: "el-icon-close"
+    },
+    {
+      label: '树表',
+      type: 'switch',
+      prop: 'tree',
+      dicData: [{
+        value: '0'
+      }, {
+        value: '1'
+      }],
+      span: 3,
+      activeIcon: "el-icon-check",
+      inactiveIcon: "el-icon-close",
+      onChange: ({value}) => {
+        for (let column of options.column) {
+          if (['lazy', 'treeId', 'treeParentId', 'openColumn'].indexOf(column.prop) != -1) {
+            column.display = value == 1;
+            if (value == 1) {
+              initColumn()
+            }
+          }
+        }
+      }
+    },
+    /* {
+       label: 'lazy',
+       type: 'switch',
+       prop: 'lazy',
+       display: false,
+       activeIcon: "el-icon-check",
+       inactiveIcon: "el-icon-close",
+       inlinePrompt: true,
+       dicData: [{
+         value: '0'
+       }, {
+         value: '1'
+       }],
+       span: 3,
+       value: false,
+       onChange: ({value}) => {
+         for (let column of options.column) {
+           if (['lazyFunction'].indexOf(column.prop) != -1) {
+             column.display = value;
+           }
+         }
+       }
+     },*/
+    {
+      label: '树ID',
+      prop: 'treeId',
+      type: 'select',
+      props: {
+        label: 'title',
+        value: 'field'
+      },
+      onFocus: initColumn,
+      display: false,
+      onChange: initColumn,
+      span: 5,
+      dicData: configDataSource.columns,
+    },
+    {
+      label: '树列父ID',
+      prop: 'treeParentId',
+      type: 'select',
+      props: {
+        label: 'title',
+        value: 'field'
+      },
+      display: false,
+      onFocus: initColumn,
+      dicData: configDataSource.columns,
+      span: 5,
+    },
+    {
+      label: '展开列',
+      prop: 'openColumn',
+      type: 'select',
+      display: false,
+      props: {
+        label: 'title',
+        value: 'field'
+      },
+      onFocus: initColumn,
+      dicData: configDataSource.columns,
+      span: 5,
+    },
+    /* {
+       label: 'lazy回调',
+       prop: 'lazyFunction',
+       type: 'input',
+       display: false,
+       span: 6,
+     },*/
+  ]
+})
+
+const activeName = ref("Option");
+const toolButOptions = ref();
+const operationButOptions = ref();
+const Page = reactive(JSON.parse(JSON.stringify(page)));
+const Option = reactive(JSON.parse(JSON.stringify(option)));
+const Events = reactive(JSON.parse(JSON.stringify(events)));
+
+function initColumn(c) {
+  configDataSource.columns.length = 0
+  for (let column of JSON.parse(JSON.stringify(configData.tableColumn))) {
+    configDataSource.columns.push(column)
+  }
+  if (c && !configData.form['openColumn']) {
+    nextTick(() => {
+      configData.form['openColumn'] = configData.form['treeId']
+    })
+  }
+}
+
+function updateBtn(type) {
+  if (!configData.form[type + 'Options']) {
+    return
+  }
+  var formElement = configData.form[type + 'Options'];
+  //删除
+  for (let i = formElement.length - 1; i >= 0; i--) {
+    let o = formElement[i];
+    if (configData.form[type].indexOf(o.code) == -1) {
+      formElement.splice(i, 1)
+    }
+  }
+  let key = formElement.map(item => item.code);
+
+  //新增
+  for (const o of configData[type + 'Config']) {
+    if (key.indexOf(o.code) == -1 && configData.form[type].indexOf(o.code) != -1) {
+      configData.form[type + 'Options'].push(o);
+    }
+  }
+  if (type == 'toolBut' && toolButOptions.value) {
+    toolButOptions.value.loadData();
+  } else if (operationButOptions.value) {
+    operationButOptions.value.loadData();
+  }
+}
+
+const emits = defineEmits(['tableConfigChange'])
+//
+const buildJson = (data, defaultOption) => {
+  if (defaultOption == null) {
+    defaultOption = {}
+  }
+  let buildOption = defaultOption
+  for (let op of data) {
+    if (op.value != undefined) {
+      let prop = op.t1
+      if (op.redirect != null) {
+        prop = op.redirect
+      }
+      let subs = prop.split(".");
+      let parent = buildOption;
+      for (let i = 0; i < subs.length; i++) {
+        if (i < subs.length - 1) {
+          if (parent[subs[i]] == null) parent[subs[i]] = {}
+          parent = parent[subs[i]]
+        } else if (i >= subs.length - 1) {
+          if (op.value && (op.t3 == "string[]" || op.t3 == "number[]") && !(op.value instanceof Array)) {
+            op.value = op.value.replaceAll("'", '"')
+            op.value = JSON.parse(op.value)
+          }
+          if (op.t3 == 'function') {
+            if (op.value && op.value.toString().trim() != 0) {
+              parent[subs[i]] = {
+                code: op.value,
+                flag: "flag##function#",
+                isFunction: true
+              }
+            } else {
+              delete parent[subs[i]]
+            }
+          } else {
+            parent[subs[i]] = op.value
+          }
+        }
+      }
+    }
+  }
+  return buildOption
+}
+
+
+const getOptions = () => {
+  let buildOption = {}
+  buildOption.table = buildJson(Option, configData.form.optionObj.tableObj)
+  buildOption.pagination = buildJson(Page, configData.form.optionObj.pagination)
+  if (buildOption.pagination.pageSizes) {
+    let pageSizes = JSON.parse(JSON.stringify(buildOption.pagination.pageSizes));
+    buildOption.pagination.pageSize = pageSizes[0]
+  }
+  buildOption.events = buildJson(Events, configData.form.optionObj.events)
+  return buildOption
+}
+
+
+const copyParams = (option, data) => {
+  for (let item in option) {
+    let obj = option[item];
+    let sub = data[item]
+    if (obj instanceof Object && obj.isFunction && obj.flag == "flag##function#") {
+      data[item] = (params) => {
+        let fun = null
+        eval("fun = (params) => {" + obj.code + "}")
+        return fun(params)
+      }
+      continue
+    }
+    if (sub == null || sub == undefined) {
+      data[item] = obj
+      continue
+    }
+    if (obj instanceof Object && sub instanceof Object) {
+      copyParams(obj, sub)
+    } else {
+      data[item] = obj
+    }
+  }
+}
+
+
+// 初始化数据
+const initData = (data, defaultData) => {
+  if (!defaultData) {
+    defaultData = {}
+  }
+  let defMap = parseRedirectObj(defaultData)
+  for (let item of data) {
+    let obj = defMap[item.redirect ? item.redirect : item.t1];
+    if (obj instanceof Array) {
+      obj = JSON.stringify(obj)
+    }
+    if (obj != null && !(obj instanceof Object)) {
+      item.value = obj
+    } else if (item.t5 != "-" && item.t3 != 'function') {
+      item.value = item.t5
+    }
+  }
+}
+
+function setData() {
+  configDataSource.show = false;
+  configDataSource.toolButConfig.length = 0;
+  for (const o of configData.toolButConfig) {
+    configDataSource.toolButConfig.push(o);
+  }
+  configDataSource.operationButConfig.length = 0;
+  for (const o of configData.operationButConfig) {
+    configDataSource.operationButConfig.push(o);
+  }
+  nextTick(() => {
+    configDataSource.show = true;
+    initData(Option, configData.form.tableObj)
+    initData(Page, configData.form.optionObj.pagination)
+    initData(Events, configData.form.optionObj.events)
+    updateBtn('toolBut')
+    updateBtn('operationBut')
+  })
+}
+
+// 平铺对象
+const parseRedirectObj = (data, map, parent) => {
+  if (!map) map = {}
+  if (!parent) parent = ""
+  for (let key in data) {
+    let path = parent
+    if (parent != "") {
+      path = parent + "." + key
+    } else {
+      path = key
+    }
+    let obj = data[key]
+    if (obj instanceof Object) {
+      if (obj.isFunction && obj.flag == "flag##function#") {
+        map[path] = obj.code
+        continue
+      }
+      parseRedirectObj(obj, map, path)
+    } else {
+      map[path] = obj
+    }
+  }
+  return map
+}
+
+
+defineExpose({
+  getOptions, setData
+})
+</script>

package/src/views/table/add-or-edit/configOld/dataTags/filed-config-table-model.vue

@@ -0,0 +1,41 @@
+<template>
+  <div style="padding: 15px;flex: 1">
+    <h4 style="text-align: center">{{obj.joinTable}}（{{obj.index}}-{{obj.type}}）</h4>
+    <vxe-table height="300px" border :data="state.tableData" :stripe="true" size="small">
+      <vxe-column type="seq" title="序号" width="60" align="center"/>
+      <vxe-column field="checked" title="查询" width="60" align="center">
+        <template #default="scope">
+          <vxe-checkbox v-model="scope.row.checked" checked-value="1" @change="updateChecked(scope.row)" unchecked-value="0"></vxe-checkbox>
+        </template>
+      </vxe-column>
+      <vxe-column field="column_name" title="字段"  align="center" show-overflow/>
+      <vxe-column field="column_comment" title="描述" align="center" show-overflow/>
+    </vxe-table>
+  </div>
+</template>
+<script>
+import {reactive, ref} from "vue";
+export default {
+  name:'filedConfigTableModel',
+  props:{
+    item:{}
+  },
+  setup(prop) {
+    const dialogVisible = ref(true);
+    const state = reactive({
+      tableData:prop.item.columnList,
+    })
+    const obj = prop.item;
+    function updateChecked(e){
+      if (e.checked == 1) {
+        e.visible = '1';
+      }
+    }
+    return {dialogVisible,state,obj,updateChecked}
+  },
+
+}
+</script>
+<style lang="less">
+
+</style>

package/src/views/table/add-or-edit/configOld/dataTags/filed-config.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-dialog
+      v-model="dialogVisible"
+      :show-close="false"
+      title="字段配置"
+      width="800px"
+      resize
+      :overflow="true"
+      :before-hide-method="handleClose" showFooter>
+    <el-scrollbar>
+      <div style="display: flex;" v-if="dialogVisible">
+        <filed-config-table-model class="content-box" v-for="(item,index) in state.columnList" :ref="setItemRef" :item="item" style="min-width: 400px"/>
+      </div>
+    </el-scrollbar>
+    <template #footer>
+      <span>
+        <vxe-button @click="handleClose">取消</vxe-button>
+        <vxe-button status="primary" @click="handleClose(true)">保存</vxe-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+<script>
+import {onBeforeUpdate, reactive, ref, toRaw} from "vue";
+import filedConfigTableModel from "./filed-config-table-model"
+
+export default {
+  components: {filedConfigTableModel},
+  name: 'filedConfig',
+  setup(props, context) {
+    const dialogVisible = ref(false)
+    const state = reactive({
+      columnList: [],
+    })
+
+    function init(data) {
+      dialogVisible.value = true;
+      state.columnList = data;
+    }
+
+    const itemRefs = ref([]); // 储存获取的Dom元素或子组件实例
+
+    const setItemRef = (el) => {
+      if (el) {
+        itemRefs.value.push(el);
+      }
+    };
+
+// 每次更新前把实例清空
+    onBeforeUpdate(() => {
+      itemRefs.value = [];
+    });
+
+    function handleClose(v) {
+      if (v === true) {
+        let data = {};
+        let itemRefsV = itemRefs.value;
+        for (let i = 0; i < itemRefsV.length; i++) {
+          let tableData = toRaw(itemRefsV[i].obj);
+          data[tableData.index] = tableData.columnList;
+        }
+        context.emit('close', data);
+      }
+      dialogVisible.value = false;
+    }
+
+    return {dialogVisible, state, init, handleClose, setItemRef}
+  },
+  methods: {}
+}
+</script>
+<style lang="less">
+
+</style>