@scx-js/scx-admin 0.0.3

package/components/easy-monaco-editor/index.vue

@@ -0,0 +1,70 @@
+<template>
+    <div ref="monacoEditorDomRef" class="easy-monaco-editor"></div>
+</template>
+<script>
+import "./index.css";
+import {onMounted, ref, watch} from "vue";
+import {editor} from "monaco-editor";
+import "./use-worker.js";
+
+export default {
+    name: "easy-monaco-editor",
+    props: {
+        modelValue: {
+            type: String,
+            default: ""
+        },
+        language: {
+            type: String,
+            default: "javascript"
+        },
+        theme: {
+            type: String,
+            default: "vs-dark"
+        }
+    },
+    setup(props, ctx) {
+
+        const monacoEditorDomRef = ref();
+
+        let currentEditor = null;
+
+        function initEditor() {
+            return editor.create(monacoEditorDomRef.value, {
+                value: "",
+                language: props.language,
+                automaticLayout: true
+            });
+        }
+
+        function startWatch() {
+            watch(() => props.modelValue, (value) => {
+                if (value !== currentEditor.getValue()) {
+                    currentEditor.setValue(value);
+                }
+            }, {immediate: true});
+
+            watch(() => props.theme, (value) => {
+                editor.setTheme(value);
+            }, {immediate: true});
+        }
+
+        function bindEvent() {
+            currentEditor.onDidChangeModelContent((c) => {
+                const value = currentEditor.getValue();
+                ctx.emit("update:modelValue", value);
+            });
+        }
+
+        onMounted(() => {
+            currentEditor = initEditor();
+            startWatch();
+            bindEvent();
+        });
+
+        return {
+            monacoEditorDomRef
+        };
+    }
+};
+</script>

package/components/easy-monaco-editor/use-worker.js

@@ -0,0 +1,27 @@
+import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
+import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
+import CSSWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
+import HTMLWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
+import TSWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
+
+self.MonacoEnvironment = {
+    getWorker(workerId, label) {
+        switch (label) {
+            case "json":
+                return new JsonWorker();
+            case "css":
+            case "scss":
+            case "less":
+                return new CSSWorker();
+            case "html":
+            case "handlebars":
+            case "razor":
+                return new HTMLWorker();
+            case "typescript":
+            case "javascript":
+                return new TSWorker();
+            default:
+                return new EditorWorker();
+        }
+    },
+};

package/components/easy-select/index.vue

@@ -0,0 +1,29 @@
+<template>
+    <el-select clearable filterable>
+        <el-option v-for="item in easyOption.options"
+                   :key="easyOption.valueSupplier(item)"
+                   :label="easyOption.labelSupplier(item)"
+                   :value="easyOption.valueSupplier(item)"/>
+    </el-select>
+</template>
+
+<script>
+import {EasyOption} from "../../scx/index.js";
+
+export default {
+    name: "easy-select",
+    props: {
+        easyOption: {
+            type: EasyOption,
+            default: null,
+        }
+    },
+    setup(props) {
+
+    }
+};
+</script>
+
+<style scoped>
+
+</style>

package/components/easy-upload/index.vue

@@ -0,0 +1,94 @@
+<template>
+    <scx-upload v-model="proxyModelValue"
+                :before-upload="beforeUpload"
+                :disabled="disabled"
+                :file-info-handler="getFileInfoHandler()"
+                :on-error="onError"
+                :upload-handler="getUploadHandler()"/>
+</template>
+
+<script>
+import {computed} from "vue";
+import {ElMessage} from "element-plus";
+import {useAliOSS} from "../../index.js";
+import {ScxUpload} from "@scx-js/scx-ui";
+
+export default {
+    name: "easy-upload",
+    components: {ScxUpload},
+    props: {
+        modelValue: {
+            type: String,
+            default: null
+        },
+        uploadHandler: {
+            type: Function,
+            default: null //优先级大于  uploadHandlerType 指定的
+        },
+        fileInfoHandler: {
+            type: Function,
+            default: null
+        },
+        beforeUpload: {
+            type: Function,
+            default: null
+        },
+        uploadHandlerType: {
+            type: String,
+            default: "scx-fss" // 取值 scx-fss ali-oss
+        },
+        disabled: {
+            type: Boolean,
+            default: false
+        }
+    },
+    setup(props, ctx) {
+        const aliOSS = useAliOSS();
+
+        const proxyModelValue = computed({
+            get() {
+                return props.modelValue;
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        function getUploadHandler() {
+            if (props.uploadHandler) {
+                return props.uploadHandler;
+            } else if (props.uploadHandlerType === "scx-fss") {
+                return null;
+            } else if (props.uploadHandlerType === "ali-oss") {
+                return (e, p) => aliOSS.upload(e, p);
+            } else {
+                throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        }
+
+        function getFileInfoHandler() {
+            if (props.fileInfoHandler) {
+                return props.fileInfoHandler;
+            } else if (props.uploadHandlerType === "scx-fss") {
+                return null;//这里添加压缩参数
+            } else if (props.uploadHandlerType === "ali-oss") {
+                return (e) => aliOSS.info(e);
+            } else {
+                throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        }
+
+        const onError = (error, files) => {
+            ElMessage.error(error);
+        };
+
+        return {
+            proxyModelValue,
+            getUploadHandler,
+            getFileInfoHandler,
+            onError,
+        };
+
+    }
+};
+</script>

package/components/easy-upload-list/index.vue

@@ -0,0 +1,107 @@
+<template>
+    <scx-upload-list v-model="proxyModelValue"
+                     :before-upload="getBeforeUpload"
+                     :file-info-handler="getFileInfoHandler()"
+                     :on-error="onError"
+                     :upload-handler="getUploadHandler()">
+        <template #default="{index,item}">
+            <slot :index="index" :item="item">
+            </slot>
+        </template>
+    </scx-upload-list>
+</template>
+
+<script>
+import {computed} from "vue";
+import {ElMessage} from "element-plus";
+import {useAliOSS} from "../../index.js";
+import {ScxUploadList} from "@scx-js/scx-ui";
+
+export default {
+    name: "easy-upload-list",
+    components: {ScxUploadList},
+    props: {
+        modelValue: {
+            type: Array,
+            default: null
+        },
+        uploadHandler: {
+            type: Function,
+            default: null //优先级大于  uploadHandlerType 指定的
+        },
+        fileInfoHandler: {
+            type: Function,
+            default: null
+        },
+        beforeUpload: {
+            type: Function,
+            default: null
+        },
+        uploadHandlerType: {
+            type: String,
+            default: "scx-fss" // 取值 scx-fss ali-oss
+        },
+        limit: {
+            type: Number,
+            default: null
+        }
+    },
+    setup(props, ctx) {
+        const aliOSS = useAliOSS();
+
+        const proxyModelValue = computed({
+            get() {
+                return props.modelValue ? props.modelValue : [];
+            },
+            set(value) {
+                ctx.emit("update:modelValue", value);
+            }
+        });
+
+        function getUploadHandler() {
+            if (props.uploadHandler) {
+                return props.uploadHandler;
+            } else if (props.uploadHandlerType === "scx-fss") {
+                return null;
+            } else if (props.uploadHandlerType === "ali-oss") {
+                return (e, p) => aliOSS.upload(e, p);
+            } else {
+                throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        }
+
+        function getFileInfoHandler() {
+            if (props.fileInfoHandler) {
+                return props.fileInfoHandler;
+            } else if (props.uploadHandlerType === "scx-fss") {
+                return null;//这里添加压缩参数
+            } else if (props.uploadHandlerType === "ali-oss") {
+                return (e) => aliOSS.info(e);
+            } else {
+                throw new Error("未知的 uploadHandlerType : " + props.uploadHandlerType);
+            }
+        }
+
+        const onError = (error, files) => {
+            ElMessage.error(error);
+        };
+
+        const getBeforeUpload = (files) => {
+            if (props.limit && proxyModelValue.value.length + files.length > props.limit) {
+                ElMessage.warning("文件数量超出上限, 上限 : " + props.limit + " !!!");
+                return false;
+            }
+            return props.beforeUpload ? props.beforeUpload(files) : true;
+        };
+
+        return {
+            proxyModelValue,
+            getUploadHandler,
+            getFileInfoHandler,
+            onError,
+            getBeforeUpload
+        };
+
+    }
+};
+</script>

package/components/index.js

@@ -0,0 +1,69 @@
+//以下为组件
+import CrudAddButton from "./crud/crud-add-button.vue";
+import CrudBatchDelete from "./crud/crud-batch-delete.vue";
+import CrudEditDialog from "./crud/crud-edit-dialog.vue";
+import CrudEditForm from "./crud/crud-edit-form.vue";
+import CrudFormFooter from "./crud/crud-form-footer.vue";
+import CrudPagination from "./crud/crud-pagination.vue";
+import CrudResetButton from "./crud/crud-reset-button.vue";
+import CrudSearchButton from "./crud/crud-search-button.vue";
+import CrudTable from "./crud/crud-table.vue";
+import CrudTableDeleteButton from "./crud/crud-table-delete-button.vue";
+import CrudTableEditButton from "./crud/crud-table-edit-button.vue";
+import Crud from "./crud/index.vue";
+//组件过重 暂时不引入 如需使用请单独引入
+// import EasyCkeditor from "./easy-ckeditor/index.vue";
+// import EasyCkeditorLazy from "./easy-ckeditor/easy-ckeditor-lazy.vue";
+import EasyFormItem from "./easy-form-item/index.vue";
+import EasyImage from "./easy-image/index.vue";
+//组件过重 暂时不引入 如需使用请单独引入
+// import EasyMonacoEditor from "./easy-monaco-editor/index.vue";
+import EasySelect from "./easy-select/index.vue";
+import EasyUpload from "./easy-upload/index.vue";
+import EasyUploadList from "./easy-upload-list/index.vue";
+import LeftTree from "./left-tree/index.vue";
+import ScxContainer from "./scx-container/index.vue";
+import UserProfile from "./user-profile/index.vue";
+
+
+const components = [
+    CrudAddButton,
+    CrudBatchDelete,
+    CrudEditDialog,
+    CrudEditForm,
+    CrudFormFooter,
+    CrudPagination,
+    CrudResetButton,
+    CrudSearchButton,
+    CrudTable,
+    CrudTableDeleteButton,
+    CrudTableEditButton,
+    Crud,
+    EasyFormItem,
+    EasyImage,
+    EasySelect,
+    EasyUpload,
+    EasyUploadList,
+    LeftTree,
+    ScxContainer,
+    UserProfile,
+];
+
+const directives = [];
+
+const ScxAdminComponent = {
+
+    install(app) {
+        //安装组件
+        components.forEach(c => {
+            app.component(c.name, c);
+            console.log(c);
+        });
+        //安装指令
+        directives.forEach(d => app.directive(d.name, d));
+    },
+};
+
+export {
+    ScxAdminComponent,
+};

package/components/left-tree/index.css

@@ -0,0 +1,74 @@
+.left-tree {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    row-gap: 5px;
+    height: 100%;
+    width: 100%;
+    padding: 5px;
+    box-sizing: border-box;
+}
+
+.left-tree-hearer {
+    position: relative;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.left-tree-refresh-button {
+    position: absolute;
+    left: 2px;
+}
+
+.left-tree-title {
+    font-size: 20px;
+}
+
+.left-tree-title-info {
+    position: absolute;
+    right: 2px;
+    bottom: 0;
+    font-size: 13px;
+    font-weight: 600;
+    color: #5d5d5d;
+}
+
+.tree1 {
+    height: 100%;
+    width: 100%;
+    overflow: auto;
+    background-color: var(--scx-overlay-bg);
+    box-shadow: var(--scx-box-shadow-center);
+}
+
+.custom-tree-node {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 14px;
+    padding-right: 8px;
+}
+
+/* 针对 常用情况定义的 css  */
+
+.custom-tree-node > .e1 {
+    display: flex;
+    user-select: none;
+    font-weight: 600;
+}
+
+.custom-tree-node > .e1 > .e2 {
+    color: #13ce2f;
+    margin-right: 5px
+}
+
+.custom-tree-node > .e1 > .e2:hover {
+    color: #067e18;
+}
+
+.custom-tree-node .e7 {
+    font-weight: 600;
+}

package/components/left-tree/index.vue

@@ -0,0 +1,130 @@
+<template>
+
+    <div class="left-tree">
+
+        <div class="left-tree-hearer">
+
+            <el-button class="left-tree-refresh-button" size="small" @click="refresh()">
+                <scx-icon icon="outlined-sync"/>
+            </el-button>
+
+            <div class="left-tree-title">
+                <slot name="left-tree-title">
+                    树
+                </slot>
+            </div>
+
+            <div class="left-tree-title-info">
+                <slot name="left-tree-title-info">
+
+                </slot>
+            </div>
+
+        </div>
+
+        <el-input v-model="filterText" clearable placeholder="输入名称进行过滤"/>
+
+        <el-tree ref="treeRef"
+                 :allow-drag="allowDrag"
+                 :allow-drop="allowDrop"
+                 :data="treeData"
+                 :draggable="!readonly"
+                 :expand-on-click-node="false"
+                 :filter-node-method="filterNode"
+                 :highlight-current="true"
+                 class="tree1" default-expand-all node-key="id"
+                 @node-click="nodeClick" @node-contextmenu="nodeContextMenu" @node-drop="nodeDrop">
+
+            <template #default="{ data }">
+
+                <div class="custom-tree-node">
+                    <slot :data="data" name="tree-node">
+
+                    </slot>
+                </div>
+
+            </template>
+
+        </el-tree>
+
+        <slot>
+
+        </slot>
+
+    </div>
+</template>
+<script>
+import {ref, watch} from "vue";
+
+export default {
+    name: "left-tree",
+    props: {
+        readonly: {
+            type: Boolean,
+            default: false
+        },
+        treeData: {
+            type: Array,
+            default: [],
+        },
+        allowDrag: {
+            type: Function,
+            default: null
+        },
+        allowDrop: {
+            type: Function,
+            default: null
+        }
+    },
+    emits: ["refresh", "nodeClick", "nodeContextMenu", "nodeDrop"],
+    setup(props, ctx) {
+
+        const filterText = ref("");
+
+        const treeRef = ref();
+
+        //监控 filterText 以实现树的过滤
+        watch(filterText, (val) => {
+            treeRef.value.filter(val);
+        });
+
+        function filterNode(value, data) {
+            if (!value) {
+                return true;
+            }
+            return data.name.indexOf(value) !== -1;
+        }
+
+        function refresh() {
+            ctx.emit("refresh");
+        }
+
+        function nodeDrop(dragNode, dropNode, type) {
+            ctx.emit("nodeDrop", dragNode, dropNode, type);
+        }
+
+        function nodeClick(node) {
+            ctx.emit("nodeClick", node);
+        }
+
+        function nodeContextMenu(e, data) {
+            ctx.emit("nodeContextMenu", e, data);
+        }
+
+        return {
+            filterText,
+            filterNode,
+            refresh,
+            nodeDrop,
+            nodeClick,
+            nodeContextMenu
+
+        };
+    }
+};
+
+</script>
+<style>
+@import "./index.css";
+
+</style>

package/components/scx-container/index.css

@@ -0,0 +1,19 @@
+.scx-container {
+    display: flex;
+    height: 100%;
+}
+
+.scx-container .left-page {
+    width: 20%;
+    min-width: 15%;
+    max-width: 50%;
+    border-right: 2px solid #a5a3a3;
+    flex-shrink: 0;
+    resize: horizontal;
+    overflow: auto;
+}
+
+.scx-container .right-page {
+    width: 100%;
+    overflow: auto;
+}

package/components/scx-container/index.vue

@@ -0,0 +1,22 @@
+<template>
+
+    <div class="scx-container">
+
+        <div class="left-page">
+            <slot name="left-page"/>
+        </div>
+
+        <div class="right-page">
+            <slot/>
+        </div>
+
+    </div>
+
+</template>
+<script>
+import "./index.css";
+
+export default {
+    name: "scx-container"
+};
+</script>