@scx-js/scx-admin 0.0.3

package/components/crud/crud-add-button.vue

@@ -0,0 +1,28 @@
+<template>
+
+    <el-button type="success"
+               @click="crudContext.handleCreate()">
+        <scx-icon icon="outlined-plus-circle"/>
+        <span>添加</span>
+    </el-button>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-add-button",
+    setup(props, context) {
+        const crudContext = useCrudContext();
+
+        return {
+            crudContext
+        };
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-batch-delete.vue

@@ -0,0 +1,27 @@
+<template>
+
+    <el-popconfirm title="确定删除全部选中数据 (不可恢复) ?" @confirm="crudContext.batchDelete()">
+        <template #reference>
+            <el-button class="footer-item" plain type="danger">批量删除</el-button>
+        </template>
+    </el-popconfirm>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-batch-delete",
+    setup() {
+
+        const crudContext = useCrudContext();
+
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-edit-dialog.vue

@@ -0,0 +1,36 @@
+<template>
+
+    <el-dialog v-model="crudContext.editDialog.visible" :close-on-click-modal="false"
+               :title="crudContext.getDialogTitle()"
+               append-to-body
+               width="60%">
+        <slot></slot>
+        <template v-slot:footer>
+            <el-button :loading="crudContext.editDialog.confirmButtonLoading" type="primary"
+                       @click="crudContext.createOrUpdateModel()">
+                确定
+            </el-button>
+            <el-button @click="crudContext.editDialog.visible = false">
+                取消
+            </el-button>
+        </template>
+    </el-dialog>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-edit-dialog",
+    setup() {
+        const crudContext = useCrudContext();
+
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-edit-form.vue

@@ -0,0 +1,28 @@
+<template>
+    <el-form ref="scxCreateAndUpdateFormRef" :model="crudContext.temp" inline label-position="right"
+             label-width="150px">
+        <slot></slot>
+    </el-form>
+</template>
+
+<script>
+import {ref} from "vue";
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-edit-form",
+    setup() {
+        const scxCreateAndUpdateFormRef = ref(null);
+        const crudContext = useCrudContext();
+        crudContext.scxCreateAndUpdateFormRef = scxCreateAndUpdateFormRef;
+        return {
+            crudContext,
+            scxCreateAndUpdateFormRef
+        };
+    },
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-form-footer.vue

@@ -0,0 +1,28 @@
+<template>
+
+    <el-button :loading="crudContext.editDialog.confirmButtonLoading" type="primary"
+               @click="crudContext.createOrUpdateModel()">
+        确定
+    </el-button>
+
+    <el-button @click="crudContext.editDialog.visible = false">
+        取消
+    </el-button>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-form-footer",
+    setup() {
+        const crudContext = useCrudContext();
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-pagination.vue

@@ -0,0 +1,51 @@
+<template>
+
+    <el-pagination :background="true" :currentPage="crudContext.pagination.currentPage"
+                   :page-size="crudContext.pagination.pageSize"
+                   :page-sizes="[10,20,50,100]"
+                   :total="crudContext.total"
+                   layout='total, sizes, prev, pager, next, jumper'
+                   @current-change="handleCurrentChange"
+                   @size-change="handleSizeChange"/>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-pagination",
+    setup() {
+
+        const crudContext = useCrudContext();
+
+        /**
+         * 页码数量发生变化
+         * @param val 变化后的数量
+         */
+        function handleCurrentChange(val) {
+            crudContext.pagination.currentPage = val;
+            crudContext.getList();
+        }
+
+        /**
+         * 每页数量发生变化
+         * @param val 变化后的数量
+         */
+        function handleSizeChange(val) {
+            crudContext.pagination.pageSize = val;
+            crudContext.getList();
+        }
+
+        return {
+            crudContext,
+            handleCurrentChange,
+            handleSizeChange
+        };
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-reset-button.vue

@@ -0,0 +1,19 @@
+<template>
+    <el-button circle type="warning" @click="crudContext.resetWhere().getList()">
+        <scx-icon icon="outlined-arrow-left"/>
+    </el-button>
+</template>
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-reset-button",
+    setup() {
+        const crudContext = useCrudContext();
+        return {crudContext};
+    }
+};
+</script>
+<style scoped>
+
+</style>

package/components/crud/crud-search-button.vue

@@ -0,0 +1,25 @@
+<template>
+
+    <el-button round type="primary" @click="crudContext.handleQuery()">
+        <scx-icon icon="outlined-search"/>
+        <span>搜索</span>
+    </el-button>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-search-button",
+    setup() {
+        const crudContext = useCrudContext();
+
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-table-delete-button.vue

@@ -0,0 +1,31 @@
+<template>
+    <el-popconfirm title="确定删除此条数据 ?" @confirm="crudContext.deleteOne(data)">
+        <template #reference>
+            <el-button :disabled="disabled" size="small" type="danger">删除</el-button>
+        </template>
+    </el-popconfirm>
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-table-delete-button",
+    props: {
+        data: {
+            required: true
+        },
+        disabled: {
+            default: false
+        }
+    },
+    setup() {
+        const crudContext = useCrudContext();
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-table-edit-button.vue

@@ -0,0 +1,26 @@
+<template>
+    <el-button size="small" type="primary" @click="crudContext.handleUpdate(data)">
+        编辑
+    </el-button>
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+
+export default {
+    name: "crud-table-edit-button",
+    props: {
+        data: {
+            required: true
+        }
+    },
+    setup() {
+        const crudContext = useCrudContext();
+        return {crudContext};
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/crud/crud-table.vue

@@ -0,0 +1,131 @@
+<template>
+
+    <el-table ref="scxTableRef" v-loading="crudContext.tableLoading" :data="crudContext.tableBody"
+              :highlight-current-row="true"
+              border
+              class="crud-table"
+              max-height="600"
+              row-key="id"
+              stripe
+              @select="(a)=>crudContext.tableSelect(a)"
+              @selectAll="(a)=>crudContext.tableSelectAll(a)"
+              @sort-change="handleSortChange"
+              @selection-change="(a)=>crudContext.handleSelectionChange(a)"
+              @row-contextmenu="handleRowContextMenu">
+        <el-table-column :reserve-selection="true" type="selection" width="55"/>
+        <slot></slot>
+    </el-table>
+
+</template>
+
+<script>
+import {useCrudContext} from "../../index.js";
+import {ref} from "vue";
+import {showContextMenu} from "@scx-js/scx-ui";
+
+export default {
+    name: "crud-table",
+    setup() {
+        const scxTableRef = ref(null);
+        const crudContext = useCrudContext();
+
+        crudContext.scxTableRef = scxTableRef;
+
+        function handleSortChange(column) {
+            const sortTypeMap = {
+                ascending: "ASC",
+                descending: "DESC"
+            };
+            crudContext.orderBy.fieldName = column.prop;
+            crudContext.orderBy.sortType = column.order !== null ? sortTypeMap[column.order] : null;
+            crudContext.getList();
+        }
+
+        function handleRowContextMenu(row, column, event) {
+            scxTableRef.value.setCurrentRow(row);
+            event.preventDefault();
+            openMenu(row, event);
+        }
+
+        function previousPage() {
+            //页面减 1
+            crudContext.pagination.currentPage += -1;
+            //如果小于 1 证明当前页面是 第一页 不做查询操作 用于减少后台并发量
+            if (crudContext.pagination.currentPage < 1) {
+                crudContext.pagination.currentPage = 1;
+            } else {
+                //否则执行查询方法
+                crudContext.getList();
+            }
+        }
+
+        function nextPage() {
+            crudContext.pagination.currentPage += 1;
+            crudContext.getList();
+        }
+
+        const openMenu = (row, e) => showContextMenu(e, [
+            {
+                label: "刷新",
+                callback: (close) => {
+                    crudContext.getList();
+                    close();
+                }
+            },
+            {
+                label: "编辑",
+                callback: (close) => {
+                    crudContext.handleUpdate(row);
+                    close();
+                }
+            },
+            {
+                label: "删除此条",
+                callback: (close) => {
+                    crudContext.deleteOne(row);
+                    close();
+                }
+            },
+            {
+                label: "删除选中",
+                callback: (close) => {
+                    crudContext.batchDelete();
+                    close();
+                }
+            },
+            {
+                label: "上一页",
+                callback: (close) => {
+                    previousPage();
+                    close();
+                }
+            },
+            {
+                label: "下一页",
+                callback: (close) => {
+                    nextPage();
+                    close();
+                }
+            }
+        ]);
+
+        return {
+            crudContext,
+            scxTableRef,
+            handleSortChange,
+            handleRowContextMenu
+        };
+    }
+};
+</script>
+
+<style>
+.crud-table {
+    --el-table-current-row-bg-color: var(--scx-theme-secondary);
+    --el-table-row-hover-bg-color: var(--scx-theme-bg);
+}
+
+.el-table__body tr.current-row > td.el-table__cell {
+    background-color: var(--el-table-current-row-bg-color) !important;
+}
+</style>

package/components/crud/index.css

@@ -0,0 +1,46 @@
+/*主内容*/
+.crud {
+    display: flex;
+    flex-direction: column;
+    padding: 5px;
+    height: 100%;
+    overflow: auto;
+    box-sizing: border-box;
+    row-gap: 5px;
+}
+
+/*头部*/
+.crud-header {
+    display: flex;
+    justify-content: space-between;
+}
+
+/*头部分栏布局*/
+.crud-header-left,
+.crud-header-right,
+.crud-footer {
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    align-items: center;
+    column-gap: 5px;
+    row-gap: 5px;
+}
+
+/*头部左侧所有子元素的样式*/
+.crud-header-left > *,
+.crud-header-right > *,
+.crud-footer > * {
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+}
+
+/*头部右侧容器的子元素排列类型*/
+.crud-header-right {
+    justify-content: flex-end;
+}
+
+/* 主区域 */
+.crud-main {
+
+}

package/components/crud/index.vue

@@ -0,0 +1,37 @@
+<template>
+    <div class="crud">
+        <!-- 头部 -->
+        <header v-if="$slots['header-left']||$slots['header-right']" class="crud-header">
+            <!-- 头部左侧 (一般放操作项 如 : 添加按钮 , 导出按钮) -->
+            <div class="crud-header-left">
+                <slot name="header-left"/>
+            </div>
+            <!-- 头部右侧 (一般放查询项) -->
+            <div class="crud-header-right">
+                <slot name="header-right"/>
+            </div>
+        </header>
+
+        <!-- 主内容区 一般放一个表格 -->
+        <main v-if="$slots['main']" class="crud-main">
+            <slot name="main"/>
+        </main>
+
+        <!-- 底部内容区 一般放分页或批量删除按钮 (远离顶部防止误操作) -->
+        <footer v-if="$slots['footer']" class="crud-footer">
+            <slot name="footer"/>
+        </footer>
+
+        <!-- 自定义的内容 -->
+        <slot/>
+
+    </div>
+</template>
+
+<script>
+import "./index.css";
+
+export default {
+    name: "crud"
+};
+</script>