xJourney/wxapp_escort_admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

start

Browse Source
This commit is contained in:
lik
2026-05-30 21:09:24 +08:00
parent 212c94224b
commit 010cf160a0
1075 changed files with 67487 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
miniprogram_npm/tdesign-miniprogram/tree-select/README.en-US.md Normal file
View File

@@ -0,0 +1,46 @@
:: BASE_DOC ::
## API
### TreeSelect Props
name | type | default | description | required
-- | -- | -- | -- | --
style | Object | - | CSS(Cascading Style Sheets) | N
custom-style | Object | - | CSS(Cascading Style Sheets)，used to set style on virtual component | N
height | String / Number | 336 | \- | N
keys | Object | - | alias filed name in data。Typescript：`KeysType`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
multiple | Boolean | false | \- | N
options | Array | [] | Typescript：`Array<DataOption>` | N
value | String / Number / Array | - | Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
default-value | String / Number / Array | undefined | uncontrolled property。Typescript：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
### TreeSelect Events
name | params | description
-- | -- | --
change | `(value: TreeSelectValue, level: TreeLevel) ` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
### TreeSelect External Classes
className | Description
-- | --
t-class | \-
t-class-left-column | \-
t-class-left-item | \-
t-class-middle-item | \-
t-class-right-column | \-
t-class-right-item | \-
t-class-right-item-label | \-
### CSS Variables
The component provides the following CSS variables, which can be used to customize styles.
Name | Default Value | Description
-- | -- | --
--td-tree-bg-color | @bg-color-container | -
--td-tree-colum-width | 206rpx | -
--td-tree-item-active-color | @brand-color | -
--td-tree-item-font-size | 32rpx | -
--td-tree-item-height | 112rpx | -
--td-tree-root-bg-color | @bg-color-secondarycontainer | -

92
miniprogram_npm/tdesign-miniprogram/tree-select/README.md Normal file
View File

@@ -0,0 +1,92 @@
---
title: TreeSelect 树形选择
description: 适用于选择树形的数据结构。
spline: form
isComponent: true
---
<div style="background: #ecf2fe; display: flex; align-items: center; line-height: 20px; padding: 14px 24px; border-radius: 3px; color: #555a65">
<svg fill="none" viewBox="0 0 16 16" width="16px" height="16px" style="margin-right: 5px">
<path fill="#0052d9" d="M8 15A7 7 0 108 1a7 7 0 000 14zM7.4 4h1.2v1.2H7.4V4zm.1 2.5h1V12h-1V6.5z" fillOpacity="0.9"></path>
</svg>
该组件于 0.32.0 版本上线，请留意版本。
</div>
## 引入
全局引入，在 miniprogram 根目录下的`app.json`中配置，局部引入，在需要引入的页面或组件的`index.json`中配置。
```json
"usingComponents": {
"t-tree-select": "tdesign-miniprogram/tree-select/tree-select"
}
```
## 代码演示
<a href="https://developers.weixin.qq.com/s/Bl64Ximr7LSl" title="在开发者工具中预览效果" target="_blank" rel="noopener noreferrer"> 在开发者工具中预览效果 </a>
<blockquote style="background-color: #d9e1ff; font-size: 15px; line-height: 26px;margin: 16px 0 0;padding: 16px; border-radius: 6px; color: #0052d9" >
<p>Tips: 请确保开发者工具为打开状态。导入开发者工具后，依次执行：npm i > 构建npm包 > 勾选 "将JS编译成ES5"</p>
</blockquote>
### 组件类型
#### 基础树形选择
{{ base }}
#### 多选树形选择
{{ multiple }}
### 组件状态
#### 三级树形选择
{{ normal }}
## API
### TreeSelect Props
名称 | 类型 | 默认值 | 描述 | 必传
-- | -- | -- | -- | --
style | Object | - | 样式 | N
custom-style | Object | - | 样式，一般用于开启虚拟化组件节点场景 | N
height | String / Number | 336 | 高度，默认单位为 px | N
keys | Object | - | 用来定义 value / label 在 `options` 中对应的字段别名。TS 类型：`KeysType`。[通用类型定义](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/common.ts) | N
multiple | Boolean | false | 是否允许多选 | N
options | Array | [] | 选项。TS 类型：`Array<DataOption>` | N
value | String / Number / Array | - | 选中值。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
default-value | String / Number / Array | undefined | 选中值。非受控属性。TS 类型：`TreeSelectValue` `type TreeSelectValue = string \| number \| Array<TreeSelectValue>`。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts) | N
### TreeSelect Events
名称 | 参数 | 描述
-- | -- | --
change | `(value: TreeSelectValue, level: TreeLevel) ` | 点击任何节点均会触发；level 代表当前点击的层级，0 代表最左侧，依次递进。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/tree-select/type.ts)。<br/>`type TreeLevel = 0 \| 1 \| 2`<br/>
### TreeSelect External Classes
类名 | 描述
-- | --
t-class | 根节点样式类
t-class-left-column | 左侧第一列样式类
t-class-left-item | 左侧第一列子项样式类
t-class-middle-item | 中间列子项样式类
t-class-right-column | 右侧第一列样式类
t-class-right-item | 右侧第一列子项样式类
t-class-right-item-label | 右侧第一列子项标签样式类
### CSS Variables
组件提供了下列 CSS 变量，可用于自定义样式。
名称 | 默认值 | 描述
-- | -- | --
--td-tree-bg-color | @bg-color-container | -
--td-tree-colum-width | 206rpx | -
--td-tree-item-active-color | @brand-color | -
--td-tree-item-font-size | 32rpx | -
--td-tree-item-height | 112rpx | -
--td-tree-root-bg-color | @bg-color-secondarycontainer | -

7
miniprogram_npm/tdesign-miniprogram/tree-select/index.wxs Normal file
View File

@@ -0,0 +1,7 @@
var getTreeClass = function (level, total) {
if (level === 0) return 'right';
if (level === 1 && level !== total - 1) return 'middle';
return 'left';
};
module.exports.getTreeClass = getTreeClass;

3
miniprogram_npm/tdesign-miniprogram/tree-select/props.d.ts vendored Normal file
View File

@@ -0,0 +1,3 @@
import { TdTreeSelectProps } from './type';
declare const props: TdTreeSelectProps;
export default props;

25
miniprogram_npm/tdesign-miniprogram/tree-select/props.js Normal file
View File

@@ -0,0 +1,25 @@
const props = {
height: {
type: null,
value: 336,
},
keys: {
type: Object,
},
multiple: {
type: Boolean,
value: false,
},
options: {
type: Array,
value: [],
},
value: {
type: null,
value: null,
},
defaultValue: {
type: null,
},
};
export default props;

60
miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.d.ts vendored Normal file
View File

@@ -0,0 +1,60 @@
import { SuperComponent } from '../common/src/index';
import type { TreeOptionData } from '../common/common';
export default class TreeSelect extends SuperComponent {
externalClasses: string[];
options: {
multipleSlots: boolean;
};
data: {
prefix: string;
classPrefix: string;
scrollIntoView: any;
};
properties: {
customValue: {
type: any;
value: any;
};
height?: {
type: null;
value?: string | number;
};
keys?: {
type: ObjectConstructor;
value?: import("../common/common").KeysType;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: TreeOptionData<string | number>[];
};
value?: {
type: null;
value?: import("./type").TreeSelectValue;
};
defaultValue?: {
type: null;
value?: import("./type").TreeSelectValue;
};
};
controlledProps: {
key: string;
event: string;
}[];
observers: {
'value, customValue, options, keys, multiple'(): void;
};
lifetimes: {
ready(): void;
};
methods: {
buildTreeOptions(): void;
getScrollIntoView(status: string): void;
onRootChange(e: any): void;
handleTreeClick(e: any): void;
handleRadioChange(e: any): void;
};
}

144
miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.js Normal file
View File

@@ -0,0 +1,144 @@
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { SuperComponent, wxComponent } from '../common/src/index';
import config from '../common/config';
import props from './props';
const { prefix } = config;
const name = `${prefix}-tree-select`;
let TreeSelect = class TreeSelect extends SuperComponent {
constructor() {
super(...arguments);
this.externalClasses = [
`${prefix}-class`,
`${prefix}-class-left-column`,
`${prefix}-class-left-item`,
`${prefix}-class-middle-item`,
`${prefix}-class-right-column`,
`${prefix}-class-right-item`,
`${prefix}-class-right-item-label`,
];
this.options = {
multipleSlots: true,
};
this.data = {
prefix,
classPrefix: name,
scrollIntoView: null,
};
this.properties = Object.assign(Object.assign({}, props), { customValue: {
type: null,
value: null,
} });
this.controlledProps = [
{
key: 'value',
event: 'change',
},
];
this.observers = {
'value, customValue, options, keys, multiple'() {
this.buildTreeOptions();
},
};
this.lifetimes = {
ready() {
this.getScrollIntoView('init');
},
};
this.methods = {
buildTreeOptions() {
const { options, value, defaultValue, customValue, multiple, keys } = this.data;
const treeOptions = [];
let level = -1;
let node = { children: options };
if (options.length === 0)
return;
while (node && node.children) {
level += 1;
const list = node.children.map((item) => ({
label: item[(keys === null || keys === void 0 ? void 0 : keys.label) || 'label'],
value: item[(keys === null || keys === void 0 ? void 0 : keys.value) || 'value'],
children: item.children,
}));
const thisValue = (customValue === null || customValue === void 0 ? void 0 : customValue[level]) || (value === null || value === void 0 ? void 0 : value[level]);
treeOptions.push([...list]);
if (thisValue == null) {
const [firstChild] = list;
node = firstChild;
}
else {
const child = list.find((child) => child.value === thisValue);
node = child !== null && child !== void 0 ? child : list[0];
}
}
const leafLevel = Math.max(0, level);
if (multiple) {
const finalValue = customValue || value || defaultValue;
if (finalValue[leafLevel] != null && !Array.isArray(finalValue[leafLevel])) {
throw TypeError('应传入数组类型的 value');
}
}
this.setData({
innerValue: customValue ||
(treeOptions === null || treeOptions === void 0 ? void 0 : treeOptions.map((ele, idx) => {
const v = idx === treeOptions.length - 1 && multiple ? [ele[0].value] : ele[0].value;
return (value === null || value === void 0 ? void 0 : value[idx]) || v;
})),
leafLevel,
treeOptions,
});
},
getScrollIntoView(status) {
const { value, customValue, scrollIntoView } = this.data;
if (status === 'init') {
const _value = customValue || value;
const scrollIntoView = Array.isArray(_value)
? _value.map((item) => {
return Array.isArray(item) ? item[0] : item;
})
: [_value];
this.setData({
scrollIntoView,
});
}
else {
if (scrollIntoView === null)
return;
this.setData({
scrollIntoView: null,
});
}
},
onRootChange(e) {
const { innerValue } = this.data;
const { value: itemValue } = e.detail;
this.getScrollIntoView('none');
innerValue[0] = itemValue;
this._trigger('change', { value: innerValue, level: 0 });
},
handleTreeClick(e) {
const { level, value: itemValue } = e.currentTarget.dataset;
const { innerValue } = this.data;
innerValue[level] = itemValue;
this.getScrollIntoView('none');
this._trigger('change', { value: innerValue, level: 1 });
},
handleRadioChange(e) {
const { innerValue } = this.data;
const { value: itemValue } = e.detail;
const { level } = e.target.dataset;
innerValue[level] = itemValue;
this.getScrollIntoView('none');
this._trigger('change', { value: innerValue, level });
},
};
}
};
TreeSelect = __decorate([
wxComponent()
], TreeSelect);
export default TreeSelect;

13
miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.json Normal file
View File

@@ -0,0 +1,13 @@
{
"component": true,
"styleIsolation": "apply-shared",
"usingComponents": {
"t-radio": "../radio/radio",
"t-radio-group": "../radio-group/radio-group",
"t-checkbox": "../checkbox/checkbox",
"t-checkbox-group": "../checkbox-group/checkbox-group",
"t-side-bar": "../side-bar/side-bar",
"t-side-bar-item": "../side-bar-item/side-bar-item",
"t-scroll-view": "../scroll-view/scroll-view"
}
}

86
miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxml Normal file
View File

@@ -0,0 +1,86 @@
<wxs module="_" src="../common/utils.wxs" />
<wxs module="_this" src="./index.wxs" />
<view class="{{classPrefix}} class" style="{{_._style(['height:' + _.addUnit(height) , style, customStyle])}}">
<t-scroll-view
class="{{_.cls(classPrefix + '__column', [_this.getTreeClass(leafLevel - level, treeOptions.length)])}} {{prefix}}-class"
wx:for="{{treeOptions}}"
wx:key="level"
wx:for-index="level"
scrollIntoView="{{scrollIntoView && scrollIntoView[level] ? '.scroll-into-view >>> #scroll-to-' + scrollIntoView[level] : '' }}"
>
<t-side-bar
wx:if="{{level == 0}}"
value="{{innerValue[level]}}"
bind:change="onRootChange"
t-class="{{classPrefix}}-column {{prefix}}-class-left-column"
>
<t-side-bar-item
wx:for="{{treeOptions[level]}}"
wx:key="index"
label="{{item.label}}"
value="{{item.value}}"
tId="scroll-to-{{item.value}}"
class="scroll-into-view"
t-class="{{prefix}}-class-left-item"
/>
</t-side-bar>
<block wx:elif="{{level != leafLevel}}">
<view
wx:for="{{treeOptions[level]}}"
wx:key="value"
bind:tap="handleTreeClick"
data-level="{{level}}"
data-value="{{item.value}}"
class="{{_.cls(classPrefix + '__item', [['active', item.value === innerValue[level]]])}} {{prefix}}-class-middle-item scroll-into-view"
>
<view id="scroll-to-{{item.value}}"> {{item.label}} </view>
</view>
</block>
<t-radio-group
wx:elif="{{!multiple}}"
class="{{classPrefix}}__radio {{prefix}}-class-right-column"
data-level="{{level}}"
value="{{innerValue[level]}}"
bind:change="handleRadioChange"
>
<t-radio
wx:for="{{treeOptions[level]}}"
wx:key="value"
tId="scroll-to-{{item.value}}"
class="scroll-into-view {{classPrefix}}__radio-item {{prefix}}-class-right-item"
t-class-label="{{prefix}}-class-right-item-label"
icon="line"
value="{{item.value}}"
maxLabelRow="{{1}}"
borderless
placement="right"
>
{{item.label}}
</t-radio>
</t-radio-group>
<t-checkbox-group
wx:else
class="{{classPrefix}}__checkbox {{prefix}}-class-right-column"
value="{{innerValue[level] || []}}"
bind:change="handleRadioChange"
data-level="{{level}}"
>
<t-checkbox
wx:for="{{treeOptions[level]}}"
wx:key="value"
placement="right"
icon="line"
maxLabelRow="{{1}}"
tId="scroll-to-{{item.value}}"
class="scroll-into-view {{prefix}}-class-right-item"
t-class-label="{{prefix}}-class-right-item-label"
borderless
value="{{item.value}}"
>
{{item.label}}
</t-checkbox>
</t-checkbox-group>
</t-scroll-view>
<slot name="content" />
</view>

66
miniprogram_npm/tdesign-miniprogram/tree-select/tree-select.wxss Normal file
View File

@@ -0,0 +1,66 @@
.t-float-left {
float: left;
}
.t-float-right {
float: right;
}
@keyframes tdesign-fade-out {
from {
opacity: 1;
}
to {
opacity: 0;
}
}
.hotspot-expanded.relative {
position: relative;
}
.hotspot-expanded::after {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
transform: scale(1.5);
}
.t-tree-select {
display: flex;
background-color: var(--td-tree-bg-color, var(--td-bg-color-container, var(--td-font-white-1, #ffffff)));
}
.t-tree-select__column {
width: var(--td-tree-colum-width, 206rpx);
color: var(--td-tree-colum-text-color, var(--td-text-color-primary, var(--td-font-gray-1, rgba(0, 0, 0, 0.9))));
}
.t-tree-select__column--left {
background: var(--td-tree-root-bg-color, var(--td-bg-color-secondarycontainer, var(--td-gray-color-1, #f3f3f3)));
}
.t-tree-select__column--right {
flex: 1;
}
.t-tree-select__column::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
color: transparent;
}
.t-tree-select__item {
overflow: hidden;
text-overflow: ellipsis;
-webkit-line-clamp: 1;
display: -webkit-box;
-webkit-box-orient: vertical;
height: var(--td-tree-item-height, 112rpx);
line-height: var(--td-tree-item-height, 112rpx);
font-size: var(--td-tree-item-font-size, 32rpx);
padding-left: 32rpx;
}
.t-tree-select__item--active {
font-weight: 600;
color: var(--td-tree-item-active-color, var(--td-brand-color, var(--td-primary-color-7, #0052d9)));
}
.t-tree-select-column {
width: 100%;
height: auto;
}

28
miniprogram_npm/tdesign-miniprogram/tree-select/type.d.ts vendored Normal file
View File

@@ -0,0 +1,28 @@
import { TreeOptionData, KeysType } from '../common/common';
export interface TdTreeSelectProps<DataOption extends TreeOptionData = TreeOptionData> {
height?: {
type: null;
value?: string | number;
};
keys?: {
type: ObjectConstructor;
value?: KeysType;
};
multiple?: {
type: BooleanConstructor;
value?: boolean;
};
options?: {
type: ArrayConstructor;
value?: Array<DataOption>;
};
value?: {
type: null;
value?: TreeSelectValue;
};
defaultValue?: {
type: null;
value?: TreeSelectValue;
};
}
export declare type TreeSelectValue = string | number | Array<TreeSelectValue>;

1
miniprogram_npm/tdesign-miniprogram/tree-select/type.js Normal file
View File

@@ -0,0 +1 @@
export {};