@xilonglab/vue-main 0.8.8 → 0.8.9

package/package.json

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

package/packages/index.js

@@ -32,25 +32,25 @@ import XlTextarea from './form/XlTextarea.vue'
 import XlTime from './form/XlTime.vue'
 
 // Dialog Components
-import XlDialog from './dialog/XlDialog.vue'
-import XlFormDialog from './dialog/XlFormDialog.vue'
-import XlStateDialog from './dialog/XlStateDialog.vue'
-import XlEditReviewDialog from './dialog/XlEditReviewDialog.vue'
-import XlImagePreviewDialog from './dialog/XlImagePreviewDialog.vue'
-import XlMessageDialog from './dialog/XlMessageDialog.vue'
-import XlReviewDialog from './dialog/XlReviewDialog.vue'
+// import XlDialog from './dialog/XlDialog.vue'
+// import XlFormDialog from './dialog/XlFormDialog.vue'
+// import XlStateDialog from './dialog/XlStateDialog.vue'
+// import XlEditReviewDialog from './dialog/XlEditReviewDialog.vue'
+// import XlImagePreviewDialog from './dialog/XlImagePreviewDialog.vue'
+// import XlMessageDialog from './dialog/XlMessageDialog.vue'
+// import XlReviewDialog from './dialog/XlReviewDialog.vue'
 
 // Main Components
-import XlDataView from './main/XlDataView.vue'
-import XlTableFormDialog from './main/XlTableFormDialog.vue'
-import XlNavBar from './main/XlNavBar.vue'
-import XlTabView from './main/XlTabView.vue'
-import XlToolBar from './main/XlToolBar.vue'
-import XlVerticalMenu from './main/XlVerticalMenu.vue'
-import XlStatusIndicator from './main/XlStatusIndicator.vue'
-import XlUpdateIndicator from './main/XlUpdateIndicator.vue'
-import XlAutoSaver from './main/XlAutoSaver.vue'
-import XlLoginForm from './main/XlLoginForm.vue'
+// import XlDataView from './main/XlDataView.vue'
+// import XlTableFormDialog from './main/XlTableFormDialog.vue'
+// import XlNavBar from './main/XlNavBar.vue'
+// import XlTabView from './main/XlTabView.vue'
+// import XlToolBar from './main/XlToolBar.vue'
+// import XlVerticalMenu from './main/XlVerticalMenu.vue'
+// import XlStatusIndicator from './main/XlStatusIndicator.vue'
+// import XlUpdateIndicator from './main/XlUpdateIndicator.vue'
+// import XlAutoSaver from './main/XlAutoSaver.vue'
+// import XlLoginForm from './main/XlLoginForm.vue'
 
 const components = [
     XlSideBar,
@@ -84,40 +84,53 @@ const components = [
     XlTextarea,
     XlTime,
     // Dialogs
-    XlDialog,
-    XlFormDialog,
-    XlStateDialog,
-    XlEditReviewDialog,
-    XlImagePreviewDialog,
-    XlMessageDialog,
-    XlReviewDialog,
-    // Main Components
-    XlDataView,
-    XlTableFormDialog,
-    XlNavBar,
-    XlTabView,
-    XlToolBar,
-    XlVerticalMenu,
-    XlStatusIndicator,
-    XlUpdateIndicator,
-    XlAutoSaver,
-    XlLoginForm
+    // XlDialog,
+    // XlFormDialog,
+    // XlStateDialog,
+    // XlEditReviewDialog,
+    // XlImagePreviewDialog,
+    // XlMessageDialog,
+    // XlReviewDialog,
+    // // Main Components
+    // XlDataView,
+    // XlTableFormDialog,
+    // XlNavBar,
+    // XlTabView,
+    // XlToolBar,
+    // XlVerticalMenu,
+    // XlStatusIndicator,
+    // XlUpdateIndicator,
+    // XlAutoSaver,
+    // XlLoginForm
 ];
 
-const install = (app) => {
-    components.forEach((component) => {
-        app.component(component.name, component);
-    });
+// const install = (app) => {
+//     components.forEach((component) => {
+//         app.component(component.name, component);
+//     });
+// };
+
+const imports = import.meta.globEager('./**/*.vue');
+export default {
+    install(app) {
+        for (const path in imports) {
+            const component = imports[path];
+            const regex = /\.\/\w+\/(\w+)\.vue$/;
+            const match = path.match(regex);
+            const name = match ? match[1] : null;
+            app.component(name, component.default);
+        }
+    },
 };
 
-let componentsJson = {}
-components.forEach(component => {
-    const componentName = component.name
-    component.install = function (app) {
-        app.component(componentName, component)
-    }
-    componentsJson[componentName] = component
-})
+// let componentsJson = {}
+// components.forEach(component => {
+//     const componentName = component.name
+//     component.install = function (app) {
+//         app.component(componentName, component)
+//     }
+//     componentsJson[componentName] = component
+// })
 
 
 if (typeof window !== 'undefined' && window.Vue) {
@@ -126,5 +139,5 @@ if (typeof window !== 'undefined' && window.Vue) {
 
 export default {
     install,
-    ...componentsJson
+    // ...componentsJson
 }

package/packages/main/{XlTableFormDialog.vue → XlDataFormDialog.vue}

@@ -1,5 +1,5 @@
 <script setup>
-defineOptions({ name: "XlTableFormDialog" })
+defineOptions({ name: "XlDataFormDialog" })
 
 import { ref, computed } from 'vue'
 
@@ -62,7 +62,7 @@ defineExpose({
 
 
 <template>
-    <xl-dialog class="xl-edit-dialog" :ref="refs.dialog" :title="chinese" :width="width" :validate="validate"
+    <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`">
             <slot />
@@ -72,7 +72,7 @@ defineExpose({
 
 
 <style lang="less">
-.xl-edit-dialog {
+.xl-data-form-dialog {
     .xl-form-item {
         width: 100% !important;
     }

package/packages/main/XlDataReview.vue

@@ -0,0 +1,217 @@
+<script setup>
+defineOptions({ name: "XlDataReview" })
+
+import { inject } 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'
+    },
+    small: {
+        type: Boolean,
+        default: false
+    },
+    chinese: {
+        type: String,
+        default: ''
+    },
+    english: {},
+    type: {
+        type: String,
+        default: ''
+    },
+    width: {
+        default: 70
+    },
+    labelWidth: {
+        default: 90
+    },
+    passCallback: {
+        type: Function,
+        default: () => { },
+    },
+    rejectCallback: {
+        type: Function,
+        default: () => { },
+    },
+});
+
+const { refs, api, params, obj, chartOptions, total } = inject('injections')
+</script>
+
+
+<template>
+    <div :class="['xl-data-review', english]">
+        <xl-tool-bar :type="type" :table="refs.table" :params="params" @query="() => api.stat()">
+            <template #inputs>
+                <template v-for="col in columns" :key="col.prop">
+                    <template v-if="col.search">
+                        <component 
+                            :is="`xl-${col.search.type || 'input'}`"
+                            :placeholder="col.label"
+                            v-model="params[col.prop]"
+                            v-bind="col.search || {}"
+                        />
+                    </template>
+                </template>
+                <slot name="inputs" />
+            </template>
+            <template #buttons>
+                <slot name="buttons" />
+                <el-button class="add-btn" v-if="!disableAdd" type="success" @click="() => api.onAdd()">新增</el-button>
+            </template>
+        </xl-tool-bar>
+        <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>
+        <xl-chart v-show="params.view == 'chart'" :options="chartOptions" />
+        <xl-data-review-dialog 
+            :ref="refs.editDialog" 
+            :title="chinese" 
+            :width="width" 
+            :label-width="labelWidth" 
+            :obj="obj"
+            :columns="columns" 
+            :pass-callback="passCallback" 
+            :reject-callback="rejectCallback"
+        >
+            <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-review-dialog>
+        <slot name="others" />
+        <xl-message-dialog l="确认删除?" :ref="refs.deleteDialog" @confirm="() => api.delete()" />
+    </div>
+</template>
+
+
+<style lang="less">
+.xl-data-review {
+    div.cell {
+        padding: 0 !important;
+
+    }
+}
+</style>

package/packages/{dialog/XlEditReviewDialog.vue → main/XlDataReviewDialog.vue}

@@ -1,5 +1,5 @@
 <script setup>
-defineOptions({ name: "XlEditReviewDialog" })
+defineOptions({ name: "XlDataReviewDialog" })
 
 import { ref, computed } from 'vue'
 
@@ -7,12 +7,12 @@ import { ref, computed } from 'vue'
 const emits = defineEmits(['confirm', 'pass', 'reject'])
 
 const props = defineProps({
-    title: {},
+    chinese: {},
     width: {},
-    data: {},
-    ruleMap: {
+    obj: {},
+    columns: {
         default() {
-            return {}
+            return []
         }
     },
     labelWidth: {
@@ -33,17 +33,21 @@ const refs = {
     form: ref(null),
 }
 
-function convertRuleMapToRules(ruleMap) {
-    const rules = {};
-
-    for (const key in ruleMap) {
-        rules[key] = [{ required: true, message: `请输�?{ruleMap[key]}`, trigger: "blur" }];
+const convertColumnsToRules = (columns) => {
+  const rules = {};
+  columns.forEach(col => {
+    if (col.form?.required) {
+      rules[col.prop] = [{
+        required: true,
+        message: `请输入${col.label}`,
+        trigger: "blur"
+      }];
     }
+  });
+  return rules;
+};
 
-    return rules;
-}
-
-const rules = computed(() => convertRuleMapToRules(props.ruleMap));
+const rules = computed(() => convertColumnsToRules(props.columns));
 
 async function validate() {
     let flag = 0
@@ -62,10 +66,10 @@ defineExpose({
 
 
 <template>
-    <xl-review-dialog class="xl-edit-review-dialog xl-dialog" :ref="refs.dialog" :title="title" :width="width"
+    <xl-review-dialog class="xl-data-review-dialog xl-dialog" :ref="refs.dialog" :title="chinese" :width="width"
         :validate="validate" :pass-callback="passCallback" :reject-callback="rejectCallback" @pass="emits('pass')"
         @reject="emits('reject')">
-        <el-form :ref="refs.form" :model="data" :rules="rules" :label-width="`${labelWidth}px`">
+        <el-form :ref="refs.form" :model="obj" :rules="rules" :label-width="`${labelWidth}px`">
             <slot />
         </el-form>
     </xl-review-dialog>
@@ -73,7 +77,7 @@ defineExpose({
 
 
 <style lang="less">
-.xl-edit-review-dialog {
+.xl-data-review-dialog {
     .xl-form-item {
         width: 100% !important;
     }

package/packages/main/XlDataView.vue

@@ -169,7 +169,7 @@ const { refs, api, params, obj, chartOptions, total } = inject('injections')
             <slot name="columns" />
         </xl-query-page-table>
         <xl-chart v-show="params.view == 'chart'" :options="chartOptions" />
-        <xl-table-form-dialog
+        <xl-data-form-dialog
             :ref="refs.editDialog" 
             :chinese="chinese" 
             :width="width" 
@@ -195,7 +195,7 @@ const { refs, api, params, obj, chartOptions, total } = inject('injections')
                 </template>
             </el-row>
             <slot name="items" />
-        </xl-table-form-dialog>
+        </xl-data-form-dialog>
         <slot name="others" />
         <xl-message-dialog l="确认删除?" :ref="refs.deleteDialog" @confirm="() => api.delete()" />
     </div>