chain-saasui 1.0.0

package/components/src/SPage/Pagedetail.vue

@@ -0,0 +1,114 @@
+<template>
+    <div class="saas-detail">
+        <div class="saas-detail-top">
+            <div class="saas-detail-header">
+                <div class="saas-detail-backbox">
+                    <div v-if="showClose" class="saas-detail-back" @click="goBack">
+                        <span class="el-icon-arrow-left"></span>
+                    </div>
+                </div>
+                <div class="saas-detail-titlebox" :style="computeStyle">
+                    <div class="saas-detail-title">
+                        <span class="saas-title-line"></span>
+                        <template v-if="$slots.title">
+                            <slot name="title"></slot>
+                        </template>
+                        <span v-else>
+                            {{title}}
+                        </span>
+                    </div>
+                    <div v-if="titleSub" class="saas-detail-sub">{{titleSub}}</div>
+                </div>
+                <slot name="header-append"></slot>
+            </div>
+            <div class="saas-detail-content">
+                <slot></slot>
+            </div>
+        </div>
+        <template v-if="showFooter">
+            <div class="saas-detail-footer">
+                <slot v-if="$slots.footer" name="footer"></slot>
+                <template v-else>
+                    <el-button @click="handleClose">{{ cancelText }}</el-button>
+                    <el-button :loading="loadingBtn" type="primary" @click="handleSubmit" v-preventReClick="5000">{{confirmText}}</el-button>
+                </template>
+            </div>
+        </template>
+    </div>
+</template>
+<script>
+import { omit } from "@saas/utils";
+export default {
+    name: "SPagedetail",
+    props: {
+        showFooter: {
+            type: Boolean,
+            default: () => true,
+        },
+        showClose: {
+            type: Boolean,
+            default: () => true,
+        },
+        loadingBtn: {
+            type: Boolean,
+            default: () => false,
+        },
+        computeStyle: {
+            type: Object,
+            default: () => ({
+                width: "1000px",
+                margin: "0 auto",
+            }),
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+        titleSub: {
+            type: String,
+            default: "",
+        },
+        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);
+            },
+        },
+    },
+    deactivated() {
+        this.handleClose(); // 在缓存组件时关闭弹窗
+    },
+    methods: {
+        handleSubmit() {
+            this.$emit("confirm");
+        },
+        handleClose() {
+            this.$emit("close");
+        },
+        goBack() {
+            this.$emit("close");
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/components/src/SPage/Pagestep.vue

@@ -0,0 +1,97 @@
+<template>
+    <div class="saas-pagestep">
+        <div class="saas-pagestep-top">
+            <div class="saas-pagestep-header">
+                <div class="saas-pagestep-backbox">
+                    <div class="saas-pagestep-back" @click="goBack">
+                        <span class="el-icon-arrow-left"></span>
+                    </div>
+                </div>
+                <div class="saas-pagestep-titlebox" :style="{width:width}">
+                    <div class="saas-pagestep-title">
+                        <span class="saas-title-line"></span>
+                        <template v-if="$slots.title">
+                            <slot name="title"></slot>
+                        </template>
+                        <span v-else>
+                            {{title}}
+                        </span>
+                    </div>
+                </div>
+
+            </div>
+            <div class="saas-pagestep-content">
+                <slot></slot>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+import { omit } from "@saas/utils";
+export default {
+    name: "SPagestep",
+    props: {
+        showFooter: {
+            type: Boolean,
+            default: () => true,
+        },
+        loadingBtn: {
+            type: Boolean,
+            default: () => false,
+        },
+        width: {
+            type: String,
+            default: "1000px",
+        },
+        title: {
+            type: String,
+            default: "",
+        },
+        titleSub: {
+            type: String,
+            default: "",
+        },
+        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);
+            },
+        },
+    },
+    deactivated() {
+        this.handleClose(); // 在缓存组件时关闭弹窗
+    },
+    methods: {
+        handleSubmit() {
+            this.$emit("confirm");
+        },
+        handleClose() {
+            this.$emit("close");
+        },
+        goBack() {
+            this.$emit("close");
+        },
+    },
+};
+</script>
+<style lang="scss" scoped>
+</style>

package/components/src/SPage/Pagetable.vue

@@ -0,0 +1,109 @@
+<template>
+    <div class="saas-page-table">
+        <div class="saas-page-table-header">
+            <div class="saas-page-table-menu" :class="{ hasClose: showClose }">
+                <template v-if="showClose">
+                    <div class="saas-page-table-back" @click="goBack">
+                        <span class="el-icon-arrow-left"></span>
+                    </div>
+                    <span class="saas-page-table-back_title">{{ $t('atSalaryFileImport.return') }}</span>
+                    <span class="saas-page-table-title_line"></span>
+                </template>
+                <span v-if="!showClose" class="saas-page-title-line"></span>
+                <span class="saas-page-table-title">
+                    <template v-if="$slots.title">
+                        <slot name="title"></slot>
+                    </template>
+                    <span v-else>{{ title }}</span>
+                </span>
+                <slot name="header-append"></slot>
+            </div>
+            <div class="saas-page-table-form">
+                <slot name="form"></slot>
+            </div>
+        </div>
+        <div class="saas-page-table-content">
+            <slot></slot>
+        </div>
+        <div class="saas-page-table-footer">
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</template>
+<script>
+import { omit } from '@saas/utils';
+export default {
+    name: 'SPagetable',
+    props: {
+        showFooter: {
+            type: Boolean,
+            default: () => true,
+        },
+        showClose: {
+            type: Boolean,
+            default: () => false,
+        },
+        loadingBtn: {
+            type: Boolean,
+            default: () => false,
+        },
+        computeStyle: {
+            type: Object,
+            default: () => ({
+                width: '1000px',
+                margin: '0 auto',
+            }),
+        },
+        title: {
+            type: String,
+            default() {
+                return this.$t(`saasmenu.${this.$route.meta.code}`);
+            },
+        },
+        titleSub: {
+            type: String,
+            default: '',
+        },
+        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);
+            },
+        },
+    },
+    deactivated() {
+        this.handleClose(); // 在缓存组件时关闭弹窗
+    },
+    methods: {
+        handleSubmit() {
+            this.$emit('confirm');
+        },
+        handleClose() {
+            this.$emit('close');
+        },
+        goBack() {
+            this.$emit('close');
+        },
+    },
+};
+</script>
+<style lang="scss" scoped></style>

package/components/src/STable/STablecolumn.vue

@@ -0,0 +1,91 @@
+<template>
+    <el-table-column v-bind="columnProps">
+        <template slot="header">
+            <template v-if="!$slots['header-' + column.value]">
+                <span>{{ column.label }}</span>
+                <el-tooltip placement="top" v-if="column.tip" :content="column.tip">
+                    <i style="color: #a1a5b2; margin-left: 6px" class="smart-info-filled"></i>
+                </el-tooltip>
+            </template>
+            <slot v-else :name="'header-' + column.value" :column="column">
+                {{ column.label }}
+            </slot>
+        </template>
+        <template v-if="column.type === 'index'" #default="{ $index, row }">
+            <slot :index="getIndex($index)" :row="row">
+                {{ getIndex($index) }}
+            </slot>
+        </template>
+        <template v-else #default="scope">
+            <slot :name="column.value" v-bind="getBindProps(scope)">
+                {{ selectValue(scope.row) }}
+            </slot>
+        </template>
+    </el-table-column>
+</template>
+<script>
+import { isEmpty, formatIfJson, formatSubmitTime } from '@saas/utils';
+export default {
+    name: 'STablecolumn',
+    components: {},
+    props: {
+        column: Object,
+        minWidth: {
+            type: [Number, String],
+            default: 150,
+        },
+    },
+    data() {
+        return {};
+    },
+    computed: {
+        columnProps() {
+            return {
+                ...this.column,
+                'min-width': this.column.minWidth || this.minWidth,
+                prop: this.column.value,
+                label: this.column.label,
+                showOverflowTooltip: this.column.showOverflowTooltip != null ? this.column.showOverflowTooltip : true,
+                index: this.column.indexMethod || null,
+            };
+        },
+    },
+    methods: {
+        selectValue(row) {
+            let str = '';
+            const { options = [], type = 'txt' } = this.column;
+            const value = row[this.column.value];
+            if (this.column.formatValue) {
+                return this.column.formatValue(row, this.column);
+            }
+            switch (type) {
+                case 'select':
+                    let obj = options.find(f => f.value == value) || {};
+                    str = formatIfJson(obj.label);
+                    break;
+                case 'time':
+                    str = formatSubmitTime(value, 'DD/MM/YYYY');
+                    break;
+                default:
+                    str = formatIfJson(value);
+                    break;
+            }
+            if (isEmpty(str)) {
+                str = this.column.defaultValue || '-';
+            } else if (str.length > 500) {
+                str = str.slice(0, 500) + '...';
+            }
+            return str;
+        },
+        getBindProps(params) {
+            return {
+                ...params,
+                column: this.column,
+            };
+        },
+        getIndex($index) {
+            return this.indexMethod ? this.indexMethod($index) : $index + 1;
+        },
+    },
+};
+</script>

package/components/src/STable/index.vue

@@ -0,0 +1,34 @@
+<template>
+    <el-table ref="saasTable" class="saas-table" v-bind="$props" v-on="$listeners">
+        <slot></slot>
+        <STablecolumn v-for="column in columns" :key="column.value" :column="column"></STablecolumn>
+    </el-table>
+</template>
+<script>
+import { omit } from '@saas/utils';
+import { Table } from 'element-ui';
+import STablecolumn from './STablecolumn.vue';
+export default {
+    name: 'STable',
+    props: {
+        ...Table.props,
+        border: {
+            type: Boolean,
+            default: true,
+        },
+        columns: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    components: {
+        STablecolumn,
+    },
+    data() {
+        return {};
+    },
+    computed: {},
+    deactivated() {},
+    methods: {},
+};
+</script>

package/components/src/STableButtons/STableButtons.md

@@ -0,0 +1,111 @@
+
+# `STableButtons` 行内操作按钮组组件
+
+`<STableButtons />` 是一个智能化按钮组组件，支持 **操作按钮自动折叠、tooltip 提示、显示条件控制、简洁模式** 等特性，适用于表格、卡片等操作列场景。
+
+---
+
+## 📦 功能特性
+
+* ✅ 超过指定数量按钮自动折叠进下拉菜单
+* ✅ 支持 `tooltip` 提示信息展示
+* ✅ 支持 `show` 控制按钮显示（支持布尔值和函数）
+* ✅ 支持简洁图标模式与文本下拉模式切换
+* ✅ 按钮属性自由传入（disabled、type、icon等）
+
+---
+
+## 💻 使用示例
+
+```vue
+<STableButtons :list="actionList" :row="row" :maxLength="2" moreType="more"  @action="handleAction"/>
+```
+
+### 示例按钮数据结构：
+
+```js
+actionList: [
+  {
+    label: '编辑',
+    tip: '编辑该项',
+    attrs: {
+      type: 'primary',
+    },
+  },
+  {
+    label: '删除',
+    tip: '不可恢复，请慎重',
+    attrs: {
+      type: 'danger',
+      disabled: true,
+    },
+  },
+  {
+    label: '更多操作',
+    show: () => true, // 支持函数
+  },
+];
+```
+
+---
+
+## ⚙️ Props 参数
+
+| 参数名         | 类型        | 默认值                      | 说明              |
+| ----------- | --------- | ------------------------ | --------------- |
+| `list`      | `Array`   | `[]`                     | 按钮配置数组，见下方格式说明  |
+| `maxLength` | `Number`  | `2`                      | 最多显示多少个按钮，其余收起  |
+| `moreType`   | `String` | ` text,more`             | 更多类型   |   
+| `text`      | `String`  | `$t('buttonGroup.more')` | 下拉按钮显示文本（非简洁模式） |
+
+---
+
+## 📌 按钮项结构（list）
+
+每个按钮对象的字段如下：
+
+| 字段名       | 类型                    | 说明                        |
+| --------- | --------------------- | ------------------------- |
+| `label`   | `String`              | 按钮文字内容                    |
+| `onClick` | `Function`            | 点击事件                      |
+| `tip`     | `String`              | 鼠标悬浮提示内容，可选               |
+| `show`     | `Boolean \| Function` | 控制按钮是否显示，默认 `true`        |
+| `attrs`   | `Object`              | 按钮属性（type、disabled、icon等） |
+
+---
+
+## 🧠 show 控制说明
+
+支持传入布尔值或函数：
+
+```js
+{
+  label: '操作',
+  show: true, // 或 () => user.hasPermission('xxx')
+}
+```
+
+未设置 `show` 时默认为 `true`。
+
+---
+
+## 🎨 效果图（简化描述）
+
+```text
+[编辑] [删除] [更多 ⏷]
+点击更多 ⟶
+ ├── 更多操作1
+ └── 更多操作2
+```
+
+---
+
+## 💡 简洁模式 `moreType=more`
+
+```vue
+<STableButtons :list="actionList" moreType="more" />
+```
+
+折叠按钮会只展示图标（默认使用 `smart-More` 样式），适合空间有限场景。
+
+

package/components/src/STableButtons/index.vue

@@ -0,0 +1,96 @@
+<template>
+    <div class="saas-table-buttons">
+        <template v-for="(btn, index) in buttonList">
+            <el-tooltip :disabled="!btn.tip" placement="top" :content="btn.tip" :key="index">
+                <el-button v-bind="finalAttrs(btn.attrs)" @click="handelClick(btn.action)">{{ btn.label }}</el-button>
+            </el-tooltip>
+        </template>
+        <el-dropdown v-if="dropdownList.length" @command="handleCommand">
+            <el-button v-bind="btnProps">
+                <i v-if="moreType == 'more'" class="smart-More"></i>
+                <template v-else-if="moreType == 'text'">
+                    {{ text }}
+                    <i class="el-icon-arrow-down"></i>
+                </template>
+            </el-button>
+            <el-dropdown-menu slot="dropdown">
+                <el-dropdown-item v-for="(drop, index) in dropdownList" :key="index" v-bind="finalAttrs(drop.attrs)" :command="drop.action">
+                    <el-tooltip :disabled="!drop.tip" placement="top" :content="drop.tip">
+                        <span>{{ drop.label }}</span>
+                    </el-tooltip>
+                </el-dropdown-item>
+            </el-dropdown-menu>
+        </el-dropdown>
+    </div>
+</template>
+
+<script>
+import { isEmpty } from '@saas/utils';
+export default {
+    name: 'STableButtons',
+    props: {
+        list: {
+            type: Array,
+            default: () => [],
+        },
+        maxLength: {
+            type: Number,
+            default: 2,
+        },
+        moreType: {
+            type: String,
+            default: 'more', // 'text' | 'more'
+        },
+        text: {
+            type: String,
+            default() {
+                return this.$t('buttonGroup.more');
+            },
+        },
+        row: {
+            type: Object,
+            default() {
+                return {};
+            },
+        },
+    },
+
+    data() {
+        return {
+            btnProps: {
+                size: 'mini',
+                type: 'text',
+            },
+        };
+    },
+    computed: {
+        showList() {
+            return this.list.filter(item => {
+                const show = isEmpty(item.show) ? true : item.show;
+                if (typeof show === 'function') return show(this.row);
+                return Boolean(show);
+            });
+        },
+        buttonList() {
+            return this.showList.slice(0, this.maxLength);
+        },
+        dropdownList() {
+            return this.showList.slice(this.maxLength);
+        },
+    },
+    methods: {
+        finalAttrs(attrs = {}) {
+            return {
+                ...this.btnProps,
+                ...attrs,
+            };
+        },
+        handleCommand(command) {
+            this.$emit('action', command, this.row);
+        },
+        handelClick(command) {
+            this.$emit('action', command, this.row);
+        },
+    },
+};
+</script>