vue-2024-ui 0.0.3 → 0.0.5

package/package.json

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

package/src/components/g-form.vue

@@ -15,15 +15,15 @@
                     <slot :name="`${key}-label`" :data :item :model>{{ item.label }}</slot>
                 </template>
             </el-form-item>
-            <el-form-item style="width: 100%;">
+            <el-form-item style="width: 100%;" v-if="!model.form.footer.hidden">
                 <slot name="footer">
-                    <div style="display: flex; width:100%;align-items: center;" :style="model.form.footer">
+                    <div :style="model.form.footer.style">
                         <slot name="footer-left"></slot>
-                        <el-button @click="submitForm(model)" v-bind="model.form.submit"
+                        <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="resetForm(ruleFormRef)" v-bind="model.form.reset"
+                        <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>
@@ -70,8 +70,11 @@ model.value.form = {
     },
     // 表单底部属性
     footer: {
-        justifyContent: "center",
-        ...model.value.form?.footer
+        hidden: false,
+        ...model.value.form?.footer,
+        style: {
+            display: "flex", width: "100%", "align-items": "center", justifyContent: "center", margin: "5px", ...model.value.form?.footer?.style
+        },
     },
     //表单提交按钮属性
     submit: {
@@ -80,6 +83,17 @@ model.value.form = {
         submitText: "提交",
         plain: true,
         hidden: false,
+        submit: async (model) => {
+            console.log(model);
+            if (!gform.value) return
+            await gform.value.validate((valid, fields) => {
+                if (valid) {
+                    emits("submit", formInfo.value, model);
+                } else {
+                    console.log('error submit!', fields);
+                }
+            })
+        },
         ...model.value.form?.submit
     },
     //表单重置按钮属性
@@ -88,48 +102,33 @@ model.value.form = {
         resetText: "重置",
         hidden: false,
         plain: true,
+        reset: () => {
+            if (!gform.value) return
+            let isreset = true;
+            emits("reset", (flag) => {
+                isreset = flag;
+            });
+            if (isreset) {
+                gform.value.resetFields();
+            }
+        },
         ...model.value.form?.reset
     },
+    dialog: {
+        width: 635,
+        ...model.value.form?.dialog
+    }
 };
 //合并表单项默认属性
 model.value.formItems = {
     type: "hidden",
-    ...model.value.formItems,
     style: {
         width: "100%",
         ...model.value.formItems?.style
-    }
+    },
+    ...model.value.formItems,
 };
 
-// 提交表单
-const submitForm = async (model) => {
-    if (!gform.value) return
-    await gform.value.validate((valid, fields) => {
-        if (valid) {
-            emits("submit", formInfo.value, model);
-        } else {
-            console.log('error submit!', fields);
-        }
-    })
-}
-
-// 重置表单
-const resetForm = () => {
-    if (!gform.value) return
-    let isreset = true;
-    emits("reset", (flag) => {
-        isreset = flag;
-    });
-    if (isreset) {
-        gform.value.resetFields();
-    }
-}
-
-// 定义对外暴露的函数
-defineExpose({
-    submit: submitForm, reset: resetForm
-})
-
 //获取表单项验证规则
 const getItemRulesByItem = (item) => {
     // 组装验证规则
@@ -223,14 +222,14 @@ const load = () => {
     if (!model.value.form.inline) {
         model.value.form.columns = 1;
     }
-    const width = getComputedStyle(document.querySelector(".g-form-container")).width;
-    if (width === "600px") {
-        columnsWidth.value = 300;
-        model.value.form.style.width = columns.value * 300 + 'px';
-    } else {
-        columnsWidth.value = removePx(width) / model.value.form.columns;
-        model.value.form.style.width = columns.value * columnsWidth.value + 'px';
+    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";
+    console.log(model.value.form.dialog.width);
     for (const [key, value] of Object.entries(items.value)) {
         model.value[key].formItem = { ...model.value[key].formItem, ...value.formItem }
         model.value[key].formItem.style = { ...model.value[key].formItem.style, ...value.formItem.style };
@@ -251,15 +250,13 @@ watch(() => model.value.form.columns, () => load());
 watch(() => model.value.form.inline, () => load());
 
 const removePx = (el) => parseFloat(el.replace("px", ""));
-
 //表单项
-const items = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").filter(a => (a[1].edit !== false)).map(key => [key[0], key[1]])));
+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 formItemsWidth = computed(() => columnsWidth.value - marginRight.value);
-//表单宽度
-const formWidth = computed(() => columns.value * columnsWidth.value);
 </script>

package/src/components/g-table.vue

@@ -13,17 +13,19 @@
                     <div class="control" v-bind="value">
                         <slot name="control">
                             <slot name="control-left" :row :column :$index> </slot>
-                            <slot name="control-read" :row :column :$index
-                                v-if="model.control.read.auth(row, column, $index)">
-                                <el-button v-bind="model.control.read"
-                                    @click="model.control.read.read(row, column, $index)">{{ model.control.read.label
+                            <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)">{{
+                                        model.control.view.label
                                     }}</el-button>
                             </slot>
                             <slot name="control-edit-left" :row :column :$index> </slot>
                             <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.control.edit.label
+                                    @click="model.control.edit.edit(row, column, $index, model)">{{
+                                        model.control.edit.label
                                     }}</el-button>
                             </slot>
                             <slot name="control-edit-right" :row :column :$index> </slot>
@@ -60,20 +62,21 @@
     </slot>
 </template>
 
-<script setup lang="jsx">
+<script setup>
 import dayjs from 'dayjs';
 import ElementPlus from 'element-plus'
 import { ElMessageBox } from 'element-plus';
-import { computed, onMounted, reactive, watchEffect, h, createApp, ref } from 'vue';
+import { computed, onMounted, reactive, watchEffect, watch, h, createApp, ref } from 'vue';
 import { ElDialog } from 'element-plus';
-import gyc from "./index"
+//import gyc from "./index"
+import GForm from './g-form.vue';
 
 defineOptions({
     name: "g-table",
     inheritAttrs: false
 })
 
-const emits = defineEmits(['load', 'read', "edit", "delete"]);
+const emits = defineEmits(['load', 'view', "edit", "delete"]);
 const model = defineModel({ required: true });
 
 //table default attrs
@@ -110,38 +113,42 @@ model.value.table = {
     }
 }
 model.value.control = {
-    type: model.value?.control ? "control" : 'hidden', label: '操作', width: 250, fixed: 'right', ...model.value?.control,
+    type: model.value?.control ? "control" : 'hidden', label: '操作', edit: false, width: 250, fixed: 'right', ...model.value?.control,
     style: { ...model.value?.control?.style },
-    read: {
-        text: true, label: '查看', type: 'success',
+    view: {
+        label: '查看', text: true, type: 'success',
         auth: (row, column, $index) => {
             return false;
         },
-        read: (row, column, $index) => {
-            emits("read", row, column, $index);
-            model.value.form.disabled=true;
+        view: (row, column, $index, m) => {
+            model.value.form.disabled = true;
+            emits("view", row, column, $index, m);
             openModal({
                 title: '查看',
+                ...model.value.form.dialog,
                 slots: {
                     // 自定义插槽内容
-                    default: () => <g-form v-model={model.value}></g-form>,
+                    default: () => h(GForm, { modelValue: model.value }),
+                    ...model.value?.form?.dialog?.slots
                 },
             });
-        }, ...model.value?.control?.read
+        }, ...model.value?.control?.view
     },
     edit: {
-        text: true, label: '编辑', type: 'primary',
+        label: '编辑', text: true, type: 'primary',
         auth: (row, column, $index) => {
             return true;
         },
-        edit: (row, column, $index) => {
-            model.value.form.disabled=undefined;
-            emits("edit", row, column, $index);
+        edit: (row, column, $index, m) => {
+            model.value.form.disabled = undefined;
+            emits("edit", row, column, $index, m);
             openModal({
                 title: '编辑',
+                ...model.value.form.dialog,
                 slots: {
                     // 自定义插槽内容
-                    default: () => <g-form v-model={model.value}></g-form>,
+                    default: () => h(GForm, { modelValue: model.value }),
+                    ...model.value?.form?.dialog?.slots
                 },
             });
 
@@ -179,26 +186,28 @@ const itemValue = reactive({
 
 // 用 createApp 方法封装打开模态窗的方法
 const openModal = (props = {}) => {
+    const el = document.createElement('div');
     const app = createApp({
         setup() {
             const visible = ref(true);
             const closeModal = () => {
                 visible.value = false;
                 app.unmount(); // 关闭对话框时卸载组件
+                delete el.remove(); // 关闭对话框时删除元素
             };
             return () => h(ElDialog, {
                 modelValue: visible.value,
                 'onUpdate:modelValue': closeModal,
-                width: 635,
                 draggable: true,
-                "append-to-body":true,
+                "append-to-body": true,
+                "v-if": visible.value,
+                width:model.value.form.dialog.width,
                 ...props
             },
                 () => [
                     props.slots.header ? h('div', { slot: 'header' }, props.slots.header()) : null,
                     // 传递名为 'default' 的插槽
                     props.slots.default ? h(props.slots.default()) : null,
-                    // 传递名为 'header' 的插槽
                     // 传递名为 'footer' 的插槽
                     props.slots.footer ? h('div', { slot: 'footer' }, props.slots.footer()) : null,
                     // 可以继续添加其他插槽...
@@ -206,8 +215,7 @@ const openModal = (props = {}) => {
             );
         }
     });
-    const el = document.createElement('div');
-    app.use(ElementPlus).use(gyc).mount(el);
+    app.use(ElementPlus).mount(el);
     document.body.appendChild(el);
 };