vue-2024-ui 0.0.7 → 0.0.9

package/README.form.md

@@ -10,8 +10,8 @@
 | --------- | ------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
 | columns   | 表单列数                                                            | number | 2                                                                                            |
 | footer    | 控制表单底部按钮是否显示和样式设置，hidden默认是false,style控制样式 | object | ```{hidden: false, style:{ display:"flex","align-items":"center",justifyContent:"center"}``` |
-| submit    | 表单提交按钮，增加了submitText，hidden 属性和submit方法             | object | ``` {type: "primary",submitText: "提交",hidden: false,submit: async (model) => {...}, } ```  |
-| reset     | 表单重置按钮，增加了restText，hidden 属性和reset方法                | object | ``` {type: "primary",resetText: "重置",hidden: false,reset: () => {...}, } ```               |
+| submit    | 表单提交按钮，增加了label，hidden 属性和click方法             | object | ``` {type: "primary",label: "提交",hidden: false,click: async (model) => {...}, } ```  |
+| reset     | 表单重置按钮，增加了label，hidden 属性和click方法                | object | ``` {type: "primary",label: "重置",hidden: false,click: () => {...}, } ```               |
 | formItems | 通过style属性设置所有items的样式                                    | object | ``` style:{width:100%} ```                                                                   |
 
 ## form 增加的事件
@@ -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.7",
+  "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,9 +1,11 @@
 <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 }"
-                :style="{ ...model.formItems.style, ...item?.formItem?.style }">
+                v-for="(item, key) of items" :key="key" v-bind="{ ...model?.formItems, ...item?.formItem }"
+                :style="{ ...model?.formItems?.style, ...item?.formItem?.style }">
                 <slot :name="key" :item :model>
                     <g-ctrl v-model="model[key].value" :item :ctrlKey="key" :model class="g-ctrl-container">
                         <template v-for="(slot, slotKey, index) in $slots" :key="index" #[slotKey]="data">
@@ -15,41 +17,41 @@
                     <slot :name="`${key}-label`" :data :item :model>{{ item.label }}</slot>
                 </template>
             </el-form-item>
-            <el-form-item style="width: 100%;" v-if="!model.form.footer.hidden">
-                <slot name="footer">
-                    <div :style="model.form.footer.style">
-                        <slot name="footer-left"></slot>
-                        <el-button @click="model.form.submit.submit(model)" v-bind="model.form.submit"
-                            v-if="!model.form.submit.hidden">
-                            {{ model.form.submit.submitText }}
-                        </el-button>
-                        <el-button @click="model.form.reset.reset(model)" v-bind="model.form.reset"
-                            v-if="!model.form.reset.hidden">{{
-                                model.form.reset.resetText
-                            }}</el-button>
-                        <slot name="footer-right"></slot>
-                    </div>
-                </slot>
-            </el-form-item>
+            <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(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="filterObject(model.form.reset, k => !['click'].includes(k))"
+                        v-if="!model?.form?.reset?.hidden">{{
+                            model?.form?.reset?.label
+                        }}</el-button>
+                    <slot name="footer-right"></slot>
+                </div>
+            </slot>
         </slot>
     </el-form>
 </template>
 
 <script setup>
-import { computed, inject, onMounted, ref, useAttrs, watch } from "vue";
+import { computed, getCurrentInstance, inject, onBeforeUnmount, onMounted, ref, useAttrs, watch } from "vue";
 import gCtrl from "./g-ctrl.vue";
+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);
-const columnsWidth = ref(0);
 let marginRight = ref(32);
-const options=inject('options');
-//合并表单默认属性
-model.value.form = {
+const options = inject('options');
+
+const defaultFormAttrs = {
     inline: true,
     type: "hidden",
     "scroll-to-error": true,
@@ -57,58 +59,43 @@ model.value.form = {
     "status-icon": true,
     "scroll-into-view-options": true,
     columns: 2,
-    ...options?.form,
-    ...model.value.form,
     style: {
         width: "600px",
-        border: "1px solid rgba(0, 0, 0,0.09)",
-        borderRadius: "10px",
-        padding: "0px",
-        paddingTop: "20px",
-        margin: "0px",
-        boxShadow: "0 0 5px rgba(0, 0, 0, 0.1)",
-        ...options?.form?.style,
-        ...model.value.form?.style,
-        ...useAttrs().style
+        ...useAttrs()?.style
     },
     // 表单底部属性
     footer: {
         hidden: false,
-        ...options?.form?.footer,
-        ...model.value.form?.footer,
         style: {
-            display: "flex", width: "100%", "align-items": "center", justifyContent: "center", margin: "5px", 
-            ...options?.form?.footer?.style,
-            ...model.value.form?.footer?.style
+            display: "flex", width: "100%", "align-items": "center", justifyContent: "center", margin: "5px",
         },
     },
     //表单提交按钮属性
     submit: {
         type: "primary",
         disabled: false,
-        submitText: "提交",
+        label: "提交",
         plain: true,
         hidden: false,
-        ...options?.form?.submit,
-        submit: 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);
                 }
             })
         },
-        ...model.value.form?.submit
     },
     //表单重置按钮属性
     reset: {
         disabled: false,
-        resetText: "重置",
+        label: "重置",
         hidden: false,
         plain: true,
-        reset: () => {
+        click: () => {
             if (!gform.value) return
             let isreset = true;
             emits("reset", (flag) => {
@@ -118,25 +105,25 @@ model.value.form = {
                 gform.value.resetFields();
             }
         },
-        ...options?.form?.reset,
-        ...model.value.form?.reset
     },
-    dialog: {
-        width: 635,
-        ...options?.form?.dialog,
-        ...model.value.form?.dialog
-    }
+    slots: {}
 };
-//合并表单项默认属性
-model.value.formItems = {
+model.value.form = mergeObjects(
+    defaultFormAttrs,
+    options?.form,
+    model.value?.form
+);
+const defaultFormItemsAttrs = {
     type: "hidden",
     style: {
         width: "100%",
-        ...options?.formItems?.style,
-        ...model.value.formItems?.style
-    },
-    ...model.value.formItems,
+    }
 };
+model.value.formItems = mergeObjects(
+    defaultFormItemsAttrs,
+    options?.formItems,
+    model?.formItems
+);
 
 //获取表单项验证规则
 const getItemRulesByItem = (item) => {
@@ -231,40 +218,35 @@ const load = () => {
     if (!model.value.form.inline) {
         model.value.form.columns = 1;
     }
-    if (model.value.form.style.width) {
-        columnsWidth.value = removePx(model.value.form.style.width) / model.value.form.columns;
-    }
-    else {
-        model.value.form.style.width = "600px";
-    }
-    model.value.form.dialog.width = +model.value?.form?.style?.width.replace("px", "") + 35 + "px";
     for (const [key, value] of Object.entries(items.value)) {
-        model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem }
+        model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem };
         model.value[key].formItem.style = { ...model.value[key].formItem.style, ...value.formItem.style };
-        if (value.columns && value.columns > 1) {
-            if (model.value.form.inline) {
-                let column = columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value;
-                model.value[key].formItem.style.width = `calc(${column}px)`;
-            } else {
-                model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
-            }
-        } else {
-            model.value[key].formItem.style.width = `calc(${columnsWidth.value - marginRight.value}px)`;
-        }
+
+        const columnWidth = value.columns && value.columns > 1 ?
+            columnsWidth.value * value.columns - (value.columns - 1) * marginRight.value :
+            columnsWidth.value - marginRight.value;
+        model.value[key].formItem.style.width = `calc(${columnWidth}px)`;
     }
-}
+};
+
+onBeforeUnmount(() => {
+    console.log('destroy');
+})
 
 watch(() => model.value.form.columns, () => load());
 watch(() => model.value.form.inline, () => load());
 
-const removePx = (el) => parseFloat(el.replace("px", ""));
+const columnsWidth = computed(() => convertToPx(model.value.form.style.width) / model.value.form.columns);
 //表单项
-const items = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden")
+const items = computed(() => Object.fromEntries(Object.entries(model.value)
+    .filter(a => a[1].type != "hidden")
     .filter(a => (a[1].edit !== false))
     .filter(a => (a[1].type !== "control"))
     .map(key => [key[0], key[1]])));
 //表单提交对象
-const formInfo = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").map(key => [key[0], key[1].value])));
-//表单列数
-const columns = computed(() => model.value.form.columns);
+const formInfo = computed(() => Object.fromEntries(Object.entries(model.value)
+    .filter(a => a[1].type != "hidden")
+    .filter(a => a[1].type != "control")
+    .map(key => [key[0], key[1].value])));
+
 </script>

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>
@@ -16,7 +40,7 @@
                             <slot name="control-view" :row :column :$index
                                 v-if="model.control.view.auth(row, column, $index)">
                                 <el-button v-bind="model.control.view"
-                                    @click="model.control.view.view(row, column, $index, model)">{{
+                                    @click="model.control.view.click(row, column, $index, model)">{{
                                         model.control.view.label
                                     }}</el-button>
                             </slot>
@@ -24,7 +48,7 @@
                             <slot name="control-edit" :row :column :$index
                                 v-if="model.control.edit.auth(row, column, $index)">
                                 <el-button v-bind="model.control.edit"
-                                    @click="model.control.edit.edit(row, column, $index, model)">{{
+                                    @click="model.control.edit.click(row, column, $index, model)">{{
                                         model.control.edit.label
                                     }}</el-button>
                             </slot>
@@ -32,7 +56,7 @@
                             <slot name="control-delete" :row :column :$index
                                 v-if="model.control.delete.auth(row, column, $index)">
                                 <el-button v-bind="model.control.delete"
-                                    @click="model.control.delete.delete(row, column, $index)">{{
+                                    @click="model.control.delete.click(row, column, $index)">{{
                                         model.control.delete.label }}</el-button>
                             </slot>
                             <slot name="control-right" :row :column :$index> </slot>
@@ -65,148 +89,216 @@
 <script setup>
 import dayjs from 'dayjs';
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, reactive, watchEffect, h ,inject} from 'vue';
+import { computed, onMounted, watchEffect, h, inject, ref, defineAsyncComponent, shallowRef } from 'vue';
 import GForm from './g-form.vue';
-import { openModal } 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
-model.value.table = {
+const defaultTableAttrs = {
     data: [],
     border: true,
     stripe: true,
     emptyText: '暂无数据',
     fit: false,
     type: "hidden",
-    height: "calc(100vh - 55px)",
-    ...options?.table,
-    ...model.value.table,
+    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;
         });
     },
     page: {
-        background: true,
+        background: "red",
         total: 0,
         pageSize: 20,
         currentPage: 1,
         pageSizes: [5, 10, 20, 30, 40, 50],
         layout: 'total, sizes, prev, pager, next, jumper',
-        ...options?.table?.page,
-        ...model.value.table?.page,
         style: {
             display: 'flex',
             justifyContent: 'flex-end',
             padding: "10px",
-            ...model.value.table?.page?.style
         },
     }
-}
+};
+model.value.table = mergeObjects(
+    defaultTableAttrs,
+    options?.table,
+    model.value.table
+);
 
-model.value.form = {
-    type: 'hidden',
-    ...options?.form,
-    ...model.value.form,
-    dialog: {
-        width: 635,
-        ...model.value.form?.dialog,
-        style: {
-            ...model.value.form?.dialog?.style
-        }
-    }
-}
-model.value.control = {
-    type: 'control', label: '操作', edit: false, width: 250, fixed: 'right',...options?.control, ...model.value?.control,
+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: '新增',
+            mode: "drawer",
+            slots: {
+                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
+            },
+        },
+        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 = initFormData[key];
+                }
+            });
+            model.value.form.close = openModal(model.value.control.add.dialog, model.value?.control?.add?.dialog?.mode);
+        },
+    },
     view: {
         label: '查看', text: true, type: 'success',
+        dialog: {
+            title: '查看',
+            mode: "dialog",
+            slots: {
+                default: () => h(GForm, { modelValue: model.value }, { ...model.value.form.slots }),
+            },
+        },
         auth: (row, column, $index) => {
             return false;
         },
-        view: (row, column, $index, m) => {
-            model.value.form.disabled = true;
+        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.mode == "drawer") {
+                model.value.control.view.dialog.size = convertToPx(w) + 45;
+            } else {
+                model.value.control.view.dialog.width = convertToPx(w) + 35;
+            }
             emits("view", row, column, $index, m);
-            model.value.form.dialog.width = +(model.value?.form?.style?.width?.replace("px", "")) + 35 || 635;
-            openModal({
-                title: '查看',
-                width: model.value.form?.dialog?.width,
-                ...model.value.form.dialog,
-                slots: {
-                    // 自定义插槽内容
-                    default: () => h(GForm, { modelValue: model.value }),
-                    ...model.value?.form?.dialog?.slots
-                },
+            Object.keys(row).forEach(key => {
+                if (model.value[key]) {
+                    model.value[key].value = row[key];
+                }
             });
+            model.value.form.close = openModal(model.value.control.view.dialog, model.value?.control?.view?.dialog?.mode);
         },
-        ...options?.control?.view,
-        ...model.value?.control?.view
     },
     edit: {
         label: '编辑', text: true, type: 'primary',
+        dialog: {
+            title: '编辑',
+            mode: "dialog",
+            slots: {
+                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;
         },
-        edit: (row, column, $index, m) => {
-            model.value.form.disabled = undefined;
+        click: (row, column, $index, m) => {
+            model.value.form = {
+                ...model.value.form,
+                type: 'hidden',
+                disabled: undefined,
+            };
+            let w = model.value?.form?.style?.width || 600;
+            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;
+            }
             emits("edit", row, column, $index, m);
-            model.value.form.dialog.width = +(model.value?.form?.style?.width?.replace("px", "")) + 35 || 635;
-            openModal({
-                title: '编辑',
-                width: model.value.form?.dialog?.width,
-                ...model.value.form.dialog,
-                slots: {
-                    // 自定义插槽内容
-                    default: () => h(GForm, { modelValue: model.value }),
-                    ...model.value?.form?.dialog?.slots
-                },
+            Object.keys(row).forEach(key => {
+                if (model.value[key]) {
+                    model.value[key].value = row[key];
+                }
             });
-
-        }, 
-        ...options?.control?.edit,
-        ...model.value?.control?.edit
+            closeModel.value = openModal(model.value?.control?.edit?.dialog, model.value?.control?.edit?.dialog?.mode);
+        },
     },
     delete: {
         text: true, label: '删除', type: 'danger',
         auth: (row, column, $index) => {
             return true;
         },
-        delete: (row, column, $index) => {
-            ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
-                confirmButtonText: '确定',
-                cancelButtonText: '取消',
-                type: 'warning'
-            }).then(() => {
+        dialog: {
+            message: '此操作将永久删除该文件, 是否继续?', title: '提示', options: { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }
+        },
+        click: (row, column, $index) => {
+            let { message, title, options } = model.value.control.delete.dialog;
+            ElMessageBox.confirm(message, title, options).then(() => {
                 emits("delete", { row, column, $index }, (res) => {
                     if (res) {
                         model.value.table.data.splice($index, 1);
-                        console.log(model.value.table.data)
+                        model.value.table.page.total--;
                     }
                 })
             }).catch(() => { });
 
-        }, 
-        ...options?.control?.delete,
-        ...model.value?.control?.delete
+        },
     },
 };
 
-//table column default attrs 
-const itemValue = reactive({
-    width: 100, align: "center", formatter: (row, column, cellValue, index) => {
+model.value.control = mergeObjects(
+    defaultControl,
+    options?.control,
+    model.value?.control
+);
+
+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) => {
@@ -247,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(() => {
 
 });
@@ -260,8 +363,9 @@ const tableColumns = computed(() => Object.fromEntries(
     Object.entries(model.value)
         .filter(a => a[1].type != "hidden")
         .filter(a => a[1].visible !== false)
-        .map(key => [key[0], key[1]]))
+        .map(key => {
+            key[1].sort = key[1].sort || 0;
+            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,19 +1,37 @@
-import { App } from 'vue';
-
-interface ModalProps {
-    slots: {
-        header?: () => JSX.Element;
-        default?: () => JSX.Element;
-        footer?: () => JSX.Element;
-        [key: string]: (() => JSX.Element) | undefined;
+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?: (a: any) => VNode;
+        header?: (p: any) => VNode;
+        footer?: (p: any) => VNode;
     };
-    [key: string]: any;
+    // 其他props的类型定义
 }
 
-declare const _default: {
-    install(app: App, options?: any): void;
+export function openModal(props?: OpenModalProps, mode?: 'dialog' | 'drawer'): () => void;
+
+export function convertToPx(value: string | number, referenceSize?: number): number;
+
+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;
+    // 其他组件的类型定义
 };
 
+declare const _default: {
+    install: (app: any, options?: GlobalOptions) => void;
+};
 export default _default;
-
-export declare const openModal: (props?: ModalProps, comType?: 'dialog' | 'drawer') => void;

package/src/components/index.js

@@ -4,46 +4,140 @@ import ElementPlus from 'element-plus'
 import { ElDialog, ElDrawer } from "element-plus";
 import gTable from "./g-table.vue";
 import gForm from "./g-form.vue";
-import { createApp, h, provide, reactive, readonly, ref } from "vue";
-const goptions={};
+import { createApp, h, provide, readonly, ref } from "vue";
+const globalOptions = {};
+
+const components = [
+    gTable,
+    gForm
+]
 
 export default {
     install(app, options = {}) {
-        Object.assign(goptions, options);
-        app.component("g-table", gTable);
-        app.component("g-form", gForm);
+        Object.assign(globalOptions, options);
+        for (const component of components) {
+            app.component(component.name, component);
+        }
         app.provide("options", readonly(options));
+        app.config.globalProperties.openModel = openModal;
     }
 }
-const openModal = (props = {}, comType = "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", goptions);
-            return () => h(comType == "dialog" ? ElDialog : comType == "drawer" ? ElDrawer : null, {
+            provide("options", globalOptions);
+            return () => h(mode == "dialog" ? ElDialog : mode == "drawer" ? ElDrawer : null, {
                 modelValue: visible.value,
                 'onUpdate:modelValue': closeModal,
                 draggable: true,
                 "append-to-body": true,
-                "v-if": visible.value,
                 ...props
             },
-                () => [
-                    props.slots.header ? h('div', { slot: 'header' }, props.slots.header()) : null,
-                    props.slots.default ? h(props.slots.default()) : null,
-                    props.slots.footer ? h('div', { slot: 'footer' }, 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
+                }
             );
         }
     });
-    app.use(ElementPlus).mount(el);
+    for (const component of components) {
+        modalApp.component(component.name, component);
+    }
+    modalApp.use(ElementPlus).mount(el);
     document.body.appendChild(el);
+    return closeModal;
 };
 
-export { openModal };
+function convertToPx(value, referenceSize = window.innerWidth) {
+    // 如果已经是px，直接返回
+    if (typeof value === 'number') {
+        return value;
+    }
+    if (value.endsWith('px')) {
+        return parseFloat(value);
+    }
+
+    // 处理vh和vw
+    const viewportHeight = window.innerHeight;
+    const viewportWidth = window.innerWidth;
+    if (value.endsWith('vh')) {
+        return (viewportHeight * parseFloat(value) / 100);
+    }
+    if (value.endsWith('vw')) {
+        return (viewportWidth * parseFloat(value) / 100);
+    }
+
+    // 处理%值，需要提供参考大小
+    if (value.endsWith('%')) {
+        if (typeof referenceSize !== 'number') {
+            throw new Error('Reference size is required to convert % to px');
+        }
+        return (referenceSize * parseFloat(value) / 100);
+    }
+
+    // 处理calc表达式
+    if (value.startsWith('calc(') && value.endsWith(')')) {
+        const calcExpr = value.slice(5, -1).trim();
+        // 使用一个安全的eval替代方案来解析calc表达式
+        function safeEval(expr) {
+            // 只允许数字、加减乘除运算符、小括号和空格
+            if (/[0-9+\-*/().\s]+$/.test(expr)) {
+                return new Function('return ' + expr)();
+            } else {
+                throw new Error('Invalid calc expression');
+            }
+        }
+        // 在这里，我们假设calc表达式中可能包含其他单位，因此递归调用parseValueToPx
+        const result = safeEval(calcExpr.replace(/([0-9.]+)([a-z%]+)/g, (match, number, unit) => {
+            return convertToPx(number + unit, referenceSize);
+        }));
+        return result;
+    }
+
+    // 如果无法识别单位，抛出错误
+    throw new Error('Unsupported unit in value: ' + value);
+}
+
+
+function mergeObjects(...objects) {
+    const result = ref({});
+    for (const obj of objects) {
+        if (obj && typeof obj === 'object') {
+            for (const key in obj) {
+                if (obj.hasOwnProperty(key)) {
+                    if (typeof obj[key] === 'object' && obj[key] !== null && !Array.isArray(obj[key])) {
+                        result.value[key] = mergeObjects(result.value[key], obj[key]);
+                    } else {
+                        result.value[key] = obj[key];
+                    }
+                }
+            }
+        }
+    }
+    return result.value;
+}
+
+
+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 };