vue-2024-ui 0.0.11 → 0.0.13

package/package.json

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

package/src/components/g-query.vue

@@ -125,10 +125,10 @@ const defaultQueryAttrs = {
         }
     },
     cols: {
-        span: 6, offset: 0, xs: 24, sm: 12, md: 6, lg: 6, xl: 4,
+        span: 6, offset: 0, xs: 24, sm: 12, md: 8, lg: 6, xl: 4,
     },
     btns: {
-        col: { span: 6, offset: 0, xs: 24, sm: 12, md: 6, lg: 6, xl: 4, },
+        col: { span: 8, offset: 0, xs: 24, sm: 12, md: 8, lg: 6, xl: 4, },
         style: {
             width: "100%", display: "flex", justifyContent: "flex-end"
         }

package/src/components/g-table.vue

@@ -12,7 +12,7 @@
                             <slot name="control-add">
                                 <el-button v-bind="model.control.add" @click="addRow(model)">{{
                                     model.control.add.label
-                                    }}</el-button>
+                                }}</el-button>
                             </slot>
                             <slot name="control-add-right"></slot>
                         </div>
@@ -42,14 +42,14 @@
                                 v-if="model.control.view.auth(row, column, $index)">
                                 <el-button v-bind="model.control.view" @click="readForm(row, column, $index, model)">{{
                                     model.control.view.label
-                                }}</el-button>
+                                    }}</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="editRow(row, column, $index, model)">{{
                                     model.control.edit.label
-                                    }}</el-button>
+                                }}</el-button>
                             </slot>
                             <slot name="control-edit-right" :row :column :$index> </slot>
                             <slot name="control-delete" :row :column :$index
@@ -154,13 +154,13 @@ defineOptions({
     name: "g-table",
     inheritAttrs: false
 })
-const emits = defineEmits(['load', 'view', "edit", "delete", 'add', 'submit', 'reset']);
+const emits = defineEmits(['load', 'open', "delete", 'submit', 'reset']);
 const model = defineModel({ required: true });
 const options = inject('options');
 const queryInfo = ref({});
 const dialogVisible = ref(false);
 const tableColumnsAttrs = ['type', 'index', 'label', 'column-key', 'prop', 'width', 'min-width', 'fixed', 'render-header', 'sortable', 'sort-method', 'sort-by', 'sort-orders', 'resizable', 'formatter', 'show-overflow-tooltip', 'align', 'header-align', 'class-name', 'label-class-name', 'selectable', 'reserve-selection', 'filters', 'filter-placement', 'filter-class-name', 'filter-multiple', 'filter-method', 'filtered-value'];
-
+const modalState = ref(undefined);
 //合并表格属性包括分页
 const defaultTableAttrs = {
     data: [],
@@ -169,7 +169,6 @@ const defaultTableAttrs = {
     emptyText: '暂无数据',
     fit: false,
     type: "hidden",
-    height: "calc(100vh - 65px)",
     load: () => {
         let { currentPage, pageSize } = model.value.table.page;
         emits('load', { currentPage, pageSize, ...queryInfo.value }, (data, total) => {
@@ -184,6 +183,7 @@ const defaultTableAttrs = {
             readForm(row, column, event, model);
         }
     },
+    style: { 'min-height': '100px' },
     page: {
         total: 0,
         pageSize: 20,
@@ -287,7 +287,7 @@ model.value.dialog = mergeObjects(
 
 //记录表单初始值
 const initFormData = Object.fromEntries(Object.entries(filterObject(model.value, (k, val) => {
-    return (val.type != 'control' && val.edit !== false && val.type != 'hidden');
+    return (val.type != 'control' && val.editor !== false && val.type != 'hidden');
 })).map(([key, val]) => [key, val.value]));
 
 //扩展formatter方法
@@ -332,7 +332,7 @@ const formatterExtends = (item, str) => {
 
 //重置查询初始值
 const queryReset = (q) => {
-    console.log(q);
+    //console.log(q);
     queryInfo.value = q.value;
 }
 
@@ -343,17 +343,21 @@ const query = (q) => {
 
 //新增方法
 const addRow = (m) => {
-    // model.value.dialog.width = model.value?.form?.style?.width || 600;
-    model.value.form.disabled = false;
-    model.value.dialog.mode = model.value.control.add.mode;
-    model.value.dialog.title = model.value.control.add.label;
-    emits("add", m);
-    Object.keys(initFormData).forEach(key => {
-        if (model.value[key]) {
-            model.value[key].value = initFormData[key];
-        }
-    });
-    dialogVisible.value = true;
+    modalState.value = "add";
+    if (model.value.control.add?.click) {
+        model.value.control.add.click(m);
+    } else {
+        model.value.form.disabled = false;
+        model.value.dialog.mode = model.value.control.add.mode;
+        model.value.dialog.title = model.value.control.add.label;
+        emits("open", m, 'add');
+        Object.keys(initFormData).forEach(key => {
+            if (model.value[key]) {
+                model.value[key].value = initFormData[key];
+            }
+        });
+        dialogVisible.value = true;
+    }
 };
 
 //删除方法
@@ -375,13 +379,14 @@ const deleteRow = (row, column, $index, m) => {
 
 //编辑方法
 const editRow = (row, column, $index, m) => {
+    modalState.value = "edit";
     if (model.value.control.edit?.click) {
         model.value.control.edit.click(row, column, $index, m);
     } else {
         model.value.form.disabled = false;
         model.value.dialog.mode = model.value.control.edit.mode;
         model.value.dialog.title = model.value.control.edit.label;
-        emits("edit", row, column, $index, m);
+        emits("open", m, 'edit', row, column, $index);
         Object.keys(row).forEach(key => {
             if (model.value[key]) {
                 model.value[key].value = row[key];
@@ -393,13 +398,14 @@ const editRow = (row, column, $index, m) => {
 
 //查看方法
 const readForm = (row, column, $index, m) => {
+    modalState.value = undefined;
     if (model.value.control.view?.click) {
         model.value.control.view.click(row, column, $index, m);
     } else {
         model.value.form.disabled = true;
         model.value.dialog.mode = model.value.control.view.mode;
         model.value.dialog.title = model.value.control.view.label;
-        emits("view", row, column, $index, m);
+        emits("open", m, 'view', row, column, $index);
         Object.keys(row).forEach(key => {
             if (model.value[key]) {
                 model.value[key].value = row[key];
@@ -411,9 +417,10 @@ const readForm = (row, column, $index, m) => {
 
 //提交方法
 const submit = (formInfo, model) => {
-    emits("submit", formInfo, model, (res) => {
+    emits("submit", modalState.value, formInfo, model, (res) => {
         if (res) {
             dialogVisible.value = false;
+            model.table.load();
         }
     })
 }