@xilonglab/vue-main 0.8.18 → 0.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xilonglab/vue-main",
-  "version": "0.8.18",
+  "version": "0.9.3",
   "description": "xilong vue main",
   "main": "packages/index.js",
   "scripts": {

package/packages/index.js

@@ -41,6 +41,7 @@ import XlReviewDialog from './dialog/XlReviewDialog.vue'
 
 // Main Components
 import XlDataView from './main/XlDataView.vue'
+import XlDataTable from './main/XlDataTable.vue'
 import XlDataReview from './main/XlDataReview.vue'
 import XlDataFormDialog from './main/XlDataFormDialog.vue'
 import XlDataReviewDialog from './main/XlDataReviewDialog.vue'
@@ -93,6 +94,7 @@ const components = [
     XlReviewDialog,
     // Main Components
     XlDataView,
+    XlDataTable,
     XlDataReview,
     XlDataFormDialog,
     XlDataReviewDialog,

package/packages/main/XlDataTable.vue

@@ -0,0 +1,138 @@
+<script setup>
+defineOptions({ name: "XlDataTable" })
+
+import { inject, computed } from 'vue'
+
+const props = defineProps({
+    selectable: {
+        type: Boolean,
+        default: false,
+    },
+    columns: {
+        type: Array,
+        default: () => [],
+    },
+    showSummary: {
+        type: Boolean,
+        default: true,
+    },
+    rowClick: {
+        type: Function,
+        default: () => { },
+    },
+    summaryMethod: {
+        type: Function,
+    },
+    showIndex: {
+        type: Boolean,
+        default: false,
+    },
+    disableAdd: {
+        type: Boolean,
+        default: false,
+    },
+    pagination: {
+        type: Object,
+        default() {
+            return {
+                pageNum: 1,
+                pageSize: 20,
+                total: 0,
+            };
+        },
+    },
+    spanMethod: {
+        type: Function,
+        default: () => { },
+    },
+    headerCellStyle: {
+        type: Function,
+        default: () => { },
+    },
+    rowClassName: {
+        type: Function,
+        default: () => { },
+    },
+    rowKey: {
+        type: Function,
+        default: () => { },
+    },
+    rowDblClick: {
+        type: Function,
+        default: () => { },
+    },
+    selectionChange: {
+        type: Function,
+        default: () => { },
+    },
+    layout: {
+        type: String,
+        default: 'prev, pager, next, jumper'
+    }
+});
+
+const { refs, api, params, obj, total } = inject('injections')
+</script>
+
+
+<template>
+    <xl-query-page-table v-show="params.view != 'chart'" :ref="refs.table" :api="api" :params="params"
+        v-bind="$props" :summary-method="summaryMethod?summaryMethod:()=>({0:total})" :sort-change="(data) => api.sort(data)">
+        <template v-for="col in columns" :key="col.prop">
+            <template v-if="!col.hidden">
+                <xl-datetime-col 
+                v-if="col.type === 'datetime'"
+                :l="col.label"
+                :p="col.prop"
+            />
+            <xl-map-col
+                v-else-if="col.type === 'map'"
+                :l="col.label"
+                :p="col.prop"
+                :width="col.width"
+                :map="col.map"
+            />
+            <xl-status-col
+                v-else-if="col.type === 'status'"
+                :l="col.label"
+                :p="col.prop"
+                :map="col.map"
+            />
+            <xl-review-col
+                v-else-if="col.type === 'review'"
+                :l="col.label"
+                :p="col.prop"
+            />
+            <xl-clamp-col
+                v-else-if="col.type === 'clamp'"
+                :l="col.label"
+                :p="col.prop"
+                :width="col.width"
+            />
+            <xl-bool-col
+                v-else-if="col.type === 'bool'"
+                :l="col.label"
+                :p="col.prop"
+                :width="col.width"
+            />
+            <xl-col
+                v-else
+                :l="col.label"
+                :p="col.prop"
+                :width="col.width"
+            />
+            </template>
+        </template>
+        <slot name="columns" />
+    </xl-query-page-table>
+</template>
+
+
+<style lang="less">
+.xl-data-table {
+    div.cell {
+        padding: 0 !important;
+
+    }
+}
+</style>

package/packages/main/XlDataView.vue

@@ -178,22 +178,6 @@ const { refs, api, params, obj, chartOptions, total } = inject('injections')
             :columns="columns" 
             :callback="callback"
         >
-            <el-row>
-                <template v-for="col in columns" :key="col.prop">
-                    <xl-form-col 
-                        v-if="col.form" 
-                        :span="col.form.span" 
-                        :l="col.label" 
-                        :p="col.prop"
-                    >
-                        <component 
-                            :is="`xl-${col.form.type || 'input'}`"
-                            v-model="obj[col.prop]"
-                            v-bind="col.form || {}"
-                        />
-                    </xl-form-col>
-                </template>
-            </el-row>
             <slot name="items" />
         </xl-data-form-dialog>
         <slot name="others" />