chain-saasui 1.0.10-alpha.21 → 1.0.10-alpha.23

package/COMPONENTS.md

@@ -0,0 +1,319 @@
+# saasui 组件清单
+
+基础组件必须优先使用 `common/saasui` 中的封装，禁止直接使用原生 `el-*` 组件。未在此列出的组件才允许回落到 Element UI。
+
+## 使用前提
+
+`saasui` 已在主应用中全局 `Vue.use(saasui)` 注册，模板内直接使用 kebab-case 标签即可：
+
+```vue
+<s-button type="primary">保存</s-button>
+```
+
+所有组件通过 `v-bind="$attrs"` / `v-on="$listeners"` 透传到底层 Element UI，因此 element 原有 props/事件仍可使用。
+
+---
+
+## 一、按钮类
+
+### `<s-button>`
+
+主按钮，替代 `el-button`。封装了路由跳转、`icon` 类型、边框模式。
+
+| 参数     | 类型     | 默认值      | 说明                                        |
+| ------ | ------ | -------- | ----------------------------------------- |
+| type   | String | default  | `primary` / `default` / `danger` / `icon` |
+| border | String | -        | 边框样式，自定义 class 后缀                         |
+| mode   | String | button   | `button` / `link` / `external`            |
+| path   | String | -        | `mode=link` 时的路由 path                     |
+| query  | Object | -        | 路由 query                                  |
+| target | String | -        | `_blank` 在新窗口打开                           |
+
+```vue
+<s-button type="primary" @click="handleSave">保存</s-button>
+<s-button mode="link" path="/detail" :query="{ id }">查看</s-button>
+```
+
+### `<s-button-text>`
+
+文字按钮，用于表格行内次要操作，替代 `el-button type="text"`。
+
+| 参数     | 类型     | 默认值  | 说明                    |
+| ------ | ------ | ---- | --------------------- |
+| type   | String | text | `text` / `link`       |
+| path   | String | -    | `type=link` 时的路由 path |
+| query  | Object | -    | 路由 query              |
+| target | String | -    | `_blank` 在新窗口打开       |
+
+### `<s-table-buttons>`
+
+行内操作按钮组，**表格操作列强制使用**。超出 `maxLength` 自动收起到下拉更多。
+
+| 参数        | 类型     | 默认值  | 说明            |
+| --------- | ------ | ---- | ------------- |
+| list      | Array  | []   | 按钮配置数组，见下方字段  |
+| row       | Object | -    | 当前行，透传到 onClick |
+| maxLength | Number | 2    | 最多显示几个，其余进入更多 |
+| moreType  | String | text | `text` / `more`（更多按钮样式） |
+
+`list` 项：`{ label, onClick, show?, tip?, attrs? }`，`show` 支持布尔或函数。
+
+```vue
+<s-table-buttons :list="actionList" :row="row" @action="handleAction" />
+```
+
+---
+
+## 二、分页 / 布局 / 容器
+
+### `<s-pagetable>`
+
+**列表页外层容器，必须使用**。自带 `header` / `form` / `footer` 插槽。
+
+| 参数                | 类型      | 默认值   | 说明                       |
+| ----------------- | ------- | ----- | ------------------------ |
+| title             | String  | 路由标题  | 页头标题，默认取路由 meta          |
+| mode              | String  | page  | `page` / `form`          |
+| showHeader        | Boolean | false | 是否显示头部                   |
+| showClose         | Boolean | false | 显示返回箭头                   |
+| showFooter        | Boolean | true  | 是否渲染 footer 插槽           |
+| showFooterButton  | Boolean | false | 底部是否展示「取消 / 确认」按钮       |
+| loadingBtn        | Boolean | false | 确认按钮 loading             |
+| confirmText       | String  | 确定    |                          |
+| cancelText        | String  | 取消    |                          |
+
+插槽：`default`（内容）、`header`、`header-append`、`title`、`form`（搜索区）、`footer`（分页）。
+
+```vue
+<s-pagetable>
+    <template #form>...筛选条件...</template>
+    <s-table :data="list" :columns="columns" />
+    <template #footer>
+        <el-pagination ... />
+    </template>
+</s-pagetable>
+```
+
+### `<s-page-tabs>` （项目中的 Tabs 基础组件）
+
+基于数组驱动的标签页，**替代 `el-tabs`**（项目中不存在 `s-tabs`，对应组件就是这个）。支持滚动、拖拽、显隐控制。
+
+| 参数           | 类型                | 默认值                            | 说明                      |
+| ------------ | ----------------- | ------------------------------ | ----------------------- |
+| value        | String / Number   | ''                             | `v-model`，当前激活的 value   |
+| tabs         | Array             | []                             | `{ label, value, disabled?, show? }` |
+| fieldNames   | Object            | `{ label, value }`             | 字段映射                    |
+| gap          | String / Number   | 32                             | tab 间距                  |
+| showBorder   | Boolean           | true                           | 是否显示下边框                 |
+| beforeLeave  | Function          | -                              | 切换前钩子，返回 `false`/Promise reject 阻止切换 |
+| draggable    | Boolean           | false                          | 是否开启拖拽排序                |
+
+事件：`input`、`tab-click(tab, index)`、`tabs-sort(newTabs, { from, to, tab })`。
+
+插槽：`extra`（右侧）、`tab-suffix`（每个 tab 尾部）。
+
+```vue
+<s-page-tabs v-model="active" :tabs="tabs" />
+```
+
+> 纯样式的简单切换也可以使用原生 `el-tabs`，但项目规范下**优先用 `s-page-tabs`**。
+
+### `<s-page-button>`
+
+页面级按钮区容器，用于 `s-pagetable` 顶部操作栏排布。
+
+### `<s-card>`
+
+内容卡片，带标题和可折叠能力。
+
+| 参数         | 类型      | 默认值   | 说明       |
+| ---------- | ------- | ----- | -------- |
+| title      | String  | ''    | 卡片标题     |
+| titleSub   | String  | ''    | 副标题      |
+| isCollapse | Boolean | false | 是否开启折叠箭头 |
+
+插槽：`title`、`action`（右上角）、`default`。
+
+### `<s-container>`
+
+外层容器，不常用，用于非 PageTable 页面的基础容器。
+
+### `<s-group>`
+
+分组数据块，常用于首页卡片类分组展示。
+
+| 参数              | 类型       | 默认值   | 说明                     |
+| --------------- | -------- | ----- | ---------------------- |
+| list            | Array    | []    | 分组数据，`{ label, children }` |
+| data            | Object   | {}    | 绑定数据                   |
+| isActive        | Function | -     | 判断 item 是否激活           |
+| showGroupTitle  | Boolean  | false | 是否显示分组标题               |
+
+---
+
+## 三、表格
+
+### `<s-table>`
+
+**列表页表格强制使用**。继承 `el-table` 全部 props + 事件，新增 `columns` 配置化、内置多选列。
+
+| 参数               | 类型       | 默认值     | 说明                                |
+| ---------------- | -------- | ------- | --------------------------------- |
+| data             | Array    | -       | 同 `el-table`                      |
+| border           | Boolean  | true    | 默认有边框                             |
+| columns          | Array    | []      | 列配置，见下方                           |
+| minWidth         | Number/String | 160 | 列默认最小宽度                           |
+| selectable       | Boolean  | false   | 是否展示多选列                           |
+| selectableType   | String   | default | `default` / `all`（跨页全选）           |
+| reserveSelection | Boolean  | false   | 翻页保留选中                            |
+| checkSelectable  | Function | () => true | 行是否可选                          |
+| selected         | Array    | []      | 跨页全选时的选中 id 集合，需 `:selected.sync` |
+
+`columns` 项字段：
+
+| 字段       | 说明                                       |
+| -------- | ---------------------------------------- |
+| label    | 表头文字                                     |
+| value    | 对应 `prop`，也是插槽名                          |
+| type     | `text` / `select` / `unit` / `operate` / `index` / `UserModel` |
+| tip      | 表头 tooltip                               |
+| width / minWidth / fixed | 列宽、冻结                      |
+| actionList | `type=operate` 时的按钮数组                  |
+| options  | `type=select` / `unit` 时的字典              |
+
+事件：`action(name, row, column)`（操作列）、`selection-change`、`select-all`、透传 `el-table` 所有事件。
+
+暴露方法：`doLayout()`、`clearSelection()`、`toggleRowSelection()`、`getSelection()`。
+
+```vue
+<s-table
+    :data="list"
+    :columns="[
+        { label: '姓名', value: 'name' },
+        { label: '状态', value: 'status', type: 'unit', options: statusOptions },
+        { label: '操作', value: 'action', type: 'operate', actionList },
+    ]"
+    @action="onAction" />
+```
+
+### `<s-table-column>`
+
+内置于 `s-table` 的列渲染器，一般不直接使用，通过 `columns` 配置。
+
+---
+
+## 四、弹窗 / 抽屉
+
+### `<s-dialog>`
+
+**新增 / 编辑弹窗必须使用**。继承 `el-dialog` 全部 props，内置 footer、loading。
+
+| 参数                 | 类型            | 默认值   | 说明                  |
+| ------------------ | ------------- | ----- | ------------------- |
+| visible            | Boolean       | false | 使用 `visible.sync`   |
+| width              | String/Number | 720px |                     |
+| showFooter         | Boolean       | true  | 是否显示底部按钮            |
+| showCancelButton   | Boolean       | true  |                     |
+| showConfirmButton  | Boolean       | true  |                     |
+| loadingBtn         | Boolean       | false | 确认按钮 loading        |
+| confirmText        | String        | 确定    |                     |
+| cancelText         | String        | 取消    |                     |
+| closeOnClickModal  | Boolean       | false | 强制 false，点击遮罩不关闭   |
+
+事件：`confirm`、`close`、`update:visible`。
+
+```vue
+<s-dialog :visible.sync="visible" title="新增" :loading-btn="saving" @confirm="onSave">
+    ...表单...
+</s-dialog>
+```
+
+### `<s-drawer>`
+
+侧边抽屉，参数同 `s-dialog`，`width` 改为 `size`（默认 720px）。
+
+### `SMessagebox` / `SInputDialog`
+
+以 JS 方式调起的命令式弹窗，直接从 saasui 导入调用。
+
+```js
+import saasui from 'saasui';
+saasui.SMessagebox({ title: '提示', content: '...' });
+```
+
+---
+
+## 五、表单控件（替代 `el-*`）
+
+> 所有控件支持 `from="text"` 进入纯展示模式，用于详情页与表单共用一套配置。
+
+| 组件                  | 替代          | 关键 props                                         |
+| ------------------- | ----------- | ------------------------------------------------ |
+| `<s-input>`         | el-input    | `type`、`from`、默认 `clearable`、`maxlength`         |
+| `<s-input-number>`  | el-input-number |                                              |
+| `<s-select>`        | el-select   | `options=[{ label, value }]`、默认 `filterable`、支持分组 |
+| `<s-cascader>`      | el-cascader | `options`、`props`                                |
+| `<s-date-picker>`   | el-date-picker | `type` 默认 `date`、`valueFormat` 默认 `yyyy-MM-dd` |
+| `<s-radio-group>`   | el-radio-group | `options`、`direction`（horizontal / vertical） |
+| `<s-switch>`        | el-switch   |                                                  |
+| `<s-mask-input>`    | -           | 脱敏输入                                             |
+| `<s-currency>`      | -           | 货币金额输入                                           |
+| `<s-currency-select>`| -          | 货币种类选择                                           |
+| `<s-field-group>`   | -           | 多字段组合，`fields=[{ field, type, ... }]`            |
+
+---
+
+## 六、展示 / 反馈
+
+| 组件                | 用途                                       |
+| ----------------- | ---------------------------------------- |
+| `<s-unit value type options>`    | 状态点 / tag 样式展示，配合字典                    |
+| `<s-tag>`         | 标签，替代 `el-tag`                          |
+| `<s-tip>`         | 提示性文字 / 弱提示                             |
+| `<s-alert>`       | 警告/通知条，替代 `el-alert`                    |
+| `<s-tooltip-wrap>`| 自适应文字省略 + tooltip，替代常见 `text-overflow` 包装 |
+| `<s-item-list>`   | 展示键值对列表                                  |
+| `<s-steps>`       | 步骤条，替代 `el-steps`                       |
+| `<s-segmented>`   | 分段控件                                     |
+| `<s-icon>`        | 图标统一入口                                   |
+| `<s-empty>`       | 空状态                                      |
+
+### `<s-tooltip-wrap>`
+
+| 参数        | 类型      | 默认值       | 说明              |
+| --------- | ------- | --------- | --------------- |
+| text      | String  | ''        | 展示文本，超出才显示 tooltip |
+| placement | String  | top-start |                 |
+| lineClamp | String  | '1'       | 多行省略行数          |
+| inherit   | Boolean | false     | 继承父级文字样式        |
+
+### `<s-unit>`
+
+| 参数      | 类型             | 默认值 | 说明                  |
+| ------- | -------------- | --- | ------------------- |
+| value   | String/Number  | -   | 值                   |
+| type    | String         | ''  | 预设类型                |
+| options | Array          | []  | 字典数组                |
+| props   | Object         | -   | 字段映射 `{ value, label, style }` |
+| color   | String         | ''  | 强制指定颜色              |
+| isLink  | Boolean        | -   | 是否当链接展示             |
+
+---
+
+## 七、布局
+
+### `<s-space>` / `<s-space-item>`
+
+元素间距容器，替代手写 `margin`。
+
+---
+
+## 使用规则速记
+
+1. **新建列表页** → `s-pagetable` + `s-table` + `s-table-buttons` + `s-dialog`
+2. **Tabs 切换** → `s-page-tabs`，不要再写 `el-tabs`
+3. **表单字段** → `s-input` / `s-select` / `s-date-picker` / `s-radio-group`，详情页传 `from="text"` 即可
+4. **弹窗** → 新增编辑用 `s-dialog`、侧边配置用 `s-drawer`、命令式用 `SMessagebox`
+5. **行内操作** → 一律用 `s-table-buttons`，不要手写 `el-button` 列表
+6. **文字省略** → `s-tooltip-wrap`，不要手写 `text-overflow`
+7. **状态展示** → `s-unit` + 字典，不要自己拼颜色

package/components/css/button.scss

@@ -1,5 +1,5 @@
 .el-button.saas-button-text {
-    color: #0e1822;
+	color: #0e1822;
     padding-left: 8px;
     padding-right: 8px;
     display: inline-flex;

package/components/css/pageTabs.scss

@@ -1,6 +1,5 @@
 .saas-stabs {
     width: 100%;
-    background: #fff;
     position: relative;
 }
 

package/components/css/table.scss

@@ -0,0 +1,3 @@
+.saas-utable {
+    
+}

package/components/css/tooltipWrap.scss

@@ -5,10 +5,11 @@
     overflow: hidden;
     white-space: nowrap;
     text-overflow: ellipsis;
-    word-break: break-all;
+    word-break: break-word;
+    overflow-wrap: break-word;
 }
 .saas-tooltip-wrap__content-more {
-    word-break: break-all;
+    word-break: break-word;
     text-overflow: ellipsis;
     display: -webkit-box;
     -webkit-box-orient: vertical;

package/components/src/SButton/STableButtons/index.vue

@@ -1,10 +1,12 @@
 <template>
     <div class="saas-table-actions">
         <el-dropdown v-if="buttonList.length" @command="handleCommand">
-            <s-button type="text">
-                {{ $t('TableData.action') }}
-                <span class="smart-caret-down"></span>
-            </s-button>
+            <slot name="trigger">
+                <s-button type="text">
+                    {{ $t('TableData.action') }}
+                    <span class="smart-caret-down"></span>
+                </s-button>
+            </slot>
             <el-dropdown-menu slot="dropdown">
                 <el-tooltip
                     v-for="(drop, index) in buttonList"

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

@@ -1,7 +1,9 @@
 <template>
     <div class="saas-select" :class="{ 'saas-text-mode': from === 'text' }">
-        <span v-if="from === 'text'" class="saas-input-text">{{ textValue }}</span>
-        <el-cascader v-else class="saas-cascader" ref="refCascader" v-on="onEvents" v-model="_value" v-bind="attrs">
+        <span v-if="from === 'text'" class="saas-input-text">
+            <STooltipWrap :text="getTextValue" />
+        </span>
+        <el-cascader v-else class="saas-cascader" ref="refCascader" v-on="onEvents" v-model="_value" :options="optionsList" v-bind="attrs">
             <template v-for="(_, slotName) in $scopedSlots" #[slotName]="scope">
                 <slot :name="slotName" v-bind="scope" />
             </template>
@@ -12,7 +14,7 @@
 <script>
 import { Cascader } from 'element-ui';
 import attrsMixin from '../mixins/attrsMixin';
-import { omit, isEmpty } from 'chain-lodash';
+import { omit, isEmpty, formatIfJson } from 'chain-lodash';
 export default {
     name: 'SCascader',
     mixins: [attrsMixin],
@@ -48,6 +50,10 @@ export default {
             type: Boolean,
             default: false,
         },
+        options: {
+            type: Array,
+            default: () => [],
+        },
     },
     data() {
         return {
@@ -69,6 +75,12 @@ export default {
                 'expand-change': this.cascaderVisable,
             };
         },
+        optionsList() {
+            return (this.options || []).map(this.formatOptions);
+        },
+        getTextValue() {
+            return this.getSelectValue() || '-';
+        },
     },
 
     methods: {
@@ -80,6 +92,51 @@ export default {
             });
             this.$emit('expand-change', ...args);
         },
+        formatOptions(item) {
+            const valueKey = (this.props && this.props.value) || 'value';
+            const labelKey = (this.props && this.props.label) || 'label';
+            const childrenKey = (this.props && this.props.children) || 'children';
+            const value = item[valueKey];
+            const label = item[labelKey];
+            const children = item[childrenKey];
+            return {
+                ...item,
+                [valueKey]: !isEmpty(value) ? String(value) : '', // 格式化成字符串避免匹配有问题
+                [labelKey]: formatIfJson(label),
+                [childrenKey]: Array.isArray(children) ? children.map(this.formatOptions) : children,
+            };
+        },
+        getSelectValue() {
+            const props = this.props || {};
+            const valueKey = props.value || 'value';
+            const labelKey = props.label || 'label';
+            const childrenKey = props.children || 'children';
+            const mul = !!props.multiple;
+            const separator = props.separator || ' / ';
+            const findPath = (tree, val) => {
+                for (const node of tree || []) {
+                    if (String(node[valueKey]) == String(val)) {
+                        return [node[labelKey]];
+                    }
+                    const children = node[childrenKey];
+                    if (Array.isArray(children) && children.length) {
+                        const childPath = findPath(children, val);
+                        if (childPath) {
+                            return [node[labelKey], ...childPath];
+                        }
+                    }
+                }
+                return null;
+            };
+            const values = mul ? this.value || [] : isEmpty(this.value) ? [] : [this.value];
+            const nameArr = values
+                .map(v => {
+                    const path = findPath(this.optionsList, v);
+                    return path ? (this.showAllLevels ? path.join(separator) : path[path.length - 1]) : '';
+                })
+                .filter(Boolean);
+            return nameArr.length ? (nameArr.length > 1 ? `${nameArr[0]} +${nameArr.length - 1}` : nameArr[0]) : '';
+        },
     },
 };
 </script>

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

@@ -16,9 +16,8 @@
 </template>
 
 <script>
-import { isEmpty } from 'chain-lodash';
+import { isEmpty, currency } from 'chain-lodash';
 import attrsMixin from '../mixins/attrsMixin';
-import currency from './currency';
 
 export default {
     name: 'SCurrency',

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

@@ -6,16 +6,16 @@
         <el-select v-else class="saas-select-input" v-model="newValue" v-on="onEvents" v-bind="attrs" filterable :clearable="clearable">
             <template v-for="item in optionsList">
                 <!-- 如果item有options属性，说明是分组 -->
-                <el-option-group v-if="item.options" :key="item.value" :label="item.label">
+                <el-option-group v-if="item.options" :key="`group-${item.value}`" :label="item.label">
                     <el-option
                         v-for="option in item.options"
-                        :disabled="option.disabled"
+                        :disabled="isOptionDisabled(option)"
                         :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>
+                <el-option v-else :disabled="isOptionDisabled(item)" :key="`opt-${item.value}`" :label="item.label" :value="item.value"></el-option>
             </template>
         </el-select>
     </div>
@@ -68,6 +68,10 @@ export default {
             type: [String, Function],
             default: '',
         },
+        optionDisabled: {
+            type: [Function, String],
+            default: '',
+        },
     },
     data() {
         return {};
@@ -157,6 +161,26 @@ export default {
         },
     },
     methods: {
+        isOptionDisabled(option) {
+            if (!option) return false;
+
+            // 1) 优先使用外部传入的禁用判定函数
+            if (typeof this.optionDisabled === 'function') {
+                return !!this.optionDisabled(option, {
+                    options: this.optionsList,
+                    value: this.newValue,
+                    multiple: !!this.multiple,
+                });
+            }
+
+            // 2) 也支持传字段名映射，例如 optionDisabled="isDisabled"
+            if (typeof this.optionDisabled === 'string' && this.optionDisabled) {
+                return !!option[this.optionDisabled];
+            }
+
+            // 3) 默认兼容原有 disabled 字段
+            return !!option.disabled;
+        },
         flattenOptions(options) {
             const result = [];
             options.forEach(item => {

package/components/src/STable/STablecolumn.vue

@@ -87,7 +87,7 @@ export default {
     methods: {
         selectValue(row) {
             let str = '';
-            let { options = [], type = 'txt', component = null } = this.column;
+            let { type = 'txt', component = null } = this.column;
             const value = row[this.column.value];
             if (this.column.formatValue) {
                 return this.column.formatValue(row, this.column);
@@ -97,7 +97,7 @@ export default {
             } else {
                 switch (type) {
                     case 'select':
-                        let obj = options.find(f => f.value == value) || {};
+                        let obj = this.column.options.find(f => f.value == value) || {};
                         str = formatIfJson(obj.label);
                         break;
                     case 'time':