vue-2024-ui 0.0.8 → 0.0.9

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.9",
   "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="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(["usubmit", "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) => {
+            emits("usubmit", formInfo, model);
             if (!gform.value) return
             await gform.value.validate((valid, fields) => {
                 if (valid) {
-                    emits("submit", formInfo.value, model);
+                    console.log("提交");
                 } else {
-                    console.log('error submit!', fields);
+                    console.log('表单验证不通过!', fields);
                 }
             })
         },
@@ -101,6 +106,7 @@ const defaultFormAttrs = {
             }
         },
     },
+    slots: {}
 };
 model.value.form = mergeObjects(
     defaultFormAttrs,
@@ -204,7 +210,9 @@ const getItemRulesByItem = (item) => {
     return itemRules;
 }
 
-onMounted(() => { load(); })
+onMounted(() => {
+    load();
+})
 
 const load = () => {
     if (!model.value.form.inline) {
@@ -221,11 +229,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,21 @@
 <script setup>
 import dayjs from 'dayjs';
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, ref, watchEffect, h, inject } from 'vue';
+import { computed, onMounted, watchEffect, h, inject, ref, defineAsyncComponent, shallowRef } from 'vue';
 import GForm from './g-form.vue';
-import { openModal, mergeObjects,convertToPx } from './index';
+import gQuery from './g-query.vue';
+import { openModal, mergeObjects, convertToPx } from './index';
+import { filterObject } from '.';
 
 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 +113,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;
         });
@@ -114,77 +141,104 @@ model.value.table = mergeObjects(
     model.value.table
 );
 
+let closeModel = ref(() => { });
+const editModel = defineAsyncComponent(() => import('./g-form.vue'));
 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",
+            mode: "drawer",
             slots: {
-                default: () => h(GForm, { modelValue: model.value }),
+                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
             },
         },
-        auth: () => {
-            return true;
-        },
-        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,
+            };
+            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);
+            model.value.form.close = openModal(model.value.control.add.dialog, model.value?.control?.add?.dialog?.mode);
         },
     },
     view: {
         label: '查看', text: true, type: 'success',
         dialog: {
             title: '查看',
-            popMode: "dialog",
+            mode: "dialog",
             slots: {
-                default: () => h(GForm, { modelValue: model.value }),
+                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
             },
         },
         auth: (row, column, $index) => {
             return false;
         },
         click: (row, column, $index, m) => {
+            model.value.form = {
+                ...model.value.form,
+                type: 'hidden',
+                disabled: 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);
+            model.value.form.close = openModal(model.value.control.view.dialog, model.value?.control?.view?.dialog?.mode);
         },
     },
     edit: {
         label: '编辑', text: true, type: 'primary',
         dialog: {
             title: '编辑',
-            popMode: "dialog",
+            mode: "dialog",
             slots: {
-                default: () => h(GForm, { modelValue: model.value }),
+                default: () => {
+                    model.value.form.onUsubmit = () => {
+                        if (closeModel.value)
+                            closeModel.value();
+                    }
+                    return h(editModel, { modelValue: model.value, ...model.value.form }, { ...model.value.form.slots })
+                },
             },
         },
         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,
+            };
             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 +249,7 @@ const defaultControl = {
                     model.value[key].value = row[key];
                 }
             });
-            openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.popMode);
+            closeModel.value = openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.mode);
         },
     },
     delete: {
@@ -212,6 +266,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 +281,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,6 +339,17 @@ const formatterExtends = (item, str) => {
     return trueValue
 }
 
+const reset = (q) => {
+    console.log(q);
+    queryInfo.value = q.value;
+    //model.value.table.load();
+}
+
+const query = (q) => {
+    queryInfo.value = q;
+    //model.value.table.load();
+}
+
 onMounted(() => {
 
 });
@@ -290,6 +368,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,37 @@
-import { App } from 'vue';
-import { Component } from 'vue';
-import { ElDialogProps, ElDrawerProps } from 'element-plus';
-
-declare module 'vue' {
-    interface ComponentCustomProperties {
-        openModel: typeof openModal;
-    }
-}
+import { Component, VNode } from 'vue';
+
+declare const ElementPlus: any; // 假设ElementPlus已经有了类型声明
+declare const ElDialog: Component;
+declare const ElDrawer: Component;
 
 export interface GlobalOptions {
-    // 在这里定义全局选项的类型
+    // 这里定义全局选项的类型
 }
 
 export interface OpenModalProps {
     slots?: {
-        default?: () => any;
-        header?: () => any;
-        footer?: () => any;
+        default?: (a: any) => VNode;
+        header?: (p: any) => VNode;
+        footer?: (p: any) => VNode;
     };
-    // 在这里定义其他传递给openModal函数的属性
+    // 其他props的类型定义
 }
 
-export function install(app: App, options?: GlobalOptions): void;
-export function openModal(props?: OpenModalProps, popMode?: 'dialog' | 'drawer'): void;
+export function openModal(props?: OpenModalProps, mode?: 'dialog' | 'drawer'): () => void;
+
 export function convertToPx(value: string | number, referenceSize?: number): number;
-export function mergeObjects<T extends object>(...objects: T[]): T;
 
-declare const components: {
+export function mergeObjects<T>(...objects: T[]): T;
+
+export function filterObject<T>(obj: T, filter?: (key: keyof T) => boolean): T;
+
+export const components: {
     gTable: Component;
     gForm: Component;
+    // 其他组件的类型定义
 };
 
-export default components;
+declare const _default: {
+    install: (app: any, options?: GlobalOptions) => void;
+};
+export default _default;

package/src/components/index.js

@@ -22,18 +22,20 @@ export default {
         app.config.globalProperties.openModel = openModal;
     }
 }
-const openModal = (props = {}, popMode = "dialog") => {
+const openModal = (props = {}, mode = "dialog") => {
     const el = document.createElement('div');
-    const app = createApp({
+    let closeModal = () => { };
+    const visible = ref(true);
+    let modalApp = createApp({
         setup() {
-            const visible = ref(true);
-            const closeModal = () => {
+            closeModal = () => {
                 visible.value = false;
-                app.unmount(); // 关闭对话框时卸载组件
+                modalApp.unmount(); // 关闭对话框时卸载组件
                 delete 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,
@@ -41,18 +43,19 @@ const openModal = (props = {}, popMode = "dialog") => {
                 ...props
             },
                 {
-                    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: props.slots?.default ? (a) => h('div', {}, props.slots.default(a)) : null,
+                    header: props.slots?.header ? (p) => h('div', {}, props.slots.header(p)) : null,
+                    footer: props.slots?.footer ? (p) => h('div', {}, props.slots.footer(p)) : null
                 }
             );
         }
     });
     for (const component of components) {
-        app.component(component.name, component);
+        modalApp.component(component.name, component);
     }
-    app.use(ElementPlus).mount(el);
+    modalApp.use(ElementPlus).mount(el);
     document.body.appendChild(el);
+    return closeModal;
 };
 
 function convertToPx(value, referenceSize = window.innerWidth) {
@@ -123,4 +126,18 @@ function mergeObjects(...objects) {
     }
     return result.value;
 }
-export { openModal, convertToPx, mergeObjects };
+
+
+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 };