vue-2024-ui 0.0.8 → 0.0.10

package/README.form.md

@@ -131,8 +131,8 @@
 ``` javascript
 
     <script setup>
-    import { ref ，reactive} from "vue";    
-    const formData=reactive({
+    import { ref} from "vue";    
+    const formData=ref({
     form:{
       submit: { hidden: false },
       reset: { hidden: false },

package/README.md

@@ -36,8 +36,8 @@ app.mount('#app')
 
 ``` javascript
 <script setup>
-import { reactive } from "vue";
-const formData = reactive({
+import { ref } from "vue";
+const formData = ref({
     id: { label: "ID", type: "number", value: 1, disabled: true, edit: false },
     name: {
         label: "姓名", value: "张三", width: 100,
@@ -215,7 +215,7 @@ const edit = (row, c, i, m) => {
 }
 const read = (row, c, i, m) => {
 }
-formData.table = {
+formData.value.table = {
     border: undefined,
     page: { pageSize: 10, style: { justifyContent: 'flex-end' }, onChange: (a, b) => console.log(a, b) }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "private": false,
   "type": "module",
   "main": "src/components/index.js",

package/src/components/g-ctrl.vue

@@ -37,7 +37,8 @@
             </slot>
         </el-checkbox-group>
         <!--select-->
-        <el-select v-model="ctrlValue" v-bind="selectModel" v-else-if="ctrlType == 'select'">
+        <el-select v-model="ctrlValue" :placeholder="itemInfo.label" v-bind="selectModel"
+            v-else-if="ctrlType == 'select'">
             <template #default v-if="itemInfo?.options?.some(a => a.options)">
                 <slot :name="`${ctrlKey}-ctrl`" :options="itemInfo.options">
                     <el-option-group v-for="group in itemInfo.options" :label="group.label">
@@ -61,24 +62,28 @@
             </template>
         </el-select>
         <!--tree-select-->
-        <el-tree-select v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'tree-select'">
+        <el-tree-select v-model="ctrlValue" :placeholder="itemInfo.label" v-bind="itemInfo"
+            v-else-if="ctrlType == 'tree-select'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
             </template>
         </el-tree-select>
         <!--time-->
-        <el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" v-else-if="ctrlType == 'time'" />
+        <el-time-picker v-model="ctrlValue" arrow-control v-bind="itemInfo" :placeholder="itemInfo.label"
+            v-else-if="ctrlType == 'time'" />
         <!--time-select-->
-        <el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" v-bind="itemInfo"
-            v-else-if="ctrlType == 'time-select'" />
+        <el-time-select v-model="ctrlValue" start="06:30" step="00:15" end="23:30" :placeholder="itemInfo.label"
+            v-bind="itemInfo" v-else-if="ctrlType == 'time-select'" />
         <!--date-->
-        <el-date-picker v-model="ctrlValue" type="date" v-bind="itemInfo" v-else-if="ctrlType == 'date'">
+        <el-date-picker v-model="ctrlValue" type="date" :placeholder="itemInfo.label" v-bind="itemInfo"
+            v-else-if="ctrlType == 'date'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
             </template>
         </el-date-picker>
         <!--datetime-->
-        <el-date-picker v-model="ctrlValue" type="datetime" v-bind="itemInfo" v-else-if="ctrlType == 'datetime'">
+        <el-date-picker v-model="ctrlValue" type="datetime" :placeholder="itemInfo.label" v-bind="itemInfo"
+            v-else-if="ctrlType == 'datetime'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
             </template>
@@ -114,20 +119,21 @@
             </template>
         </el-upload>
         <!--autocomplete-->
-        <el-autocomplete v-model="ctrlValue" v-bind="itemInfo" v-else-if="ctrlType == 'autocomplete'">
+        <el-autocomplete v-model="ctrlValue" v-bind="itemInfo" :placeholder="itemInfo.label"
+            v-else-if="ctrlType == 'autocomplete'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
             </template>
         </el-autocomplete>
         <!--input-number-->
-        <el-input-number v-model="ctrlValue" :min="0" :max="100000000" v-bind="itemInfo"
+        <el-input-number v-model="ctrlValue" :min="0" :max="100000000" :placeholder="itemInfo.label" v-bind="itemInfo"
             v-else-if="ctrlType == 'input-number'">
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
             </template>
         </el-input-number>
         <!--input-->
-        <el-input v-model="ctrlValue" show-word-limit :maxlength="itemInfo.max || 25" :clearable="true"
+        <el-input v-model="ctrlValue" :placeholder="itemInfo.label" :maxlength="itemInfo.max || 25" :clearable="true"
             v-bind="itemInfo" v-else>
             <template v-for="(slot, index) in slots()" :key="index" #[slot]="data">
                 <slot :name="`${ctrlKey}-ctrl-${slot}`" :data></slot>
@@ -139,8 +145,10 @@
 <script setup>
 defineOptions({ inheritAttrs: false });
 import { onMounted, useAttrs, useSlots } from "vue";
+import { filterObject } from ".";
 const ctrlValue = defineModel({ required: true });
-const itemInfo = useAttrs().item;
+const itemInfo = filterObject(useAttrs().item, k => k != 'value');
+delete itemInfo.formatter;
 const ctrlKey = useAttrs().ctrlKey;
 const ctrlType = itemInfo.type;
 const model = useAttrs().model;

package/src/components/g-form.vue

@@ -1,5 +1,7 @@
 <template>
-    <el-form ref="gform" :model="model" v-bind="model.form" class="g-form-container">
+    <el-form ref="gform" :model="model"
+        v-bind="filterObject(model.form, k => !['columns', 'footer', 'submit', 'reset', 'slots', 'type', 'sort'].includes(k))"
+        class="g-form-container">
         <slot>
             <el-form-item :label="item.label" :prop="`${key}.value`" :rules="getItemRulesByItem(item)"
                 v-for="(item, key) of items" :key="key" v-bind="{ ...model?.formItems, ...item?.formItem }"
@@ -18,11 +20,13 @@
             <slot name="footer" v-if="!model.form.footer.hidden">
                 <div :style="model.form.footer.style">
                     <slot name="footer-left"></slot>
-                    <el-button @click="model.form.submit.click(model)" v-bind="model.form.submit"
+                    <el-button @click.stop="model.form.submit.click(formInfo, model)"
+                        v-bind="filterObject(model.form.submit, k => !['click'].includes(k))"
                         v-if="!model?.form?.submit?.hidden">
                         {{ model?.form?.submit?.label }}
                     </el-button>
-                    <el-button @click="model.form.reset.click(model)" v-bind="model.form.reset"
+                    <el-button @click="model.form.reset.click(model)"
+                        v-bind="filterObject(model.form.reset, k => !['click'].includes(k))"
                         v-if="!model?.form?.reset?.hidden">{{
                             model?.form?.reset?.label
                         }}</el-button>
@@ -34,15 +38,15 @@
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, useAttrs, watch, watchEffect } from "vue";
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
 import gCtrl from "./g-ctrl.vue";
-import { convertToPx, mergeObjects } from "./index";
+import { convertToPx, mergeObjects, filterObject } from "./index";
 defineOptions({
     name: "g-form",
     inheritAttrs: false
 })
 const model = defineModel({ required: true });
-const emits = defineEmits(["submit", "reset"]);
+const emits = defineEmits(["handSubmit", "reset"]);
 const gform = ref(null);
 let marginRight = ref(32);
 const options = inject('options');
@@ -73,13 +77,14 @@ const defaultFormAttrs = {
         label: "提交",
         plain: true,
         hidden: false,
-        click: async (model) => {
+        click: async (formInfo, model) => {
             if (!gform.value) return
             await gform.value.validate((valid, fields) => {
                 if (valid) {
-                    emits("submit", formInfo.value, model);
+                    emits("handSubmit", formInfo, model);
+                    console.log("提交");
                 } else {
-                    console.log('error submit!', fields);
+                    console.log('表单验证不通过!', fields);
                 }
             })
         },
@@ -101,6 +106,7 @@ const defaultFormAttrs = {
             }
         },
     },
+    slots: {}
 };
 model.value.form = mergeObjects(
     defaultFormAttrs,
@@ -138,7 +144,6 @@ const getItemRulesByItem = (item) => {
         }
         // 获取item属性并合并规则
         const itemInfo = { ...itemDefaultRule, ...item };
-
         //必填验证
         if (itemInfo.required) {
             itemRules.push({ required: true, message: `${itemInfo.label}不能为空！`, trigger: 'blur' });
@@ -204,7 +209,9 @@ const getItemRulesByItem = (item) => {
     return itemRules;
 }
 
-onMounted(() => { load(); })
+onMounted(() => {
+    load();
+})
 
 const load = () => {
     if (!model.value.form.inline) {
@@ -221,11 +228,14 @@ const load = () => {
     }
 };
 
+onBeforeUnmount(() => {
+    console.log('destroy');
+})
+
 watch(() => model.value.form.columns, () => load());
 watch(() => model.value.form.inline, () => load());
 
 const columnsWidth = computed(() => convertToPx(model.value.form.style.width) / model.value.form.columns);
-console.log(columnsWidth.value);
 //表单项
 const items = computed(() => Object.fromEntries(Object.entries(model.value)
     .filter(a => a[1].type != "hidden")

package/src/components/g-query-item.vue

@@ -0,0 +1,31 @@
+<template>
+    <template v-for="(item, key) of getQueryModel(props.more)" :key="key">
+        <slot :name="`query-item-${key}`" :item :model>
+            <el-form-item :label="item.label" v-bind="{ ...model.queryItems, ...item?.search }">
+                <slot :name="'query-' + key" :item :model>
+                    <g-ctrl v-model="queryModel[key]" :item :ctrlKey="key" :model>
+                        <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                            <slot :name="slotKey" :data :item :model></slot>
+                        </template>
+                    </g-ctrl>
+                </slot>
+                <template #label>
+                    <slot :name="'query-label-' + key" :item :model></slot>
+                </template>
+            </el-form-item>
+        </slot>
+    </template>
+</template>
+
+<script setup>
+import gCtrl from './g-ctrl.vue';
+import { computed, ref } from "vue";
+const model = defineModel({ required: true });
+const props = defineProps(["more"]);
+const queryModel = defineModel("info", { required: true });
+const getQueryModel = (flag) => computed(() =>
+    Object.fromEntries(Object.entries(model.value)
+        .filter(a => a[1].search && a[1].search.more === flag).map(key => [key[0], key[1]]))).value;
+</script>
+
+<style lang="scss" scoped></style>

package/src/components/g-query.vue

@@ -0,0 +1,217 @@
+<template>
+    <div class="g-query-container" style="position: relative;">
+        <el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
+            <g-query-item v-model="model" v-model:info="queryModel" :more="undefined">
+                <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                    <slot :name="slotKey" :model></slot>
+                </template>
+            </g-query-item>
+            <el-form-item>
+                <el-button v-bind="model.query.query" @click="model.query.query.click()">
+                    {{ model.query.query.label }}
+                </el-button>
+                <el-button v-bind="model.query.reset" @click="model.query.reset.click()">
+                    {{ model.query.reset.label }}
+                </el-button>
+                <el-button v-bind="model.query.more" @click="model.query.more.click()"
+                    v-if="model.query.more.mode !== 3">
+                    {{ model.query.more.label }}
+                </el-button>
+                <el-popover v-bind="model.query.more.dialog" v-if="model.query.more.mode == 3">
+                    <template #reference>
+                        <el-button v-bind="model.query.more">
+                            {{ model.query.more.label }}
+                        </el-button>
+                    </template>
+                    <template #default>
+                        <el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
+                            <g-query-item v-model="model" v-model:info="queryModel" :more="true">
+                                <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                                    <slot :name="slotKey" :model></slot>
+                                </template>
+                            </g-query-item>
+                        </el-form>
+                    </template>
+                </el-popover>
+                <slot name="btns"></slot>
+            </el-form-item>
+        </el-form>
+        <Transition :duration="300" name="nested">
+            <div v-if="isShowMore && !model.query.more.hidden && model.query.more.mode == 1" class="outer">
+                <div class="inner">
+                    <el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))"
+                        v-show="isShowMore" v-if="model.query.more.mode == 1">
+                        <g-query-item v-model="model" v-model:info="queryModel" :more="true">
+                            <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                                <slot :name="slotKey" :model></slot>
+                            </template>
+                        </g-query-item>
+                    </el-form>
+                </div>
+            </div>
+        </Transition>
+        <el-drawer v-model="isShowMore" title="更多查询" :show-close="false" v-bind="model.query.more.dialog"
+            v-if="isShowMore && !model.query.more.hidden && model.query.more.mode == 2">
+            <el-form v-bind="filterObject(model.query, k => !['query', 'more', 'reset'].includes(k))">
+                <g-query-item v-model="model" v-model:info="queryModel" :more="true">
+                    <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                        <slot :name="slotKey" :model></slot>
+                    </template>
+                </g-query-item>
+            </el-form>
+            <template #footer v-if="!model.query.more.dialog.footer.hidden">
+                <div v-bind="model.query.more.dialog.footer">
+                    <el-button v-bind="model.query.query" @click="model.query.query.click()">
+                        {{ model.query.query.label }}
+                    </el-button>
+                    <el-button v-bind="model.query.reset" @click="model.query.reset.click()">
+                        {{ model.query.reset.label }}
+                    </el-button>
+                </div>
+            </template>
+        </el-drawer>
+    </div>
+</template>
+
+<script setup>
+import { ref, inject } from 'vue'
+import gQueryItem from './g-query-item.vue';
+import { mergeObjects, filterObject } from './index';
+const model = defineModel({ required: true });
+const emits = defineEmits(['query', 'reset']);
+const options = inject('options');
+const isShowMore = ref(false);
+let initValues = Object.fromEntries(Object.entries(model.value).filter(a => a[1].search).map(([key, val]) => [key, val.value]));
+const queryModel = ref(initValues);
+const defaultQueryAttrs = {
+    hidden: false,
+    type: "hidden",
+    labelWidth: 100,
+    inline: true,
+    style: { display: "flex", flex: 1, "flex-wrap": "wrap" },
+    more: {
+        mode: 2,
+        hidden: false,
+        type: "primary",
+        label: "更多",
+        click: () => {
+            isShowMore.value = !isShowMore.value;
+        },
+    },
+    reset: {
+        label: "重置",
+        type: "primary",
+        hidden: false,
+        plain: false,
+        click: () => {
+            queryModel.value = ref(initValues);
+            emits('reset', queryModel.value);
+        },
+    },
+    query: {
+        hidden: false,
+        type: "primary",
+        label: "查询",
+        click: () => {
+            emits('query', queryModel.value);
+            isShowMore.value = false;
+        }
+    }
+}
+
+// 查询表单属性
+model.value.query = mergeObjects(defaultQueryAttrs, options?.query, model.value.query);
+
+// 表单 查询更多 属性 drawer 方式2  和  popover 方式3
+model.value.query.more.dialog = model.value.query.more.mode == 2 ? mergeObjects({
+    title: "更多查询", showClose: false, size: '30%', direction: "ttb", footer: {
+        hidden: false,
+        style: { textAlign: 'center' }
+    }
+}, model.value.query.more.dialog) : model.value.query.more.mode == 3 ? mergeObjects({
+    placement: "top-start", title: "更多查询", width: 1200, trigger: "click"
+}, model.value.query.more.dialog) : {};
+
+
+// 表单查询项属性
+const defaultQueryItemsAttrs = {
+    type: "hidden",
+    labelPosition: 'right',
+    style: {
+        width: "250px"
+    }
+};
+model.value.queryItems = mergeObjects(defaultQueryItemsAttrs, options?.queryItems, model.value.queryItems);
+
+</script>
+
+<style scoped>
+.g-query-container {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+    padding: 10px;
+    box-sizing: border-box;
+}
+
+.outer {
+    /* position: absolute; */
+    min-height: 100px;
+    border-radius: 10px;
+    background-color: rgba(255, 255, 255, 0.8);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    top: 60px;
+    padding: 10px;
+    width: 100%;
+    box-sizing: border-box;
+}
+
+.inner {
+    border-radius: 0;
+    min-height: 100px;
+    border: 1px solid #f2f2f2;
+    padding: 20px;
+    box-sizing: border-box;
+    width: 100%;
+    background-color: rgba(255, 255, 255, 1);
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+}
+
+.nested-enter-active,
+.nested-leave-active {
+    transition: all 0.3s ease-in-out;
+}
+
+/* delay leave of parent element */
+.nested-leave-active {
+    transition-delay: 0.25s;
+}
+
+.nested-enter-from,
+.nested-leave-to {
+    transform: translateY(-100px);
+    opacity: 0;
+}
+
+/* we can also transition nested elements using nested selectors */
+.nested-enter-active .inner,
+.nested-leave-active .inner {
+    transition: all 0.3s ease-in-out;
+}
+
+/* delay enter of nested element */
+.nested-enter-active .inner {
+    transition-delay: 0.25s;
+}
+
+.nested-enter-from .inner,
+.nested-leave-to .inner {
+    transform: translateY(-100px);
+    /*
+  	Hack around a Chrome 96 bug in handling nested opacity transitions.
+    This is not needed in other browsers or Chrome 99+ where the bug
+    has been fixed.
+  */
+    opacity: 0.001;
+}
+</style>

package/src/components/g-table.vue

@@ -1,8 +1,32 @@
 <template>
-    <el-table class="g-table-container" v-bind="{ ...$attrs, ...model.table }">
+    <div class="table-query-container">
+        <slot name="query">
+            <g-query v-model="model" @query="query" @reset="reset">
+                <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
+                    <slot :name="slotKey" :model></slot>
+                </template>
+                <template #btns>
+                    <slot name="btns">
+                        <div class="btns" v-if="model.control.add.auth()">
+                            <slot name="control-add-left"></slot>
+                            <slot name="control-add">
+                                <el-button v-bind="model.control.add" @click="model.control.add.click(model)">{{
+                                    model.control.add.label
+                                    }}</el-button>
+                            </slot>
+                            <slot name="control-add-right"></slot>
+                        </div>
+                    </slot>
+
+                </template>
+            </g-query>
+        </slot>
+
+    </div>
+    <el-table class="g-table-container" v-bind="{ ...$attrs, ...filterObject(model.table, k => k !== 'page') }">
         <slot>
             <el-table-column :prop="key" v-for="(value, key) of tableColumns" :key="key"
-                v-bind="{ ...itemValue, ...value }" header-align="center">
+                v-bind="{ ...model.tableColumns, ...value }" header-align="center">
                 <template #default="{ row, column, $index }"
                     v-if="value.type != 'selection' && value.type != 'index' && value.type != 'expand'">
                     <slot :name="`${key}`" :row :column :$index>
@@ -65,18 +89,20 @@
 <script setup>
 import dayjs from 'dayjs';
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, ref, watchEffect, h, inject } from 'vue';
+import { computed, watchEffect, inject, ref, h } from 'vue';
 import GForm from './g-form.vue';
-import { openModal, mergeObjects,convertToPx } from './index';
+import gQuery from './g-query.vue';
+import { openModal, mergeObjects, convertToPx, filterObject } from './index';
 
 defineOptions({
     name: "g-table",
     inheritAttrs: false
 })
 
-const emits = defineEmits(['load', 'view', "edit", "delete"]);
+const emits = defineEmits(['load', 'view', "edit", "delete", 'add']);
 const model = defineModel({ required: true });
 const options = inject('options');
+const queryInfo = ref({});
 
 //table default attrs
 const defaultTableAttrs = {
@@ -86,10 +112,10 @@ const defaultTableAttrs = {
     emptyText: '暂无数据',
     fit: false,
     type: "hidden",
-    height: "calc(100vh - 55px)",
+    height: "calc(100vh - 65px)",
     load: () => {
         let { currentPage, pageSize } = model.value.table.page;
-        emits('load', { currentPage, pageSize }, (data, total) => {
+        emits('load', { currentPage, pageSize, ...queryInfo.value }, (data, total) => {
             model.value.table.data = data;
             model.value.table.page.total = total;
         });
@@ -113,78 +139,115 @@ model.value.table = mergeObjects(
     options?.table,
     model.value.table
 );
-
 const defaultControl = {
     type: 'control', label: '操作', edit: false, width: 250, fixed: 'right',
     style: { ...model.value?.control?.style },
     add: {
         label: '新增', text: false, type: 'primary',
+        style: {
+            marginLeft: "10px",
+        },
         dialog: {
             title: '新增',
-            popMode: "dialog",
-            slots: {
-                default: () => h(GForm, { modelValue: model.value }),
-            },
-        },
-        auth: () => {
-            return true;
+            mode: "drawer",
         },
-        click: (row, column, $index, m) => {
-            model.value.form.disabled = undefined;
-            emits("add", row, column, $index, m);
-            Object.keys(row).forEach(key => {
+        auth: () => true,
+        click: (m) => {
+            model.value.form = {
+                ...model.value.form,
+                type: 'hidden',
+                disabled: undefined,
+                footer: { hidden: false }
+            };
+            let w = model.value?.form?.style?.width || 600;
+            if (model.value.control.add.dialog.mode == "drawer") {
+                model.value.control.add.dialog.size = convertToPx(w) + 45;
+            } else {
+                model.value.control.add.dialog.width = convertToPx(w) + 35;
+            }
+            emits("add", m);
+            Object.keys(initFormData).forEach(key => {
                 if (model.value[key]) {
-                    model.value[key].value = row[key];
+                    model.value[key].value = initFormData[key];
                 }
             });
-            openModal(model.value.control.add.dialog, model.value?.control?.add?.dialog?.popMode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.add?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            key: new Date(),
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.add?.dialog?.mode);
         },
     },
     view: {
         label: '查看', text: true, type: 'success',
         dialog: {
             title: '查看',
-            popMode: "dialog",
-            slots: {
-                default: () => h(GForm, { modelValue: model.value }),
-            },
+            mode: "dialog",
         },
         auth: (row, column, $index) => {
             return false;
         },
         click: (row, column, $index, m) => {
+            model.value.form = {
+                ...model.value.form,
+                type: 'hidden',
+                disabled: true,
+                footer: { hidden: true }
+            };
             let w = model.value?.form?.style?.width || 600;
-            if (model.value.control.view.dialog.popMode == "drawer") {
+            if (model.value.control.view.dialog.mode == "drawer") {
                 model.value.control.view.dialog.size = convertToPx(w) + 45;
             } else {
                 model.value.control.view.dialog.width = convertToPx(w) + 35;
             }
-            model.value.form.disabled = true;
             emits("view", row, column, $index, m);
             Object.keys(row).forEach(key => {
                 if (model.value[key]) {
                     model.value[key].value = row[key];
                 }
             });
-            openModal(model.value.control.view.dialog, model.value?.control?.view?.dialog?.popMode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.view?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.view?.dialog?.mode);
         },
     },
     edit: {
         label: '编辑', text: true, type: 'primary',
         dialog: {
             title: '编辑',
-            popMode: "dialog",
-            slots: {
-                default: () => h(GForm, { modelValue: model.value }),
-            },
+            mode: "dialog",
         },
         auth: (row, column, $index) => {
             return true;
         },
         click: (row, column, $index, m) => {
-            model.value.form.disabled = undefined;
+            model.value.form = {
+                ...model.value.form,
+                type: 'hidden',
+                disabled: undefined,
+                footer: { hidden: false }
+            };
             let w = model.value?.form?.style?.width || 600;
-            if (model.value.control.edit.dialog.popMode == "drawer") {
+            if (model.value.control.edit.dialog.mode == "drawer") {
                 model.value.control.edit.dialog.size = convertToPx(w) + 45;
             } else {
                 model.value.control.edit.dialog.width = convertToPx(w) + 35;
@@ -195,7 +258,19 @@ const defaultControl = {
                     model.value[key].value = row[key];
                 }
             });
-            openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.popMode);
+            let colse = openModal(
+                {
+                    ...model.value?.control?.edit?.dialog,
+                    slots: {
+                        default: () => h(GForm, {
+                            modelValue: model.value,
+                            ...model.value.form,
+                            onHandSubmit: () => {
+                                colse();
+                            },
+                        }, { ...model.value.form.slots })
+                    }
+                }, model.value?.control?.edit?.dialog?.mode);
         },
     },
     delete: {
@@ -212,6 +287,7 @@ const defaultControl = {
                 emits("delete", { row, column, $index }, (res) => {
                     if (res) {
                         model.value.table.data.splice($index, 1);
+                        model.value.table.page.total--;
                     }
                 })
             }).catch(() => { });
@@ -226,12 +302,24 @@ model.value.control = mergeObjects(
     model.value?.control
 );
 
-//table column default attrs 
-const itemValue = ref({
-    width: 100, align: "center", formatter: (row, column, cellValue, index) => {
+const defaultTableColumnsAttrs = {
+    type: "hidden",
+    width: 120,
+    align: "center",
+    formatter: (row, column, cellValue, index) => {
         return cellValue;
     }
-});
+};
+
+model.value.tableColumns = mergeObjects(
+    defaultTableColumnsAttrs,
+    options?.tableColumns,
+    model.value?.tableColumns
+);
+
+const initFormData = Object.fromEntries(Object.entries(filterObject(model.value, (k, val) => {
+    return (val.type != 'control' && val.edit !== false && val.type != 'hidden');
+})).map(([key, val]) => [key, val.value]));
 
 //扩展formatter方法
 const formatterExtends = (item, str) => {
@@ -272,9 +360,17 @@ const formatterExtends = (item, str) => {
     return trueValue
 }
 
-onMounted(() => {
+const reset = (q) => {
+    console.log(q);
+    queryInfo.value = q.value;
+    //model.value.table.load();
+}
+
+const query = (q) => {
+    queryInfo.value = q;
+    //model.value.table.load();
+}
 
-});
 
 watchEffect(() => {
     model.value.table.load();
@@ -290,6 +386,4 @@ const tableColumns = computed(() => Object.fromEntries(
             return [key[0], key[1]]
         }).sort((a, b) => a[1].sort - b[1].sort))
 );
-</script>
-
-<style lang="scss" scoped></style>
+</script>

package/src/components/index.d.ts

@@ -1,34 +1,90 @@
-import { App } from 'vue';
+// 导入Vue的Component模块
 import { Component } from 'vue';
-import { ElDialogProps, ElDrawerProps } from 'element-plus';
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        openModel: typeof openModal;
-    }
-}
+// 从element-plus库中导入ElDialog和ElDrawer组件
+import { ElDialog, ElDrawer } from 'element-plus';
 
+/**
+ * 全局选项的接口定义
+ */
 export interface GlobalOptions {
     // 在这里定义全局选项的类型
 }
 
+/**
+ * 打开模态框的属性接口定义
+ */
 export interface OpenModalProps {
+    // 在这里定义传递给模态组件的属性类型
     slots?: {
-        default?: () => any;
-        header?: () => any;
-        footer?: () => any;
+        // 默认插槽的函数类型定义
+        default?: (a: any) => any;
+        // 头部插槽的函数类型定义
+        header?: (p: any) => any;
+        // 底部插槽的函数类型定义
+        footer?: (p: any) => any;
     };
-    // 在这里定义其他传递给openModal函数的属性
 }
 
-export function install(app: App, options?: GlobalOptions): void;
-export function openModal(props?: OpenModalProps, popMode?: 'dialog' | 'drawer'): void;
-export function convertToPx(value: string | number, referenceSize?: number): number;
-export function mergeObjects<T extends object>(...objects: T[]): T;
+/**
+ * 转换为像素的选项接口定义
+ */
+export interface ConvertToPxOptions {
+    // 参考尺寸的可选属性，类型为number
+    referenceSize?: number;
+}
 
-declare const components: {
-    gTable: Component;
-    gForm: Component;
-};
+/**
+ * 合并对象的选项接口定义
+ */
+export interface MergeObjectsOptions {
+    // 在这里定义合并对象的选项类型
+}
+
+/**
+ * 过滤对象的选项接口定义
+ */
+export interface FilterObjectOptions {
+    // 过滤函数的可选属性，类型为(key: string, value: any) => boolean
+    filter?: (key: string, value: any) => boolean;
+}
 
-export default components;
+/**
+ * 打开模态框的函数定义
+ * @param {OpenModalProps} [props] - 传递给模态组件的属性
+ * @param {'dialog' | 'drawer'} [mode] - 模态框的模式，可选值为'dialog'或'drawer'
+ * @returns {() => void} - 返回一个函数，用于关闭模态框
+ */
+export function openModal(props?: OpenModalProps, mode?: 'dialog' | 'drawer'): () => void;
+
+/**
+ * 将值转换为像素的函数定义
+ * @param {string | number} value - 需要转换的值
+ * @param {ConvertToPxOptions} [options] - 转换选项
+ * @returns {number} - 转换后的像素值
+ */
+export function convertToPx(value: string | number, options?: ConvertToPxOptions): number;
+
+/**
+ * 合并多个对象的函数定义
+ * @param {...Record<string, any>} objects - 需要合并的对象
+ * @returns {Record<string, any>} - 合并后的对象
+ */
+export function mergeObjects(...objects: Array<Record<string, any>>): Record<string, any>;
+
+/**
+ * 过滤对象的函数定义
+ * @param {Record<string, any>} obj - 需要过滤的对象
+ * @param {FilterObjectOptions} [options] - 过滤选项
+ * @returns {Record<string, any>} - 过滤后的对象
+ */
+export function filterObject(obj: Record<string, any>, options?: FilterObjectOptions): Record<string, any>;
+
+/**
+ * 扩展Vue的ComponentCustomProperties接口，添加openModel属性
+ */
+declare module 'vue' {
+    interface ComponentCustomProperties {
+        // openModel属性的类型定义，指向openModal函数
+        openModel: typeof openModal;
+    }
+}

package/src/components/index.js

@@ -2,11 +2,11 @@
 
 import ElementPlus from 'element-plus'
 import { ElDialog, ElDrawer } from "element-plus";
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
 import gTable from "./g-table.vue";
 import gForm from "./g-form.vue";
 import { createApp, h, provide, readonly, ref } from "vue";
 const globalOptions = {};
-
 const components = [
     gTable,
     gForm
@@ -19,42 +19,73 @@ export default {
             app.component(component.name, component);
         }
         app.provide("options", readonly(options));
-        app.config.globalProperties.openModel = openModal;
+        app.config.globalProperties.openModal = openModal;
     }
 }
-const openModal = (props = {}, popMode = "dialog") => {
+
+/**
+ * 打开模态对话框的函数。
+ * @param {Object} modalProps - 模态对话框的属性。
+ * @param {string} [mode="dialog"] - 模态对话框的模式，支持"dialog"和"drawer"。
+ * @returns {Function} - 关闭模态对话框的函数。
+ */
+const openModal = (modalProps = {}, mode = "dialog") => {
+    // 创建一个新的 div 元素
     const el = document.createElement('div');
-    const app = createApp({
+    // 定义关闭模态对话框的函数
+    let closeModal = () => { };
+    // 使用 ref 创建一个响应式的 visible 变量
+    const visible = ref(true);
+    // 创建一个新的 Vue 应用实例
+    let modalApp = createApp({
         setup() {
-            const visible = ref(true);
-            const closeModal = () => {
+            // 定义关闭模态对话框的函数
+            closeModal = () => {
                 visible.value = false;
-                app.unmount(); // 关闭对话框时卸载组件
-                delete el.remove(); // 关闭对话框时删除元素
+                modalApp.unmount(); // 关闭对话框时卸载组件
+                el.remove(); // 关闭对话框时删除元素
+                modalApp = null;
             };
-            provide("options", globalOptions);
-            return () => h(popMode == "dialog" ? ElDialog : popMode == "drawer" ? ElDrawer : null, {
+            // 返回渲染函数
+            return () => h(mode == "dialog" ? ElDialog : mode == "drawer" ? ElDrawer : null, {
                 modelValue: visible.value,
                 'onUpdate:modelValue': closeModal,
                 draggable: true,
                 "append-to-body": true,
-                ...props
+                'destroy-on-close': true,
+                ...modalProps
             },
                 {
-                    default: props.slots?.default ? () => h('div', {}, props.slots.default()) : null,
-                    header: props.slots?.header ? () => h('div', {}, props.slots.header()) : null,
-                    footer: props.slots?.footer ? () => h('div', {}, props.slots.footer()) : null
+                    default: modalProps.slots?.default ? () => modalProps.slots.default() : null,
+                    header: modalProps.slots?.header ? () => h('div', {}, modalProps.slots.header()) : null,
+                    footer: modalProps.slots?.footer ? () => h('div', {}, modalProps.slots.footer()) : null
                 }
             );
         }
     });
+    // 注册全局组件
     for (const component of components) {
-        app.component(component.name, component);
+        modalApp.component(component.name, component);
     }
-    app.use(ElementPlus).mount(el);
+    // 提供全局选项
+    modalApp.provide("options", globalOptions);
+    // 使用 ElementPlus 插件
+    modalApp.use(ElementPlus, { locale: zhCn }).mount(el);
+    // 将元素添加到 body 中
     document.body.appendChild(el);
+    // 返回关闭模态对话框的函数
+    return closeModal;
 };
 
+
+/**
+ * 将值转换为像素的函数，支持px、vh、vw、%和calc表达式。
+ * @param {string|number} value - 需要转换的值。
+ * @param {number} [referenceSize=window.innerWidth] - 用于转换%值的参考大小。
+ * @returns {number} - 转换后的像素值。
+ * @throws {Error} - 如果无法识别单位或提供的参考大小无效。
+ */
+
 function convertToPx(value, referenceSize = window.innerWidth) {
     // 如果已经是px，直接返回
     if (typeof value === 'number') {
@@ -105,6 +136,11 @@ function convertToPx(value, referenceSize = window.innerWidth) {
     throw new Error('Unsupported unit in value: ' + value);
 }
 
+/**
+ * 合并多个对象的函数，递归地合并嵌套对象。
+ * @param {...Object} objects - 需要合并的对象。
+ * @returns {Object} - 合并后的对象。
+ */
 
 function mergeObjects(...objects) {
     const result = ref({});
@@ -123,4 +159,23 @@ function mergeObjects(...objects) {
     }
     return result.value;
 }
-export { openModal, convertToPx, mergeObjects };
+
+/**
+ * 过滤对象的函数，根据给定的过滤条件返回一个新的对象。
+ * @param {Object} obj - 需要过滤的对象。
+ * @param {Function} filter - 过滤条件函数，接收键和值作为参数，返回布尔值。
+ * @returns {Object} - 过滤后的新对象。
+ */
+function filterObject(obj, filter = (key, value) => filter(key, value)) {
+    const result = {};
+    for (const key in obj) {
+        if (obj.hasOwnProperty(key)) {
+            if (filter(key, obj[key])) {
+                result[key] = obj[key];
+            }
+        }
+    }
+    return result;
+}
+
+export { openModal, convertToPx, mergeObjects, filterObject };