vue-2024-ui 0.0.2 → 0.0.4

package/README.md

@@ -1,29 +1,29 @@
-# vue-ele-ui
-
-This template should help get you started developing with Vue 3 in Vite.
-
-## Recommended IDE Setup
-
-[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
-
-## Customize configuration
-
-See [Vite Configuration Reference](https://vitejs.dev/config/).
-
-## Project Setup
-
-```sh
-npm install
-```
-
-### Compile and Hot-Reload for Development
-
-```sh
-npm run dev
-```
-
-### Compile and Minify for Production
-
-```sh
-npm run build
-```
+# vue-ele-ui
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```

package/package.json

@@ -1,30 +1,31 @@
-{
-  "name": "vue-2024-ui",
-  "version": "0.0.2",
-  "private": false,
-  "type": "module",
-  "main": "src/components/index.js",
-  "author": {
-    "name": "guoyuanchao",
-    "email": "xg816620@163.com"
-  },
-  "files": [
-    "src/components"
-  ],
-  "scripts": {
-    "dev": "vite",
-    "build": "vite build",
-    "preview": "vite preview"
-  },
-  "dependencies": {
-    "element-plus": "^2.8.4",
-    "vue": "^3.4.29"
-  },
-  "license": "MIT",
-  "devDependencies": {
-    "@vitejs/plugin-vue": "^5.0.5",
-    "@vitejs/plugin-vue-jsx": "^4.0.0",
-    "vite": "^5.3.1",
-    "vite-plugin-vue-devtools": "^7.3.1"
-  }
-}
+{
+  "name": "vue-2024-ui",
+  "version": "0.0.4",
+  "private": false,
+  "type": "module",
+  "main": "src/components/index.js",
+  "author": {
+    "name": "guoyuanchao",
+    "email": "xg816620@163.com"
+  },
+  "files": [
+    "src/components"
+  ],
+  "scripts": {
+    "i": "pnpm i",
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "element-plus": "^2.8.4",
+    "vue": "^3.4.29"
+  },
+  "license": "MIT",
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^5.0.5",
+    "@vitejs/plugin-vue-jsx": "^4.0.0",
+    "vite": "^5.3.1",
+    "vite-plugin-vue-devtools": "^7.3.1"
+  }
+}

package/src/components/g-ctrl.vue

@@ -162,7 +162,6 @@ const selectRemoteMethod = (query) => {
 onMounted(() => {
     if (itemInfo["remote-method"]) {
         selectModel['remote-method'] = selectRemoteMethod;
-
     }
 })
 </script>

package/src/components/g-form.vue

@@ -116,7 +116,7 @@ const submitForm = async (model) => {
 // 重置表单
 const resetForm = () => {
     if (!gform.value) return
-    const isreset = true;
+    let isreset = true;
     emits("reset", (flag) => {
         isreset = flag;
     });
@@ -224,7 +224,6 @@ const load = () => {
         model.value.form.columns = 1;
     }
     const width = getComputedStyle(document.querySelector(".g-form-container")).width;
-    console.log(width);
     if (width === "600px") {
         columnsWidth.value = 300;
         model.value.form.style.width = columns.value * 300 + 'px';

package/src/components/g-table.vue

@@ -9,6 +9,34 @@
                         <div v-html="formatterExtends(value, column.formatter(row, column, row[key], $index))"></div>
                     </slot>
                 </template>
+                <template #default="{ row, column, $index }" v-if="value.type == 'control'">
+                    <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
+                                    }}</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
+                                    }}</el-button>
+                            </slot>
+                            <slot name="control-edit-right" :row :column :$index> </slot>
+                            <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)">{{
+                                        model.control.delete.label }}</el-button>
+                            </slot>
+                            <slot name="control-right" :row :column :$index> </slot>
+                        </slot>
+                    </div>
+                </template>
                 <template #header="{ column, $index }">
                     <slot :name="`${key}-header`" :column :$index></slot>
                 </template>
@@ -32,17 +60,21 @@
     </slot>
 </template>
 
-<script setup>
+<script setup >
 import dayjs from 'dayjs';
-import { computed, onMounted, reactive, watchEffect } from 'vue';
+import ElementPlus from 'element-plus'
+import { ElMessageBox } from 'element-plus';
+import { computed, onMounted, reactive, watchEffect, h, createApp, ref } from 'vue';
+import { ElDialog } from 'element-plus';
+import gyc from "./index"
+import GForm from './g-form.vue';
 
 defineOptions({
     name: "g-table",
     inheritAttrs: false
 })
 
-const emits = defineEmits(['load']);
-
+const emits = defineEmits(['load', 'read', "edit", "delete"]);
 const model = defineModel({ required: true });
 
 //table default attrs
@@ -54,7 +86,6 @@ model.value.table = {
     fit: false,
     type: "hidden",
     height: "calc(100vh - 55px)",
-
     ...model.value.table,
     load: () => {
         let { currentPage, pageSize } = model.value.table.page;
@@ -66,7 +97,7 @@ model.value.table = {
     page: {
         background: true,
         total: 0,
-        pageSize: 10,
+        pageSize: 20,
         currentPage: 1,
         pageSizes: [5, 10, 20, 30, 40, 50],
         layout: 'total, sizes, prev, pager, next, jumper',
@@ -77,11 +108,68 @@ model.value.table = {
             padding: "10px",
             ...model.value.table?.page?.style
         },
-        onChange: (a, b) => {
-            console.log(a, b);
-        }
     }
 }
+model.value.control = {
+    type: model.value?.control ? "control" : 'hidden', label: '操作', width: 250, fixed: 'right', ...model.value?.control,
+    style: { ...model.value?.control?.style },
+    read: {
+        text: true, label: '查看', type: 'success',
+        auth: (row, column, $index) => {
+            return false;
+        },
+        read: (row, column, $index) => {
+            emits("read", row, column, $index);
+            model.value.form.disabled = true;
+            openModal({
+                title: '查看',
+                slots: {
+                    // 自定义插槽内容
+                    default: () => h(GForm, { modelValue: model.value }),
+                },
+            });
+        }, ...model.value?.control?.read
+    },
+    edit: {
+        text: true, label: '编辑', type: 'primary',
+        auth: (row, column, $index) => {
+            return true;
+        },
+        edit: (row, column, $index) => {
+            model.value.form.disabled = undefined;
+            emits("edit", row, column, $index);
+            openModal({
+                title: '编辑',
+                slots: {
+                    // 自定义插槽内容
+                    default: () => h(GForm, { modelValue: model.value }),
+                },
+            });
+
+        }, ...model.value?.control?.edit
+    },
+    delete: {
+        text: true, label: '删除', type: 'danger',
+        auth: (row, column, $index) => {
+            return true;
+        },
+        delete: (row, column, $index) => {
+            ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+                type: 'warning'
+            }).then(() => {
+                emits("delete", { row, column, $index }, (res) => {
+                    if (res) {
+                        model.value.table.data.splice($index, 1);
+                        console.log(model.value.table.data)
+                    }
+                })
+            }).catch(() => { });
+
+        }, ...model.value?.control?.delete
+    },
+};
 
 //table column default attrs 
 const itemValue = reactive({
@@ -90,6 +178,40 @@ const itemValue = reactive({
     }
 });
 
+// 用 createApp 方法封装打开模态窗的方法
+const openModal = (props = {}) => {
+    const app = createApp({
+        setup() {
+            const visible = ref(true);
+            const closeModal = () => {
+                visible.value = false;
+                app.unmount(); // 关闭对话框时卸载组件
+            };
+            return () => h(ElDialog, {
+                modelValue: visible.value,
+                'onUpdate:modelValue': closeModal,
+                width: 635,
+                draggable: true,
+                "append-to-body": true,
+                ...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,
+                    // 可以继续添加其他插槽...
+                ]
+            );
+        }
+    });
+    const el = document.createElement('div');
+    app.use(ElementPlus).use(gyc).mount(el);
+    document.body.appendChild(el);
+};
+
 //扩展formatter方法
 const formatterExtends = (item, str) => {
     let trueValue = str;
@@ -128,6 +250,7 @@ const formatterExtends = (item, str) => {
     }
     return trueValue
 }
+
 onMounted(() => {
 
 });
@@ -137,8 +260,12 @@ watchEffect(() => {
 });
 
 //表单项
-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]])));
-//const formInfo = computed(() => Object.fromEntries(Object.entries(model.value).filter(a => a[1].type != "hidden").map(key => [key[0], key[1].value])));
+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]]))
+);
 </script>
 
 <style lang="scss" scoped></style>