vue-2024-ui 0.0.4 → 0.0.6

package/README.md

@@ -1,29 +1,48 @@
-# vue-ele-ui
+# vue-2024-ui
 
-This template should help get you started developing with Vue 3 in Vite.
+vue + element-plus
 
-## Recommended IDE Setup
+```
+npm i vue-2024-ui
+```
 
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+# API 说明
+### 所有属性和方法都在element-plus 基础上扩展，只显示增加的属性和方法，安装前必须安装element-plus,其他原有属性和方法请查询 [官方文档](https://element-plus.org/zh-CN/component/overview.html)
 
-## Customize configuration
+# form 表单增加的属性
 
-See [Vite Configuration Reference](https://vitejs.dev/config/).
+| 属性      | 说明                                                                | 类型   | 默认值                                                                                       |
+| --------- | ------------------------------------------------------------------- | ------ | -------------------------------------------------------------------------------------------- |
+| 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: () => {...}, } ```               |
+| formItems | 通过style属性设置所有items的样式                                    | object | ``` style:{width:100%} ```                                                                   |
 
-## Project Setup
 
-```sh
-npm install
-```
+# form 增加的事件
 
-### Compile and Hot-Reload for Development
+| 事件名 | 说明         | 类型     | 参数                                                                                   |
+| ------ | ------------ | -------- | -------------------------------------------------------------------------------------- |
+| submit | 表单提交事件 | function | formData:表单要提交的数据                                                              |
+| reset  | 表单重置事件 | function | callback(isCustReset=false) 默认已处理了重置事件，如要重写事件则回调时传入true后再处理 |
 
-```sh
-npm run dev
-```
 
-### Compile and Minify for Production
 
-```sh
-npm run build
-```
+# form 重写 slots 增加的插槽
+
+| 插槽名       | 说明                   |
+| ------------ | ---------------------- |
+| footer       | 重写表单footer功能按钮 |
+| footer-left  | 表单左边增加按钮       |
+| footer-right | 表单右边增加按钮       |
+
+# formItem 重写 slots
+
+| 插槽名                | 说明                             |
+| --------------------- | -------------------------------- |
+| item.key              | 重写表单项item                   |
+| item.key-label        | 重写表单项标题                   |
+| item.key-ctrl         | 重写表单控件                     |
+| item.key-ctrl-options | 重写表单控件有options的字项items |
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue-2024-ui",
-  "version": "0.0.4",
+  "version": "0.0.6",
   "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,16 @@ model.value.form = {
         submitText: "提交",
         plain: true,
         hidden: false,
+        submit: 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);
+                }
+            })
+        },
         ...model.value.form?.submit
     },
     //表单重置按钮属性
@@ -88,48 +101,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 +221,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 +249,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,13 +62,13 @@
     </slot>
 </template>
 
-<script setup >
+<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({
@@ -74,7 +76,7 @@ defineOptions({
     inheritAttrs: false
 })
 
-const emits = defineEmits(['load', 'read', "edit", "delete"]);
+const emits = defineEmits(['load', 'view', "edit", "delete"]);
 const model = defineModel({ required: true });
 
 //table default attrs
@@ -111,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);
+        view: (row, column, $index, m) => {
             model.value.form.disabled = true;
+            emits("view", row, column, $index, m);
             openModal({
                 title: '查看',
+                ...model.value.form.dialog,
                 slots: {
                     // 自定义插槽内容
                     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) => {
+        edit: (row, column, $index, m) => {
             model.value.form.disabled = undefined;
-            emits("edit", row, column, $index);
+            emits("edit", row, column, $index, m);
             openModal({
                 title: '编辑',
+                ...model.value.form.dialog,
                 slots: {
                     // 自定义插槽内容
                     default: () => h(GForm, { modelValue: model.value }),
+                    ...model.value?.form?.dialog?.slots
                 },
             });
 
@@ -180,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,
+                "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,
                     // 可以继续添加其他插槽...
@@ -207,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);
 };