{this.rawItemText}
; + } + if (this.type === 'HEADING2') { + return{this.rawItemText}
; + } + if (this.type === 'HEADING3') { + return{this.rawItemText}
; + } + if (this.type === 'HEADING4') { + return{this.rawItemText}
; + } + if (this.type === 'HEADING5') { + return{this.rawItemText}
; + } + if (this.type === 'HEADING6') { + return{this.rawItemText}
; + } + if (this.type === 'PARAGRAPH') { + return{this.rawItemText}
; + } + if (this.type === 'HTML') { + return ( + + ); + } + if (this.type === 'VIDEO') { + return ( +
+
+
+ );
+ }
+ if (this.type === 'DIVIDER') {
+ return (
+ {this.type}类型暂未支持
;
+ }
+ return null;
+ },
+});
diff --git a/src/common/index.ts b/src/common/index.ts
index 90a8334c1..27256c728 100644
--- a/src/common/index.ts
+++ b/src/common/index.ts
@@ -8,6 +8,7 @@ import { IBizRow } from './row/row';
import { IBizControlBase } from './control-base/control-base';
import { IBizControlShell } from './control-shell/control-shell';
import { IBizViewShell } from './view-shell/view-shell';
+import { AppRawItem } from './app-rawitem/app-rawitem';
export * from './icon/icon';
export * from './keep-alive/keep-alive';
@@ -18,6 +19,7 @@ export * from './action-toolbar/action-toolbar';
export * from './control-base/control-base';
export * from './control-shell/control-shell';
export * from './view-shell/view-shell';
+export * from './app-rawitem/app-rawitem';
export const IBizCommonComponents = {
install: (v: App) => {
@@ -30,6 +32,7 @@ export const IBizCommonComponents = {
v.component(IBizActionToolbar.name, IBizActionToolbar);
v.component(IBizViewShell.name, IBizViewShell);
v.component(IBizControlShell.name, IBizControlShell);
+ v.component(AppRawItem.name, AppRawItem);
},
};
diff --git a/src/editor/autocomplete/autocomplete-editor.controller.ts b/src/editor/autocomplete/autocomplete-editor.controller.ts
new file mode 100644
index 000000000..1df93ef0a
--- /dev/null
+++ b/src/editor/autocomplete/autocomplete-editor.controller.ts
@@ -0,0 +1,150 @@
+import { IHttpResponse, RuntimeModelError } from '@ibiz-template/core';
+import { EditorController } from '@ibiz-template/runtime';
+import { IAppDataEntity, IAutoComplete } from '@ibiz/model-core';
+
+/**
+ * 自动完成编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class AutoCompleteEditorController extends EditorController {
+ this.onACSelect(item);
+ }}
+ >
+ {item[this.c.textName]}
+
+ );
+ },
+ suffix: () => {},
+ }}
+
+ {this.readonly ? (
+ this.valueText
+ ) : (
+
+ {this.items.map((item, index: number) => (
+
+ {item.text}
+
+ ))}
+
+ )}
+
+ );
+ },
+});
diff --git a/src/editor/check-box-list/ibiz-grid-checkbox-list/ibiz-grid-checkbox-list.tsx b/src/editor/check-box-list/ibiz-grid-checkbox-list/ibiz-grid-checkbox-list.tsx
new file mode 100644
index 000000000..ac2d3c957
--- /dev/null
+++ b/src/editor/check-box-list/ibiz-grid-checkbox-list/ibiz-grid-checkbox-list.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, h, resolveComponent } from 'vue';
+import {
+ getGridEditorEmits,
+ getGridInputProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { CheckBoxListEditorController } from '../checkbox-list-editor.controller';
+
+export const IBizGridCheckboxList = defineComponent({
+ name: 'IBizGridCheckboxList',
+ props: getGridInputProps
+ {h(resolveComponent('IBizCheckboxList'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/check-box-list/index.ts b/src/editor/check-box-list/index.ts
new file mode 100644
index 000000000..418a6ccd8
--- /dev/null
+++ b/src/editor/check-box-list/index.ts
@@ -0,0 +1,4 @@
+export { IBizCheckboxList } from './ibiz-checkbox-list/ibiz-checkbox-list';
+export { IBizGridCheckboxList } from './ibiz-grid-checkbox-list/ibiz-grid-checkbox-list';
+export * from './checkbox-list-editor.controller';
+export * from './checkbox-list-editor.provider';
diff --git a/src/editor/check-box/check-box-editor.controller.ts b/src/editor/check-box/check-box-editor.controller.ts
new file mode 100644
index 000000000..90e66002d
--- /dev/null
+++ b/src/editor/check-box/check-box-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { ICheckBox } from '@ibiz/model-core';
+
+/**
+ * 选项框编辑器控制器
+ *
+ * @export
+ * @class CheckBoxEditorController
+ * @extends {EditorController}
+ */
+export class CheckBoxEditorController extends EditorController
+
+ );
+ },
+});
diff --git a/src/editor/check-box/index.ts b/src/editor/check-box/index.ts
new file mode 100644
index 000000000..a3e0b8d4a
--- /dev/null
+++ b/src/editor/check-box/index.ts
@@ -0,0 +1,3 @@
+export { IBizCheckbox } from './ibiz-checkbox/ibiz-checkbox';
+export * from './check-box-editor.controller';
+export * from './check-box-editor.provider';
diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
new file mode 100644
index 000000000..8413e6069
--- /dev/null
+++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.scss
@@ -0,0 +1,46 @@
+@include b('mpicker') {
+ @include set-component-css-var('mpicker', $mpicker);
+ @include flex;
+
+ input::placeholder {
+ color: getCssVar('mpicker', 'placeholder-color');
+ }
+
+ .el-input.is-disabled .el-input__inner {
+ color: getCssVar('mpicker', 'disabled-text-color');
+ background-color: getCssVar('mpicker', 'disabled-bg-color');
+ border-color: getCssVar('mpicker', 'disabled-border-color');
+ }
+
+ .el-select {
+ width: 100%;
+ }
+
+ ion-icon {
+ cursor: pointer;
+ }
+
+ @include e('buns-position') {
+ position: relative;
+ right: 11px;
+ display: inline-block;
+ }
+
+ @include e('btns') {
+ position: absolute;
+ right: 0;
+ height: getCssVar('mpicker', 'height');
+ color: getCssVar('mpicker', 'placeholder-color');
+ @include flex(row, center, center);
+ }
+
+ @include m(disabled) {
+ ion-icon{
+ pointer-events: none;
+ }
+ }
+
+ @include m(readonly) {
+ color: getCssVar('text-color', 'readonly');
+ }
+}
diff --git a/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.tsx b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.tsx
new file mode 100644
index 000000000..c64268087
--- /dev/null
+++ b/src/editor/data-picker/ibiz-mpicker/ibiz-mpicker.tsx
@@ -0,0 +1,221 @@
+import { ref, watch, Ref, defineComponent, computed } from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-mpicker.scss';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizMPicker = defineComponent({
+ name: 'IBizMPicker',
+ props: getDataPickerProps
+ {this.readonly && this.valueText}
+ {!this.readonly && (
+
+ {this.items.map((item, index) => {
+ return (
+
+ )}
+ {!this.readonly && (
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss
new file mode 100644
index 000000000..c9340bb06
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.scss
@@ -0,0 +1,27 @@
+@include b('picker-dropdown') {
+ @include set-component-css-var('picker-dropdown', $picker-dropdown);
+
+ .el-select {
+ width: 100%;
+ }
+
+ .el-input .el-input__inner {
+ font-size: getCssVar('picker-dropdown', 'font-size');
+ color: getCssVar('picker-dropdown', 'text-color');
+ border-color: getCssVar('picker-dropdown', 'border-color');
+ }
+
+ .el-input .el-input__inner::placeholder {
+ color: getCssVar('picker-dropdown', 'placeholder-color');
+ }
+
+ .el-input.is-disabled .el-input__inner {
+ color: getCssVar('picker-dropdown', 'disabled-text-color');
+ background-color: getCssVar('picker-dropdown', 'disabled-bg-color');
+ border-color: getCssVar('picker-dropdown', 'disabled-border-color');
+ }
+
+ @include m(readonly) {
+ color: getCssVar('text-color', 'readonly');
+ }
+}
diff --git a/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx
new file mode 100644
index 000000000..4de698eca
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-dropdown/ibiz-picker-dropdown.tsx
@@ -0,0 +1,195 @@
+import { ref, Ref, watch, defineComponent } from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { isNil } from 'ramda';
+import './ibiz-picker-dropdown.scss';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizPickerDropDown = defineComponent({
+ name: 'IBizPickerDropDown',
+ props: getDataPickerProps
+
+ )}
+
+ {this.c.pickupView ? (
+
+ {this.value}
+ );
+ }
+ return (
+
+ {this.readonly ? (
+ this.value
+ ) : (
+
+ {this.items.map((item, index) => {
+ return (
+
+ )}
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.scss b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.scss
new file mode 100644
index 000000000..1e11ef926
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.scss
@@ -0,0 +1,6 @@
+@include b(picker-embed-view) {
+ @include b(picker-embed-view-value) {
+ height: 32px;
+ line-height: 32px;
+ }
+}
diff --git a/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx
new file mode 100644
index 000000000..af2c0bb15
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-embed-view/ibiz-picker-embed-view.tsx
@@ -0,0 +1,105 @@
+import { defineComponent, ref, resolveComponent, watch, h } from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-picker-embed-view.scss';
+import { clone } from 'ramda';
+import { EventBase, ViewMode } from '@ibiz-template/runtime';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizPickerEmbedView = defineComponent({
+ name: 'IBizPickerEmbedView',
+ props: getDataPickerProps
+ {this.c.pickupView ? (
+ [
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.scss b/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.scss
new file mode 100644
index 000000000..b936a4344
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.scss
@@ -0,0 +1,11 @@
+@include b(picker-link) {
+ color: getCssVar('color', 'primary');
+ cursor: pointer;
+
+ @include m(disabled) {
+ cursor: not-allowed;
+ }
+ @include m(readonly) {
+ color: getCssVar('text-color', 'readonly');
+ }
+}
diff --git a/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.tsx b/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.tsx
new file mode 100644
index 000000000..b015134d4
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-link/ibiz-picker-link.tsx
@@ -0,0 +1,59 @@
+import { defineComponent, ref, Ref, watch } from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-picker-link.scss';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizPickerLink = defineComponent({
+ name: 'IBizPickerLink',
+ props: getDataPickerProps
+ {h(viewShell, {
+ context: this.context,
+ params: this.params,
+ modal: { mode: ViewMode.EMBED },
+ modelData: this.c.pickupView,
+ onSelectionChange: this.onSelectionChange,
+ })}
+
,
+
+ {this.$props.value ? (
+ this.$props.value.split(',').map(item => {
+ return {item}; ;
+ })
+ ) : (
+ {this.c.placeHolder}
+ )}
+
,
+ ]
+ ) : (
+ {this.c.placeHolder}
+ )}
+
+ {this.curValue}
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss
new file mode 100644
index 000000000..b503e4394
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.scss
@@ -0,0 +1,11 @@
+@include b(picker-select-view) {
+ width: 100%;
+
+ .el-dropdown {
+ width: 100%;
+ }
+
+ .el-select {
+ width: 100%;
+ }
+}
diff --git a/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
new file mode 100644
index 000000000..ad121378d
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker-select-view/ibiz-picker-select-view.tsx
@@ -0,0 +1,365 @@
+import {
+ defineComponent,
+ onMounted,
+ ref,
+ Ref,
+ resolveComponent,
+ watch,
+ h,
+} from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-picker-select-view.scss';
+import { clone } from 'ramda';
+import { EventBase, ViewMode } from '@ibiz-template/runtime';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizPickerSelectView = defineComponent({
+ name: 'IBizPickerSelectView',
+ props: getDataPickerProps
+
+ {{
+ default: () => {
+ return this.singleSelect ? (
+ {
+ this.triggerMenu(true);
+ }}
+ >
+ {{
+ suffix: () => {
+ return [
+ this.queryValue && !this.disabled && !this.readonly && (
+
+ ) : (
+ {
+ this.triggerMenu(true);
+ }}
+ disabled={this.disabled || this.readonly}
+ >
+ {this.items.map((item: IData, index: number) => {
+ return (
+
+ );
+ },
+ dropdown: () => {
+ const viewShell = resolveComponent('ViewShell');
+ return (
+
+ {h(viewShell, {
+ context: this.context,
+ params: this.params,
+ modal: { mode: ViewMode.EMBED },
+ modelData: this.c.pickupView,
+ style: { height: '100%', width: this.pickViewWidth },
+ onSelectionChange: this.onSelectionChange,
+ })}
+
+ );
+ },
+ }}
+
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.scss b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
new file mode 100644
index 000000000..738da3c9e
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.scss
@@ -0,0 +1,74 @@
+@include b('picker') {
+ @include set-component-css-var('picker', $picker);
+
+ .el-input .el-input__inner {
+ font-size: getCssVar('picker', 'font-size');
+ color: getCssVar('picker', 'text-color');
+ border-color: getCssVar('picker', 'border-color');
+ }
+
+ .el-input .el-input__inner::placeholder {
+ color: getCssVar('picker', 'placeholder-color');
+ }
+
+ .el-input.is-disabled .el-input__inner {
+ color: getCssVar('picker', 'disabled-text-color');
+ background-color: getCssVar('picker', 'disabled-bg-color');
+ border-color: getCssVar('picker', 'disabled-border-color');
+ }
+
+ ion-icon {
+ cursor: pointer;
+ }
+
+ @include e('buns-position') {
+ position: relative;
+ display: inline-block;
+ }
+
+ @include e('btns') {
+ position: absolute;
+ right: 0;
+ @include flex;
+
+ height: getCssVar('picker', 'height');
+
+ span {
+ @include flex($direction: column, $horizontal: center);
+ }
+ }
+
+ @include e('autocomplete') {
+ @include flex;
+
+ .el-autocomplete {
+ width: 100%;
+ }
+ }
+
+ @include e('transfer-item') {
+ padding: 5px;
+ cursor: pointer;
+
+ &:hover {
+ background-color: getCssVar('picker', 'hover-bg-color');
+ }
+ }
+
+ @include e('link') {
+ width: 32px;
+ height: 32px;
+ padding: 0 6px;
+ font-size: 16px;
+ }
+
+ @include m(disabled) {
+ ion-icon{
+ pointer-events: none;
+ }
+ }
+
+ @include m(readonly) {
+ color: getCssVar('text-color', 'readonly');
+ }
+}
diff --git a/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx
new file mode 100644
index 000000000..a5e5e0e6a
--- /dev/null
+++ b/src/editor/data-picker/ibiz-picker/ibiz-picker.tsx
@@ -0,0 +1,267 @@
+import { ref, watch, Ref, defineComponent, onMounted } from 'vue';
+import {
+ getDataPickerProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { isEmpty } from 'ramda';
+import './ibiz-picker.scss';
+import { PickerEditorController } from '../picker-editor.controller';
+
+export const IBizPicker = defineComponent({
+ name: 'IBizPicker',
+ props: getDataPickerProps{this.value}
+ );
+ }
+ return (
+
+ {this.c.noAC ? (
+
+ {{
+ suffix: () => {
+ if (this.$slots.append) {
+ return this.$slots.append({});
+ }
+ if (this.c.noButton) {
+ return;
+ }
+ return [
+ this.c.pickupView ? (
+
+ ) : (
+
+ );
+ },
+});
diff --git a/src/editor/data-picker/index.ts b/src/editor/data-picker/index.ts
new file mode 100644
index 000000000..aa9052629
--- /dev/null
+++ b/src/editor/data-picker/index.ts
@@ -0,0 +1,8 @@
+export { IBizPicker } from './ibiz-picker/ibiz-picker';
+export { IBizMPicker } from './ibiz-mpicker/ibiz-mpicker';
+export { IBizPickerDropDown } from './ibiz-picker-dropdown/ibiz-picker-dropdown';
+export { IBizPickerLink } from './ibiz-picker-link/ibiz-picker-link';
+export { IBizPickerEmbedView } from './ibiz-picker-embed-view/ibiz-picker-embed-view';
+export { IBizPickerSelectView } from './ibiz-picker-select-view/ibiz-picker-select-view';
+export * from './picker-editor.controller';
+export * from './picker-editor.provider';
diff --git a/src/editor/data-picker/picker-editor.controller.ts b/src/editor/data-picker/picker-editor.controller.ts
new file mode 100644
index 000000000..cdaa2b5fc
--- /dev/null
+++ b/src/editor/data-picker/picker-editor.controller.ts
@@ -0,0 +1,265 @@
+import { IHttpResponse, RuntimeModelError } from '@ibiz-template/core';
+import { EditorController, OpenAppViewCommand } from '@ibiz-template/runtime';
+import { IAppDataEntity, IAppView, IPicker } from '@ibiz/model-core';
+
+/**
+ * 数据选择编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class PickerEditorController extends EditorController
+
+ {{
+ default: ({ item }: { item: IData }) => {
+ if (this.$slots.append) {
+ return this.$slots.append({});
+ }
+ return (
+
+
+ )}
+ {
+ this.onACSelect(item);
+ }}
+ >
+ {item[this.c.textName]}
+
+ );
+ },
+ suffix: () => {
+ if (this.c.noButton) {
+ return;
+ }
+ return [
+ this.c.pickupView ? (
+
+ {this.readonly ? (
+ this.formatValue
+ ) : this.isTimePicker ? (
+
+ );
+ },
+});
diff --git a/src/editor/date-picker/ibiz-grid-date-picker/ibiz-grid-date-picker.tsx b/src/editor/date-picker/ibiz-grid-date-picker/ibiz-grid-date-picker.tsx
new file mode 100644
index 000000000..707c356a2
--- /dev/null
+++ b/src/editor/date-picker/ibiz-grid-date-picker/ibiz-grid-date-picker.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, h, resolveComponent } from 'vue';
+import {
+ getGridDatePickerProps,
+ getGridEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { DatePickerEditorController } from '../date-picker-editor.controller';
+
+export const IBizGridDatePicker = defineComponent({
+ name: 'IBizGridDatePicker',
+ props: getGridDatePickerProps
+ {h(resolveComponent('IBizDatePicker'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/date-picker/index.ts b/src/editor/date-picker/index.ts
new file mode 100644
index 000000000..c66815835
--- /dev/null
+++ b/src/editor/date-picker/index.ts
@@ -0,0 +1,4 @@
+export { IBizDatePicker } from './ibiz-date-picker/ibiz-date-picker';
+export { IBizGridDatePicker } from './ibiz-grid-date-picker/ibiz-grid-date-picker';
+export * from './date-picker-editor.controller';
+export * from './date-picker-editor.provider';
diff --git a/src/editor/dropdown-list/dropdown-list-editor.controller.ts b/src/editor/dropdown-list/dropdown-list-editor.controller.ts
new file mode 100644
index 000000000..67bf6d7aa
--- /dev/null
+++ b/src/editor/dropdown-list/dropdown-list-editor.controller.ts
@@ -0,0 +1,33 @@
+import { CodeListEditorController } from '@ibiz-template/runtime';
+import { IDropDownList } from '@ibiz/model-core';
+
+/**
+ * 下拉列表框编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class DropDownListEditorController extends CodeListEditorController
+ {this.readonly ? this.valueText : editContent}
+
+ );
+ },
+});
diff --git a/src/editor/dropdown-list/ibiz-grid-dropdown/ibiz-grid-dropdown.tsx b/src/editor/dropdown-list/ibiz-grid-dropdown/ibiz-grid-dropdown.tsx
new file mode 100644
index 000000000..eb6b61e2a
--- /dev/null
+++ b/src/editor/dropdown-list/ibiz-grid-dropdown/ibiz-grid-dropdown.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, h, resolveComponent } from 'vue';
+import {
+ getGridDropdownProps,
+ getGridEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { DropDownListEditorController } from '../dropdown-list-editor.controller';
+
+export const IBizGridDropdown = defineComponent({
+ name: 'IBizGridDropdown',
+ props: getGridDropdownProps
+ {h(resolveComponent('IBizDropdown'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/dropdown-list/index.ts b/src/editor/dropdown-list/index.ts
new file mode 100644
index 000000000..9229b9c62
--- /dev/null
+++ b/src/editor/dropdown-list/index.ts
@@ -0,0 +1,4 @@
+export { IBizDropdown } from './ibiz-dropdown/ibiz-dropdown';
+export { IBizGridDropdown } from './ibiz-grid-dropdown/ibiz-grid-dropdown';
+export * from './dropdown-list-editor.controller';
+export * from './dropdown-list-editor.provider';
diff --git a/src/editor/index.ts b/src/editor/index.ts
index fe25d5f90..6503166dc 100644
--- a/src/editor/index.ts
+++ b/src/editor/index.ts
@@ -1,25 +1,242 @@
import { registerEditorProvider } from '@ibiz-template/runtime';
import { App } from 'vue';
-import { IBizSpan } from './span';
-import { SpanEditorProvider } from './span/span-editor.provider';
-import { IBizInput } from './text-box';
-import { TextBoxEditorProvider } from './text-box/text-box-editor.provider';
-
-export * from './span';
-export * from './text-box';
+import { NotSupportedEditor } from './not-supported-editor/not-supported-editor';
+import { IBizSpan, IBizSpanLink, SpanEditorProvider } from './span';
+import {
+ IBizInput,
+ IBizInputNumber,
+ IBizInputIP,
+ IBizGridInput,
+ IBizGridInputNumber,
+ TextBoxEditorProvider,
+} from './text-box';
+import {
+ IBizDropdown,
+ IBizGridDropdown,
+ DropDownListEditorProvider,
+} from './dropdown-list';
+import { IBizCheckbox, CheckBoxEditorProvider } from './check-box';
+import {
+ IBizCheckboxList,
+ IBizGridCheckboxList,
+ CheckBoxListEditorProvider,
+} from './check-box-list';
+import {
+ IBizRadio,
+ IBizGridRadio,
+ RadioButtonListEditorProvider,
+} from './radio-button-list';
+import {
+ IBizDatePicker,
+ IBizGridDatePicker,
+ DatePickerEditorProvider,
+} from './date-picker';
+import { IBizRaw, RawEditorProvider } from './raw';
+import { IBizStepper, StepperEditorProvider } from './stepper';
+import { IBizRate, RateEditorProvider } from './rate';
+import { IBizSwitch, SwitchEditorProvider } from './switch';
+import { IBizSlider, SliderEditorProvider } from './slider';
+import { IBizListBox, ListBoxEditorProvider } from './list-box';
+import { IBizAutoComplete, AutoCompleteEditorProvider } from './autocomplete';
+import {
+ IBizFileUpload,
+ IBizImageSelect,
+ IBizImageUpload,
+ FileUploaderEditorProvider,
+} from './upload';
+import {
+ IBizPicker,
+ IBizMPicker,
+ IBizPickerDropDown,
+ IBizPickerLink,
+ IBizPickerEmbedView,
+ IBizPickerSelectView,
+ DataPickerEditorProvider,
+} from './data-picker';
export const IBizEditor = {
install: (v: App) => {
- v.component(IBizInput.name, IBizInput);
+ // 组件注册
+ v.component(NotSupportedEditor.name, NotSupportedEditor);
v.component(IBizSpan.name, IBizSpan);
- const textBoxEditorProvider = new TextBoxEditorProvider();
- registerEditorProvider('TEXTBOX', () => textBoxEditorProvider);
+ v.component(IBizSpanLink.name, IBizSpanLink);
+ v.component(IBizInput.name, IBizInput);
+ v.component(IBizInputNumber.name, IBizInputNumber);
+ v.component(IBizInputIP.name, IBizInputIP);
+ v.component(IBizGridInput.name, IBizGridInput);
+ v.component(IBizGridInputNumber.name, IBizGridInputNumber);
+ v.component(IBizDropdown.name, IBizDropdown);
+ v.component(IBizGridDropdown.name, IBizGridDropdown);
+ v.component(IBizCheckbox.name, IBizCheckbox);
+ v.component(IBizCheckboxList.name, IBizCheckboxList);
+ v.component(IBizGridCheckboxList.name, IBizGridCheckboxList);
+ v.component(IBizRadio.name, IBizRadio);
+ v.component(IBizGridRadio.name, IBizGridRadio);
+ v.component(IBizDatePicker.name, IBizDatePicker);
+ v.component(IBizGridDatePicker.name, IBizGridDatePicker);
+ v.component(IBizRaw.name, IBizRaw);
+ v.component(IBizStepper.name, IBizStepper);
+ v.component(IBizRate.name, IBizRate);
+ v.component(IBizSwitch.name, IBizSwitch);
+ v.component(IBizSlider.name, IBizSlider);
+ v.component(IBizListBox.name, IBizListBox);
+ v.component(IBizAutoComplete.name, IBizAutoComplete);
+ v.component(IBizFileUpload.name, IBizFileUpload);
+ v.component(IBizImageSelect.name, IBizImageSelect);
+ v.component(IBizImageUpload.name, IBizImageUpload);
+ v.component(IBizPicker.name, IBizPicker);
+ v.component(IBizMPicker.name, IBizMPicker);
+ v.component(IBizPickerDropDown.name, IBizPickerDropDown);
+ v.component(IBizPickerLink.name, IBizPickerLink);
+ v.component(IBizPickerEmbedView.name, IBizPickerEmbedView);
+ v.component(IBizPickerSelectView.name, IBizPickerSelectView);
+
// 标签
registerEditorProvider('SPAN', () => new SpanEditorProvider());
registerEditorProvider(
'SPAN_LINK',
() => new SpanEditorProvider('SPAN_LINK'),
);
+ // 文本框
+ const textBoxEditorProvider = new TextBoxEditorProvider();
+ registerEditorProvider('TEXTBOX', () => textBoxEditorProvider);
+ registerEditorProvider('TEXTAREA', () => textBoxEditorProvider);
+ registerEditorProvider('TEXTAREA_10', () => textBoxEditorProvider);
+ registerEditorProvider('PASSWORD', () => textBoxEditorProvider);
+ registerEditorProvider('NUMBER', () => new TextBoxEditorProvider('NUMBER'));
+ registerEditorProvider(
+ 'IPADDRESSTEXTBOX',
+ () => new TextBoxEditorProvider('IPADDRESSTEXTBOX'),
+ );
+ // 下拉列表框
+ registerEditorProvider(
+ 'DROPDOWNLIST',
+ () => new DropDownListEditorProvider(),
+ );
+ registerEditorProvider(
+ 'MDROPDOWNLIST',
+ () => new DropDownListEditorProvider(),
+ );
+ // 复选框
+ registerEditorProvider('CHECKBOX', () => new CheckBoxEditorProvider());
+ // 复选框列表
+ registerEditorProvider(
+ 'CHECKBOXLIST',
+ () => new CheckBoxListEditorProvider(),
+ );
+ // 单选框列表
+ registerEditorProvider(
+ 'RADIOBUTTONLIST',
+ () => new RadioButtonListEditorProvider(),
+ );
+
+ // 日期选择器
+ const datePickerProvider = new DatePickerEditorProvider();
+ registerEditorProvider('DATEPICKER', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX_NOTIME', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX_HOUR', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX_MINUTE', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX_SECOND', () => datePickerProvider);
+ registerEditorProvider('DATEPICKEREX_NODAY', () => datePickerProvider);
+ registerEditorProvider(
+ 'DATEPICKEREX_NODAY_NOSECOND',
+ () => datePickerProvider,
+ );
+ // 文件上传
+ registerEditorProvider(
+ 'FILEUPLOADER',
+ () => new FileUploaderEditorProvider('FILEUPLOADER'),
+ );
+ registerEditorProvider(
+ 'FILEUPLOADER_ONE',
+ () => new FileUploaderEditorProvider('FILEUPLOADER_ONE'),
+ );
+ // 图片上传
+ registerEditorProvider(
+ 'PICTURE',
+ () => new FileUploaderEditorProvider('PICTURE'),
+ );
+ registerEditorProvider(
+ 'PICTURE_ONE',
+ () => new FileUploaderEditorProvider('PICTURE_ONE'),
+ );
+ registerEditorProvider(
+ 'PICTURE_ONE_RAW',
+ () => new FileUploaderEditorProvider('PICTURE_ONE_RAW'),
+ );
+ // 直接内容
+ registerEditorProvider('RAW', () => new RawEditorProvider());
+ // 步进器
+ registerEditorProvider('STEPPER', () => new StepperEditorProvider());
+ // 评分器
+ registerEditorProvider('RATING', () => new RateEditorProvider());
+ // 滑动输入条
+ registerEditorProvider('SLIDER', () => new SliderEditorProvider());
+ // 开关
+ registerEditorProvider('SWITCH', () => new SwitchEditorProvider());
+ // 列表框
+ registerEditorProvider('LISTBOX', () => new ListBoxEditorProvider());
+ registerEditorProvider('LISTBOXPICKUP', () => new ListBoxEditorProvider());
+ // 自动完成
+ const AutoCompleteProvider = new AutoCompleteEditorProvider();
+ registerEditorProvider('AC', () => AutoCompleteProvider);
+ registerEditorProvider('AC_FS', () => AutoCompleteProvider);
+ registerEditorProvider('AC_NOBUTTON', () => AutoCompleteProvider);
+ registerEditorProvider('AC_FS_NOBUTTON', () => AutoCompleteProvider);
+ // 数据选择类
+ registerEditorProvider(
+ 'PICKER',
+ () => new DataPickerEditorProvider('PICKER'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_NOAC',
+ () => new DataPickerEditorProvider('PICKEREX_NOAC'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_NOAC_LINK',
+ () => new DataPickerEditorProvider('PICKEREX_NOAC_LINK'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_TRIGGER_LINK',
+ () => new DataPickerEditorProvider('PICKEREX_TRIGGER_LINK'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_TRIGGER',
+ () => new DataPickerEditorProvider('PICKEREX_TRIGGER'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_LINK',
+ () => new DataPickerEditorProvider('PICKEREX_LINK'),
+ );
+ registerEditorProvider(
+ 'ADDRESSPICKUP',
+ () => new DataPickerEditorProvider('ADDRESSPICKUP'),
+ );
+ registerEditorProvider(
+ 'ADDRESSPICKUP_AC',
+ () => new DataPickerEditorProvider('ADDRESSPICKUP_AC'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_LINKONLY',
+ () => new DataPickerEditorProvider('PICKEREX_LINKONLY'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_NOBUTTON',
+ () => new DataPickerEditorProvider('PICKEREX_NOBUTTON'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_DROPDOWNVIEW',
+ () => new DataPickerEditorProvider('PICKEREX_DROPDOWNVIEW'),
+ );
+ registerEditorProvider(
+ 'PICKEREX_DROPDOWNVIEW_LINK',
+ () => new DataPickerEditorProvider('PICKEREX_DROPDOWNVIEW_LINK'),
+ );
+ registerEditorProvider(
+ 'PICKUPVIEW',
+ () => new DataPickerEditorProvider('PICKUPVIEW'),
+ );
},
};
diff --git a/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss b/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss
new file mode 100644
index 000000000..050f0af53
--- /dev/null
+++ b/src/editor/list-box/ibiz-list-box/ibiz-list-box.scss
@@ -0,0 +1,9 @@
+@include b(list-box) {
+ @include b(list-box-radio) {
+ @include flex(column, flex-start, flex-start);
+ }
+
+ @include b(list-box-checkbox) {
+ @include flex(column, flex-start, flex-start);
+ }
+}
diff --git a/src/editor/list-box/ibiz-list-box/ibiz-list-box.tsx b/src/editor/list-box/ibiz-list-box/ibiz-list-box.tsx
new file mode 100644
index 000000000..c8de0ab35
--- /dev/null
+++ b/src/editor/list-box/ibiz-list-box/ibiz-list-box.tsx
@@ -0,0 +1,200 @@
+import { computed, defineComponent, Ref, ref, watch } from 'vue';
+import {
+ getListBoxProps,
+ getEditorEmits,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { isNil } from 'ramda';
+import './ibiz-list-box.scss';
+import { ListBoxEditorController } from '../list-box-editor.controller';
+import { ListBoxPickerEditorController } from '../list-box-picker-editor.controller';
+
+export const IBizListBox = defineComponent({
+ name: 'IBizListBox',
+ props: getListBoxProps<
+ ListBoxEditorController | ListBoxPickerEditorController
+ >(),
+ emits: getEditorEmits(),
+ setup(props, { emit }) {
+ const ns = useNamespace('list-box');
+
+ const c = props.controller;
+
+ const editorModel = c.model;
+
+ let multiple: boolean = false;
+ if (editorModel.editorParams) {
+ if (editorModel.editorParams.multiple) {
+ multiple = c.handleStringToBoolean(editorModel.editorParams.multiple);
+ }
+ }
+
+ const codeList = (c as ListBoxEditorController).codeList;
+
+ const editorType = editorModel.editorType;
+
+ // 代码表数据（LISTBOX） or AC请求数据（LISTBOXPICKUP）
+ const items = ref
+ {this.multiple ? (
+
+ {this.items.map((item, index: number) => (
+
+ {item.text}
+
+ ))}
+
+ ) : (
+
+ {this.items.map((item, index: number) => (
+ {
+ this.onSelectArrayChange(item.value);
+ }}
+ >
+ {item.text}
+
+ ))}
+
+ )}
+
+ );
+ },
+});
diff --git a/src/editor/list-box/index.ts b/src/editor/list-box/index.ts
new file mode 100644
index 000000000..edb6044e7
--- /dev/null
+++ b/src/editor/list-box/index.ts
@@ -0,0 +1,4 @@
+export { IBizListBox } from './ibiz-list-box/ibiz-list-box';
+export * from './list-box-editor.controller';
+export * from './list-box-picker-editor.controller';
+export * from './list-box-editor.provider';
diff --git a/src/editor/list-box/list-box-editor.controller.ts b/src/editor/list-box/list-box-editor.controller.ts
new file mode 100644
index 000000000..879e587c8
--- /dev/null
+++ b/src/editor/list-box/list-box-editor.controller.ts
@@ -0,0 +1,26 @@
+import { CodeListEditorController } from '@ibiz-template/runtime';
+import { IAppCodeList, IListBox } from '@ibiz/model-core';
+
+/**
+ * 列表框编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class ListBoxEditorController extends CodeListEditorController
+ 未支持的编辑器类型 - {this.modelData.editorType}
+
+ );
+ },
+});
diff --git a/src/editor/radio-button-list/ibiz-grid-radio/ibiz-grid-radio.tsx b/src/editor/radio-button-list/ibiz-grid-radio/ibiz-grid-radio.tsx
new file mode 100644
index 000000000..75ef24a2b
--- /dev/null
+++ b/src/editor/radio-button-list/ibiz-grid-radio/ibiz-grid-radio.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, h, resolveComponent } from 'vue';
+import {
+ getGridEditorEmits,
+ getGridRadioProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { RadioButtonListEditorController } from '../radio-button-list.controller';
+
+export const IBizGridRadio = defineComponent({
+ name: 'IBizGridRadio',
+ props: getGridRadioProps
+ {h(resolveComponent('IBizRadio'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
new file mode 100644
index 000000000..2035f164f
--- /dev/null
+++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.scss
@@ -0,0 +1,12 @@
+@include b('radio') {
+ @include set-component-css-var('radio', $radio);
+
+ @include e('text') {
+ font-size: getCssVar('radio', 'font-size');
+ color: getCssVar('radio', 'text-color');
+ }
+
+ @include m(readonly){
+ color: getCssVar('text-color', 'readonly')
+ }
+}
diff --git a/src/editor/radio-button-list/ibiz-radio/ibiz-radio.tsx b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.tsx
new file mode 100644
index 000000000..e05e059d4
--- /dev/null
+++ b/src/editor/radio-button-list/ibiz-radio/ibiz-radio.tsx
@@ -0,0 +1,83 @@
+import { computed, defineComponent, ref, watch } from 'vue';
+import {
+ getEditorEmits,
+ getRadioProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-radio.scss';
+import { RadioButtonListEditorController } from '../radio-button-list.controller';
+
+export const IBizRadio = defineComponent({
+ name: 'IBizRadio',
+ props: getRadioProps
+ {this.readonly ? (
+ this.valueText
+ ) : (
+
+ {this.items.map((_item, index: number) => (
+
+ {_item.text}
+
+ ))}
+
+ )}
+
+ );
+ },
+});
diff --git a/src/editor/radio-button-list/index.ts b/src/editor/radio-button-list/index.ts
new file mode 100644
index 000000000..03f19f896
--- /dev/null
+++ b/src/editor/radio-button-list/index.ts
@@ -0,0 +1,4 @@
+export { IBizRadio } from './ibiz-radio/ibiz-radio';
+export { IBizGridRadio } from './ibiz-grid-radio/ibiz-grid-radio';
+export * from './radio-button-list.controller';
+export * from './radio-button-list.provider';
diff --git a/src/editor/radio-button-list/radio-button-list.controller.ts b/src/editor/radio-button-list/radio-button-list.controller.ts
new file mode 100644
index 000000000..40c82f559
--- /dev/null
+++ b/src/editor/radio-button-list/radio-button-list.controller.ts
@@ -0,0 +1,10 @@
+import { CodeListEditorController } from '@ibiz-template/runtime';
+import { IRadioButtonList } from '@ibiz/model-core';
+
+/**
+ * 单选项列表编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class RadioButtonListEditorController extends CodeListEditorController
+
+ );
+ },
+});
diff --git a/src/editor/rate/index.ts b/src/editor/rate/index.ts
new file mode 100644
index 000000000..ba6924383
--- /dev/null
+++ b/src/editor/rate/index.ts
@@ -0,0 +1,3 @@
+export { IBizRate } from './ibiz-rate/ibiz-rate';
+export * from './rate-editor.controller';
+export * from './rate-editor.provider';
diff --git a/src/editor/rate/rate-editor.controller.ts b/src/editor/rate/rate-editor.controller.ts
new file mode 100644
index 000000000..6bb6b5d30
--- /dev/null
+++ b/src/editor/rate/rate-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { IRating } from '@ibiz/model-core';
+
+/**
+ * 评分器编辑器控制器
+ *
+ * @export
+ * @class RateEditorController
+ * @extends {EditorController}
+ */
+export class RateEditorController extends EditorController
+
+ );
+ },
+});
diff --git a/src/editor/raw/index.ts b/src/editor/raw/index.ts
new file mode 100644
index 000000000..ea5184105
--- /dev/null
+++ b/src/editor/raw/index.ts
@@ -0,0 +1,3 @@
+export { IBizRaw } from './ibiz-raw/ibiz-raw';
+export * from './raw-editor.controller';
+export * from './raw-editor.provider';
diff --git a/src/editor/raw/raw-editor.controller.ts b/src/editor/raw/raw-editor.controller.ts
new file mode 100644
index 000000000..5950671a3
--- /dev/null
+++ b/src/editor/raw/raw-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { IRaw } from '@ibiz/model-core';
+
+/**
+ * 直接内容编辑器控制器
+ *
+ * @export
+ * @class RawEditorController
+ * @extends {EditorController}
+ */
+export class RawEditorController extends EditorController
+
+ );
+ },
+});
diff --git a/src/editor/slider/index.ts b/src/editor/slider/index.ts
new file mode 100644
index 000000000..3b51bef23
--- /dev/null
+++ b/src/editor/slider/index.ts
@@ -0,0 +1,3 @@
+export { IBizSlider } from './ibiz-slider/ibiz-slider';
+export * from './slider-editor.controller';
+export * from './slider-editor.provider';
diff --git a/src/editor/slider/slider-editor.controller.ts b/src/editor/slider/slider-editor.controller.ts
new file mode 100644
index 000000000..ec968297e
--- /dev/null
+++ b/src/editor/slider/slider-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { ISlider } from '@ibiz/model-core';
+
+/**
+ * 滑动输入条编辑器控制器
+ *
+ * @export
+ * @class SliderEditorController
+ * @extends {EditorController}
+ */
+export class SliderEditorController extends EditorController
+ {content}
+
+ );
+ },
+});
diff --git a/src/editor/stepper/index.ts b/src/editor/stepper/index.ts
new file mode 100644
index 000000000..a6574da62
--- /dev/null
+++ b/src/editor/stepper/index.ts
@@ -0,0 +1,3 @@
+export { IBizStepper } from './ibiz-stepper/ibiz-stepper';
+export * from './stepper-editor.controller';
+export * from './stepper-editor.provider';
diff --git a/src/editor/stepper/stepper-editor.controller.ts b/src/editor/stepper/stepper-editor.controller.ts
new file mode 100644
index 000000000..4ca70e331
--- /dev/null
+++ b/src/editor/stepper/stepper-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { IStepper } from '@ibiz/model-core';
+
+/**
+ * 步进器编辑器控制器
+ *
+ * @export
+ * @class StepperEditorController
+ * @extends {EditorController}
+ */
+export class StepperEditorController extends EditorController
+
+ );
+ },
+});
diff --git a/src/editor/switch/index.ts b/src/editor/switch/index.ts
new file mode 100644
index 000000000..bd4b19602
--- /dev/null
+++ b/src/editor/switch/index.ts
@@ -0,0 +1,3 @@
+export { IBizSwitch } from './ibiz-switch/ibiz-switch';
+export * from './switch-editor.controller';
+export * from './switch-editor.provider';
diff --git a/src/editor/switch/switch-editor.controller.ts b/src/editor/switch/switch-editor.controller.ts
new file mode 100644
index 000000000..bf792746b
--- /dev/null
+++ b/src/editor/switch/switch-editor.controller.ts
@@ -0,0 +1,11 @@
+import { EditorController } from '@ibiz-template/runtime';
+import { ICheckBox } from '@ibiz/model-core';
+
+/**
+ * 开关编辑器控制器
+ *
+ * @export
+ * @class SwitchEditorController
+ * @extends {EditorController}
+ */
+export class SwitchEditorController extends EditorController
+ {h(resolveComponent('IBizInputNumber'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/text-box/ibiz-grid-input/ibiz-grid-input.tsx b/src/editor/text-box/ibiz-grid-input/ibiz-grid-input.tsx
new file mode 100644
index 000000000..ba3b834d5
--- /dev/null
+++ b/src/editor/text-box/ibiz-grid-input/ibiz-grid-input.tsx
@@ -0,0 +1,29 @@
+import { defineComponent, h, resolveComponent } from 'vue';
+import {
+ getGridEditorEmits,
+ getGridInputProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import { TextBoxEditorController } from '../text-box-editor.controller';
+
+export const IBizGridInput = defineComponent({
+ name: 'IBizGridInput',
+ props: getGridInputProps
+ {h(resolveComponent('IBizInput'), {
+ ...this.$props,
+ })}
+
+ );
+ },
+});
diff --git a/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.scss b/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.scss
new file mode 100644
index 000000000..952d99cf6
--- /dev/null
+++ b/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.scss
@@ -0,0 +1,9 @@
+@include b(input-ip) {
+ @include flex;
+
+ flex-wrap: nowrap;
+
+ .el-input {
+ margin: 0 3px;
+ }
+}
diff --git a/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.tsx b/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.tsx
new file mode 100644
index 000000000..c2f3d799f
--- /dev/null
+++ b/src/editor/text-box/ibiz-input-ip/ibiz-input-ip.tsx
@@ -0,0 +1,168 @@
+/* eslint-disable no-param-reassign */
+import { defineComponent, Ref, ref, watch } from 'vue';
+import {
+ getEditorEmits,
+ getInputIpProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-input-ip.scss';
+import { TextBoxEditorController } from '../text-box-editor.controller';
+
+export const IBizInputIP = defineComponent({
+ name: 'IBizInputIP',
+ props: getInputIpProps
+
+ );
+ },
+});
diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss
new file mode 100644
index 000000000..1400644af
--- /dev/null
+++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.scss
@@ -0,0 +1,34 @@
+@include b('input-number') {
+ @include set-component-css-var('input-number', $input-number);
+
+ // 常规样式
+ .el-input .el-input__inner {
+ font-size: getCssVar('input-number', 'font-size');
+ color: getCssVar('input-number', 'text-color');
+ border-color: getCssVar('input-number', 'border-color');
+ }
+
+ .el-input .el-input__inner::placeholder {
+ color: getCssVar('input-number', 'placeholder-color');
+ }
+
+ // 禁用样式
+ .el-input.is-disabled .el-input__inner {
+ color: getCssVar('input-number', 'disabled-text-color');
+ background-color: getCssVar('input-number', 'disabled-bg-color');
+ border-color: getCssVar('input-number', 'disabled-border-color');
+ }
+
+ // 只读模式显示
+ @include m(readonly) {
+ color: getCssVar('text-color', 'readonly');
+ @include overflow-wrap;
+ }
+
+ // 单位后缀样式
+ .#{bem('input-number','unit')} {
+ margin-left: 10px;
+ font-size: getCssVar('input-number', 'font-size');
+ font-style: normal;
+ }
+}
diff --git a/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx
new file mode 100644
index 000000000..415977370
--- /dev/null
+++ b/src/editor/text-box/ibiz-input-number/ibiz-input-number.tsx
@@ -0,0 +1,93 @@
+import { defineComponent, ref, watch } from 'vue';
+import {
+ getEditorEmits,
+ getInputNumberProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-input-number.scss';
+import { TextBoxEditorController } from '../text-box-editor.controller';
+
+export const IBizInputNumber = defineComponent({
+ name: 'IBizInputNumber',
+ props: getInputNumberProps
+ {content}
+
+ );
+ },
+});
diff --git a/src/editor/text-box/index.ts b/src/editor/text-box/index.ts
index 540f5503d..ab9b972ce 100644
--- a/src/editor/text-box/index.ts
+++ b/src/editor/text-box/index.ts
@@ -1,3 +1,7 @@
export { IBizInput } from './input/input';
+export { IBizInputNumber } from './ibiz-input-number/ibiz-input-number';
+export { IBizInputIP } from './ibiz-input-ip/ibiz-input-ip';
+export { IBizGridInput } from './ibiz-grid-input/ibiz-grid-input';
+export { IBizGridInputNumber } from './ibiz-grid-input-number/ibiz-grid-input-number';
export * from './text-box-editor.controller';
export * from './text-box-editor.provider';
diff --git a/src/editor/text-box/input/input.tsx b/src/editor/text-box/input/input.tsx
index 3f4326315..172d4eb3c 100644
--- a/src/editor/text-box/input/input.tsx
+++ b/src/editor/text-box/input/input.tsx
@@ -6,10 +6,11 @@ import {
useNamespace,
} from '@ibiz-template/vue3-util';
import './input.scss';
+import { TextBoxEditorController } from '../text-box-editor.controller';
export const IBizInput = defineComponent({
name: 'IBizInput',
- props: getInputProps
+
+ 上传文件
+
+
+ );
+ },
+});
diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.scss b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
new file mode 100644
index 000000000..1c9c0b58a
--- /dev/null
+++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.scss
@@ -0,0 +1,62 @@
+@include b('image-select') {
+ @include set-component-css-var('image-select', $image-select);
+
+ .el-upload--picture-card {
+ width: getCssVar('image-select', 'box-width');
+ height: getCssVar('image-select', 'box-height');
+ }
+
+ .el-upload-list__item {
+ &:hover {
+ .#{bem(image-select-content-action)} {
+ display: block;
+ }
+ }
+ }
+
+ .el-upload-list__item,
+ .#{bem(image-select-content-svg)} {
+ position: relative;
+ width: getCssVar('image-select', 'box-width');
+ height: getCssVar('image-select', 'box-height');
+ line-height: getCssVar('image-select', 'box-height');
+ text-align: center;
+ background: getCssVar('image-select', 'list-item-bg-color');
+ box-shadow: getCssVar('image-select', 'list-item-box-shadow');
+
+ img,
+ svg {
+ width: 100%;
+ height: 100%;
+ vertical-align: top;
+ }
+ }
+
+ .#{bem(image-select-content-action)} {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: none;
+ background: getCssVar('image-select', 'list-item-cover-bg-color');
+
+ ion-icon {
+ margin: getCssVar('image-select', 'list-item-cover-i-margin');
+ font-size: getCssVar('image-select', 'list-item-cover-i-size');
+ color: getCssVar('image-select', 'list-item-cover-i-color');
+ cursor: pointer;
+ }
+ }
+}
+
+@include b(image-select-modal) {
+ .#{bem(image-select-modal-img)},
+ .#{bem(image-select-modal-svg)} {
+ width: 100%;
+
+ img {
+ width: 100%;
+ }
+ }
+}
diff --git a/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx b/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx
new file mode 100644
index 000000000..2a19781ce
--- /dev/null
+++ b/src/editor/upload/ibiz-image-select/ibiz-image-select.tsx
@@ -0,0 +1,155 @@
+/* eslint-disable no-param-reassign */
+import { defineComponent, Ref, ref, watch } from 'vue';
+import {
+ getEditorEmits,
+ getUploadProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-image-select.scss';
+import { UploadEditorController } from '../upload-editor.controller';
+
+export const IBizImageSelect = defineComponent({
+ name: 'IBizImageSelect',
+ props: getUploadProps
+
+ {{
+ default: () => {
+ return
+
+ {this.svg ? (
+
+ ) : (
+
+
+ );
+ },
+});
diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
new file mode 100644
index 000000000..2278ad365
--- /dev/null
+++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.scss
@@ -0,0 +1,91 @@
+@include b('image-upload') {
+ @include set-component-css-var('image-upload', $image-upload);
+
+ display: flex;
+ align-items: center;
+
+ .el-upload--picture-card {
+ width: getCssVar('image-upload', 'box-width');
+ height: getCssVar('image-upload', 'box-height');
+ }
+
+ @include e('btn') {
+ width: getCssVar('image-upload', 'box-width');
+ height: getCssVar('image-upload', 'box-height');
+ line-height: getCssVar('image-upload', 'box-height');
+ }
+
+ @include e('list-item') {
+ position: relative;
+ display: inline-block;
+ width: getCssVar('image-upload', 'box-width');
+ height: getCssVar('image-upload', 'box-height');
+ margin-right: getCssVar('image-upload', 'list-item-margin');
+ line-height: getCssVar('image-upload', 'box-height');
+ text-align: center;
+ background: getCssVar('image-upload', 'list-item-bg-color');
+ border: getCssVar('image-upload', 'list-item-border');
+ border-radius: getCssVar('image-upload', 'list-item-border-radius');
+ box-shadow: getCssVar('image-upload', 'list-item-box-shadow');
+
+ img {
+ width: 100%;
+ height: 100%;
+ vertical-align: top;
+ }
+
+ &:hover {
+ @include e('list-item-cover') {
+ display: block;
+ }
+ }
+ }
+
+ @include e('list-item-cover') {
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ display: none;
+ background: getCssVar('image-upload', 'list-item-cover-bg-color');
+
+ ion-icon {
+ margin: getCssVar('image-upload', 'list-item-cover-i-margin');
+ font-size: getCssVar('image-upload', 'list-item-cover-i-size');
+ color: getCssVar('image-upload', 'list-item-cover-i-color');
+ cursor: pointer;
+ }
+
+ img {
+ width: 100%;
+ height: 100%;
+ vertical-align: top;
+ }
+ }
+
+ // 禁用态样式
+ @include m('disabled') {
+
+ @include e('download-icon') {
+ display: none;
+ }
+ @include e('remove-icon') {
+ display: none;
+ }
+ }
+
+ // 只读态样式
+ @include m('readonly') {
+
+ @include e('remove-icon') {
+ display: none;
+ }
+ }
+}
+
+@include b('image-upload-modal') {
+ @include e('img') {
+ width: 100%;
+ }
+}
diff --git a/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx
new file mode 100644
index 000000000..6a80cee56
--- /dev/null
+++ b/src/editor/upload/ibiz-image-upload/ibiz-image-upload.tsx
@@ -0,0 +1,134 @@
+/* eslint-disable no-param-reassign */
+import { defineComponent, ref } from 'vue';
+import {
+ getEditorEmits,
+ getUploadProps,
+ useNamespace,
+} from '@ibiz-template/vue3-util';
+import './ibiz-image-upload.scss';
+import { useIViewUpload } from '../use/use-iview-upload';
+import { UploadEditorController } from '../upload-editor.controller';
+
+export const IBizImageUpload = defineComponent({
+ name: 'IBizImageUpload',
+ props: getUploadProps
+ 
+
+ ),
+
+ this.handlePictureCardPreview()}
+ name='search'
+ >
+ this.removeFile()}
+ name='remove'
+ >
+
,
+ ];
+ },
+ }}
+
+
+
+ )}
+
+
+
+ this.onDialogVisibleChange(true)}
+ onClose={() => this.onDialogVisibleChange(false)}
+ >
+
+
+
+ );
+ },
+});
diff --git a/src/editor/upload/index.ts b/src/editor/upload/index.ts
new file mode 100644
index 000000000..5b222f902
--- /dev/null
+++ b/src/editor/upload/index.ts
@@ -0,0 +1,5 @@
+export { IBizFileUpload } from './ibiz-file-upload/ibiz-file-upload';
+export { IBizImageUpload } from './ibiz-image-upload/ibiz-image-upload';
+export { IBizImageSelect } from './ibiz-image-select/ibiz-image-select';
+export * from './upload-editor.controller';
+export * from './upload-editor.provider';
diff --git a/src/editor/upload/upload-editor.controller.ts b/src/editor/upload/upload-editor.controller.ts
new file mode 100644
index 000000000..8098ef292
--- /dev/null
+++ b/src/editor/upload/upload-editor.controller.ts
@@ -0,0 +1,143 @@
+import { downloadFileFromBlob, RuntimeError } from '@ibiz-template/core';
+import { convertNavData, EditorController } from '@ibiz-template/runtime';
+import { IFileUploader } from '@ibiz/model-core';
+import qs from 'qs';
+
+/**
+ * 文件上传编辑器控制器
+ * @return {*}
+ * @author: zhujiamin
+ * @Date: 2022-08-25 10:57:58
+ */
+export class UploadEditorController extends EditorController
+ {this.files.map(item => (
+
+
+ 
+
+ ))}
+
+ this.onPreview(item)}
+ name='search'
+ >
+ this.onDownload(item)}
+ name='download'
+ >
+ this.onRemove(item)}
+ name='remove'
+ >
+
+