chain-saasui 1.0.0

package/components/src/SCard/index.vue

@@ -0,0 +1,41 @@
+<template>
+    <div class="saas-card">
+        <div class="saas-card-header">
+            <slot name="title">
+                {{ title }}
+            </slot>
+        </div>
+        <div class="saas-card-content">
+            <slot></slot>
+        </div>
+    </div>
+</template>
+<script>
+import { omit } from "@saas/utils";
+export default {
+    name: "SCard",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        titleSub: {
+            type: String,
+            default: "",
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+
+    },
+    deactivated() {
+    },
+    methods: {
+
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/components/src/SContainer/index.vue

@@ -0,0 +1,36 @@
+<template>
+    <div class="saas-container">
+        <div class="saas-container-header">
+            <slot name="header"></slot>
+        </div>
+        <div class="saas-container-content">
+            <slot></slot>
+        </div>
+        <div class="saas-container-footer">
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</template>
+<script>
+import { omit } from '@saas/utils';
+export default {
+    name: 'SContainer',
+    props: {
+        title: {
+            type: String,
+            default: '',
+        },
+        titleSub: {
+            type: String,
+            default: '',
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {},
+    deactivated() {},
+    methods: {},
+};
+</script>
+<style lang="scss" scoped></style>

package/components/src/SDialog/index.vue

@@ -0,0 +1,99 @@
+<template>
+    <el-dialog class="saas-dialog" v-bind="bindProps" :close-on-click-modal="false" v-on="$listeners" :visible.sync="show">
+        <template v-if="$slots.title" slot="title">
+            <slot name="title"></slot>
+        </template>
+        <div class="saas-dialog-content" :class="{'saas-dialog-auto':isAuto}">
+            <slot></slot>
+        </div>
+        <template v-if="showFooter" slot="footer">
+            <slot v-if="$slots.footer" name="footer"></slot>
+            <div v-else>
+                <el-button v-if="showCancelButton" @click="handleClose">{{ cancelText }}</el-button>
+                <el-button v-if="showConfirmButton" :loading="loadingBtn" type="primary" @click="handleSubmit" v-preventReClick="5000">{{confirmText}}</el-button>
+            </div>
+        </template>
+    </el-dialog>
+</template>
+<script>
+import { Dialog } from "element-ui";
+import { omit } from "@saas/utils";
+export default {
+    name: "SDialog",
+    props: {
+        ...Dialog.props,
+        showFooter: {
+            type: Boolean,
+            default: () => true,
+        },
+        width: {
+            type: [String, Number],
+            default: () => "600px",
+        },
+        // closeOnClickModal: {
+        //     type: Boolean,
+        //     default: () => false,
+        // },
+        loadingBtn: {
+            type: Boolean,
+            default: () => false,
+        },
+        visible: {
+            type: Boolean,
+            default: false,
+        },
+        showCancelButton: {
+            type: Boolean,
+            default: () => true,
+        },
+        showConfirmButton: {
+            type: Boolean,
+            default: () => true,
+        },
+        confirmText: {
+            type: String,
+            default() {
+                return this.$t("buttonGroup.sure");
+            },
+        },
+        cancelText: {
+            type: String,
+            default() {
+                return this.$t("buttonGroup.cancel");
+            },
+        },
+        isAuto: {
+            type: Boolean,
+            default: true,
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        show: {
+            get() {
+                return this.visible;
+            },
+            set(val) {
+                this.$emit("update:visible", val);
+            },
+        },
+        bindProps() {
+            return omit(this.$props, ["visible"]);
+        },
+    },
+    deactivated() {
+        this.handleClose() // 在缓存组件时关闭弹窗
+    },
+    methods: {
+        handleSubmit() {
+            this.$emit("confirm");
+        },
+        handleClose() {
+            this.$emit("update:visible", false);
+            this.$emit("close");
+        },
+    },
+};
+</script>

package/components/src/SDrawer/index.vue

@@ -0,0 +1,95 @@
+<template>
+    <el-drawer class="saas-drawer" v-bind="bindProps" :wrapperClosable="false" v-on="$listeners" :visible.sync="show">
+        <template v-if="$slots.title" slot="title">
+            <slot name="title"></slot>
+        </template>
+        <div class="saas-drawer-content">
+            <slot></slot>
+        </div>
+        <div v-if="showFooter" class="saas-drawer-footer">
+            <slot v-if="$slots.footer" name="footer"></slot>
+            <template v-else>
+                <el-button v-if="showCancelButton" @click="handleClose">{{ cancelText }}</el-button>
+                <el-button v-if="showConfirmButton" :loading="loadingBtn" type="primary" @click="handleSubmit" v-preventReClick="5000">{{confirmText}}</el-button>
+            </template>
+        </div>
+    </el-drawer>
+</template>
+<script>
+import { Drawer } from "element-ui";
+import { omit } from "@saas/utils";
+export default {
+    name: "SDrawer",
+    props: {
+        ...Drawer.props,
+        showFooter: {
+            type: Boolean,
+            default: () => true,
+        },
+        size: {
+            type: [String, Number],
+            default: () => "800px",
+        },
+        wrapperClosable: {
+            type: Boolean,
+            default: () => false,
+        },
+        loadingBtn: {
+            type: Boolean,
+            default: () => false,
+        },
+        appendToBody: {
+            type: Boolean,
+            default: true,
+        },
+        showCancelButton: {
+            type: Boolean,
+            default: true,
+        },
+        showConfirmButton: {
+            type: Boolean,
+            default: true,
+        },
+        confirmText: {
+            type: String,
+            default() {
+                return this.$t("buttonGroup.sure");
+            },
+        },
+        cancelText: {
+            type: String,
+            default() {
+                return this.$t("buttonGroup.cancel");
+            },
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        show: {
+            get() {
+                return this.visible;
+            },
+            set(val) {
+                this.$emit("update:visible", val);
+            },
+        },
+        bindProps() {
+            return omit(this.$props, ["visible"]);
+        },
+    },
+    deactivated() {
+        this.handleClose(); // 在缓存组件时关闭弹窗
+    },
+    methods: {
+        handleSubmit() {
+            this.$emit("confirm");
+        },
+        handleClose() {
+            this.$emit("update:visible", false);
+            this.$emit("close");
+        },
+    },
+};
+</script>

package/components/src/SForm/SSelect/index.vue

@@ -0,0 +1,108 @@
+<template>
+    <div class="saas-select" :class="{ 'saas-search-textbox': from === 'text' }">
+        <span v-if="from === 'text'" class="search-dict">{{ selectValue }}</span>
+        <el-select
+            v-else
+            style="width: 100%"
+            v-model="newValue"
+            :size="size"
+            :multiple="multiple"
+            :placeholder="placeholder"
+            v-bind="$attrs"
+            filterable
+            clearable>
+            <template v-for="item in options">
+                <!-- 如果item有options属性，说明是分组 -->
+                <el-option-group v-if="item.options" :key="item.value" :label="item.label">
+                    <el-option
+                        v-for="option in item.options"
+                        :disabled="option.disabled"
+                        :key="option.value"
+                        :label="option.label"
+                        :value="option.value"></el-option>
+                </el-option-group>
+                <!-- 否则是普通选项 -->
+                <el-option v-else :disabled="item.disabled" :key="item.value" :label="item.label" :value="item.value"></el-option>
+            </template>
+        </el-select>
+    </div>
+</template>
+<script>
+import { isEmpty, omit } from '@saas/utils';
+import { Select } from 'element-ui';
+export default {
+    name: 'SSelect',
+    props: {
+        ...omit(Select.props, ['value', 'clearable']),
+        value: {
+            type: [String, Number, Array],
+        },
+        clearable: {
+            type: Boolean,
+            default: () => true,
+        },
+        placeholder: {
+            type: String,
+            default() {
+                return this.$t('common.pleaseSelect');
+            },
+        },
+        from: {
+            type: String,
+            default: 'select',
+        },
+        options: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        newValue: {
+            get() {
+                let value = this.multiple ? [] : '';
+                if (this.multiple) {
+                    value = (this.value || []).map(m => (m != null ? String(m) : ''));
+                } else {
+                    if (!isEmpty(this.value) && this.value != null) {
+                        value = String(this.value);
+                    }
+                }
+                return value;
+            },
+            set(val) {
+                this.$emit('input', val);
+            },
+        },
+        selectValue() {
+            const multiple = this.multiple;
+            // 扁平化所有选项，包括分组中的选项
+            const allOptions = this.flattenOptions(this.options || []);
+
+            if (multiple) {
+                const nameArr = allOptions.filter(f => this.newValue.includes(f.value)).map(m => m.label);
+                return nameArr.length > 1 ? `${nameArr[0]} +${nameArr.length - 1}` : nameArr[0];
+            } else {
+                const obj = allOptions.find(f => f.value == this.newValue) || {};
+                return obj.label || '-';
+            }
+        },
+    },
+    methods: {
+        flattenOptions(options) {
+            const result = [];
+            options.forEach(item => {
+                if (item.options) {
+                    result.push(...item.options);
+                } else {
+                    result.push(item);
+                }
+            });
+            return result;
+        },
+    },
+};
+</script>
+<style lang="scss" scoped></style>

package/components/src/SGroup/index.vue

@@ -0,0 +1,81 @@
+<template>
+    <div class="saas-group">
+        <div class="saas-sort-group" v-for="(group,index) in list" :key="index">
+            <div v-for="(item,index) in group.children" :key="index" class="saas-sort-item" :class="{active: getActive(item , group)}" @click="handleClick(item,group)">
+                <div class="title" :style="getSortStyle(item)">{{item.formatValue(item,data)}}</div>
+                <div class="text">
+                    <span>
+                        <slot :item="item">
+                            {{item.label}}
+                            <el-tooltip v-if="item.tip" :content="item.tip">
+                                <div slot="content" v-html="item.tip"></div>
+                                <i style="color:#A1A5B2;margin-left:4px" class="smart-info-filled"> </i>
+                            </el-tooltip>
+                        </slot>
+                    </span>
+
+                </div>
+                <img src="./icon_rtsuc.png" alt="" srcset="">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { omit } from "@saas/utils";
+export default {
+    name: "SGroup",
+    props: {
+        title: {
+            type: String,
+            default: "",
+        },
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        data: {
+            type: Object,
+            default: () => ({})
+        },
+        isActive: {
+            type: Function,
+            default: null
+        }
+    },
+    data() {
+        return {};
+    },
+    computed: {
+
+    },
+    deactivated() {
+    },
+    methods: {
+        getSortStyle(item) {
+            let obj = {};
+            if (item.type === "percent") {
+                const num = this.data[item.field];
+                if (num <= 30) {
+                    obj.color = "#FF3B30";
+                } else if (num <= 60) {
+                    obj.color = "#FF9900";
+                } else {
+                    obj.color = "#28B86A";
+                }
+            }
+            return obj;
+        },
+        handleClick(item, group) {
+            this.$emit('tab-click', item, group)
+        },
+        getActive(item, group) {
+            if (this.isActive) {
+                return this.isActive(item, group)
+            }
+            return false;
+        }
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/components/src/SMessagebox/index.js

@@ -0,0 +1,66 @@
+import MessageBox from './messagebox.vue';
+
+// MessageBoxManager.js
+export default class MessageBoxManager {
+    constructor(Vue, i18n, Component = MessageBox) {
+        if (!Vue) throw new Error('[MessageBox] Vue instance is required');
+        if (!Component) throw new Error('[MessageBox] Vue component is required');
+
+        this.Vue = Vue;
+        this.i18n = i18n;
+        this.Component = Component;
+        this.instance = null;
+    }
+
+    _t(key) {
+        return this.i18n ? this.i18n.t(key) : key;
+    }
+
+    _createInstance() {
+        const Constructor = this.Vue.extend(this.Component);
+        this.instance = new Constructor({
+            el: document.createElement('div'),
+        });
+        document.body.appendChild(this.instance.$el);
+    }
+
+    _getInstance() {
+        if (!this.instance) this._createInstance();
+        return this.instance;
+    }
+
+    alert(options) {
+        const instance = this._getInstance();
+        return instance.open({
+            ...options,
+            title: options.title || this._t('deletemsg.hint'),
+            confirmText: options.confirmText || this._t("buttonGroup.sure"),
+            cancelText: options.cancelText || this._t("buttonGroup.cancel"),
+            message: options.message,
+            showCancelButton: false,
+        });
+    }
+
+    confirm(options) {
+        const instance = this._getInstance();
+        return instance.open({
+            ...options,
+            title: options.title || this._t('deletemsg.hint'),
+            confirmText: options.confirmText || this._t("buttonGroup.sure"),
+            cancelText: options.cancelText || this._t("buttonGroup.cancel"),
+            message: options.message,
+        });
+    }
+
+    prompt(options) {
+        const instance = this._getInstance();
+        return instance.open({
+            ...options,
+            title: options.title || this._t('deletemsg.hint'),
+            confirmText: options.confirmText || this._t("buttonGroup.sure"),
+            cancelText: options.cancelText || this._t("buttonGroup.cancel"),
+            message: options.message,
+            showInput: true,
+        });
+    }
+}

package/components/src/SMessagebox/messagebox.vue

@@ -0,0 +1,85 @@
+<template>
+    <transition name="el-fade-in-linear">
+        <div v-if="visible" class="message-box-overlay">
+            <div class="message-box">
+                <div class="message-box_main">
+                    <div class="message-box_icon">
+                        <span class="el-icon-warning"></span>
+                    </div>
+                    <div class="message-box_right">
+                        <div class="message-box__header">
+                            <span class="message-box__title">{{ title }}</span>
+                        </div>
+                        <div class="message-box__content">
+                            <div v-if="message && dangerouslyUseHTMLString == false">{{ message }}</div>
+                            <div v-if="message && dangerouslyUseHTMLString" v-html="message"></div>
+                            <el-input v-if="showInput" v-model="inputValue" class="message-box__input" :placeholder="inputPlaceholder" />
+                        </div>
+                    </div>
+                </div>
+                <div class="message-box__footer">
+                    <el-button v-if="showCancelButton" @click="handleCancel" size="mini">{{cancelText}}</el-button>
+                    <el-button @click="handleConfirm" type="primary" size="mini">{{confirmText}}</el-button>
+                </div>
+            </div>
+        </div>
+    </transition>
+</template>
+
+<script>
+import { isEmpty } from "@saas/utils";
+export default {
+    name: 'SMessageBox',
+    props: {
+
+    },
+    data() {
+        return {
+            visible: false,
+            title: '',
+            message: '',
+            showInput: false,
+            inputValue: '',
+            inputPlaceholder: '',
+            showCancelButton: false,
+            resolve: null,
+            reject: null,
+            confirmText: "",
+            cancelText: "",
+            dangerouslyUseHTMLString: false,
+        };
+    },
+    methods: {
+        open(options) {
+            this.title = options.title;
+            this.message = options.message || '';
+            this.showClose = isEmpty(options.showClose) ? true : options.showClose;
+            this.showInput = options.showInput || false;
+            this.dangerouslyUseHTMLString = options.dangerouslyUseHTMLString || false;
+            this.inputPlaceholder = options.inputPlaceholder || '';
+            this.showCancelButton = isEmpty(options.showCancelButton) ? true : options.showCancelButton;
+            this.confirmText = options.confirmText;
+            this.cancelText = options.cancelText;
+            this.visible = true;
+            this.inputValue = '';
+
+            return new Promise((resolve, reject) => {
+                this.resolve = resolve;
+                this.reject = reject;
+            });
+        },
+        handleConfirm() {
+            this.visible = false;
+            if (this.showInput) {
+                this.resolve(this.inputValue);
+            } else {
+                this.resolve(true);
+            }
+        },
+        handleCancel() {
+            this.visible = false;
+            this.reject('cancel');
+        },
+    },
+};
+</script>