@xilonglab/vue-main 0.8.17 → 0.9.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xilonglab/vue-main",
-  "version": "0.8.17",
+  "version": "0.9.1",
   "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/XlDataFormDialog.vue

@@ -65,6 +65,22 @@ defineExpose({
     <xl-dialog class="xl-data-form-dialog" :ref="refs.dialog" :title="chinese" :width="width" :validate="validate"
         :callback="callback" @finish="emits('finish')">
         <el-form :ref="refs.form" :model="obj" :rules="rules" :label-width="`${labelWidth}px`">
+            <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.value[col.prop]"
+                          v-bind="col.form || {}"
+                      />
+                  </xl-form-col>
+              </template>
+            </el-row>
             <slot />
         </el-form>
     </xl-dialog>

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>