olp-table 5.3.1 → 5.3.4

package/src/views/table/add-or-edit/config/data/page.js

@@ -0,0 +1,79 @@
+export default [
+    {
+        "t1": "border",
+        "t2": "带边框",
+        "t3": "boolean",
+        "$cellEdit": true,
+        "t5": false,
+    },
+    /*{
+        "t1": "currentPage",
+        "t2": "当前页数",
+        "t3": "number",
+        "$cellEdit": true,
+        "t5": 1
+    },
+    {
+        "t1": "pageSize",
+        "t2": "每页显示条目个数",
+        "t3": "number",
+        "$cellEdit": true,
+        "t5": 50
+    },
+    {
+        "t1": "total",
+        "t2": "总条目数",
+        "t3": "number",
+        "t5": 0
+    },*/
+    {
+        "t1": "autoHidden",
+        "t2": "当只有一页时自动隐藏",
+        "t3": "boolean",
+        "$cellEdit": true,
+        "t5": false,
+    },
+    {
+        "t1": "perfect",
+        "t2": "配套的样式",
+        "t3": "boolean",
+        "$cellEdit": true,
+        "t5": false,
+    },
+    {
+        "t1": "pagerCount",
+        "t2": "页码按钮的数量，当总页数超过该值时会折叠",
+        "t3": "number",
+        "$cellEdit": true,
+        "t5": 7
+    },
+    {
+        "t1": "background",
+        "t2": "是否为分页按钮添加背景色",
+        "t3": "boolean",
+        "$cellEdit": true,
+        "t5": true
+    },
+    {
+        "t1": "align",
+        "t2": "对齐方式",
+        "t3": "left/center/right",
+        "$cellEdit": true,
+        "t5": "right",
+    },
+    {
+        "t1": "layouts",
+        "t2": "自定义布局,PrevJump, PrevPage, Number, JumpNumber, NextPage, NextJump, Sizes, Jump, FullJump, PageCount, Total",
+        "t3": "string[]",
+        "$cellEdit": true,
+        "t5": "['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total']"
+    },
+    {
+        "t1": "pageSizes",
+        "t2": "每页显示个数选择器的选项设置",
+        "t3": "number[]",
+        "$cellEdit": true,
+        "t5": "[50, 100, 500, 1000, 2000, 5000]"
+    },
+
+]

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

@@ -0,0 +1,42 @@
+<template>
+  <div style="padding: 15px;flex: 1">
+    <h4 style="text-align: center">{{ obj.joinTable }}（{{ obj.index }}-{{ obj.tableComment }}）</h4>
+    <vxe-table height="300px" border :data="state.tableData" :stripe="true" size="small"
+               :checkbox-config="{labelField: '',checkField: 'select', highlight: true, range: true}"
+               ref="tableRef">
+      <vxe-column type="seq" title="序号" width="60" align="center"/>
+      <vxe-column type="checkbox" title="查询" width="80" align="center">
+      </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(row) {
+      if (row.checked == 1) {
+        row.visible = '1';
+      }
+    }
+
+    return {dialogVisible, state, obj, updateChecked}
+  },
+
+}
+</script>
+<style lang="less">
+
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+  <el-Dialog v-model="dialogVisible"
+             title="字段配置"
+             :width="800"
+             resize
+             draggable
+             show-footer
+             :before-hide-method="handleClose">
+    <el-scrollbar>
+    <div style="display: flex;" v-if="dialogVisible">
+      <field-config-table class="content-box" v-for="(item) in state.columnList"
+                          :ref="setItemRef"
+                          :key="item.id"
+                          :item="item"
+                          style="min-width: 400px"/>
+    </div>
+    </el-scrollbar>
+    <template #footer>
+      <vxe-button @click="handleClose">取消</vxe-button>
+      <vxe-button status="primary" @click="handleClose(true)">保存</vxe-button>
+    </template>
+  </el-Dialog>
+</template>
+<script>
+import {onBeforeUpdate, reactive, ref, toRaw} from "vue";
+import FieldConfigTable from "./filed-config-table.vue"
+
+export default {
+  components: {FieldConfigTable},
+  name: 'fieldConfig',
+  setup(props, context) {
+    const dialogVisible = ref(false)
+    const state = reactive({
+      columnList: [],
+    })
+
+    function init(data,select) {
+      let list = []
+      if (data instanceof Array) {
+        list = data
+      } else if (data instanceof Object) {
+        if (select) {
+          for (const column of data.columnList) {
+            column.select = '1'
+          }
+        }
+        list.push(data)
+      }
+      dialogVisible.value = true;
+      state.columnList = list;
+    }
+
+    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);
+          let columnList = tableData.columnList.filter((column) => {
+            return column.select == '1';
+          });
+          data[tableData.index] = columnList;
+        }
+        context.emit('close', data);
+      }
+      dialogVisible.value = false;
+    }
+
+    return {dialogVisible, state, init, handleClose, setItemRef}
+  },
+  methods: {}
+}
+</script>
+<style lang="less">
+.content-box{
+  line-height: 30px;
+}
+</style>