feat: 更新开关编辑器

app_Web/src/app-register.ts

@@ -119,6 +119,7 @@ import {
   IBizGridRadio,
   IBizGridPicker,
   GridEditor,
+  IBizSwitch,
 } from './components/editor';
 
 export const AppRegister = {
@@ -229,6 +230,7 @@ export const AppRegister = {
     v.component('IBizImageUpload', IBizImageUpload);
     v.component('QuickSearch', QuickSearch);
     v.component('NotSupportedEditor', NotSupportedEditor);
+    v.component('IBizSwitch', IBizSwitch);
     // 注册表格编辑器
     v.component('IBizGridInput', IBizGridInput);
     v.component('IBizGridSpan', IBizGridSpan);

app_Web/src/components/editor/index.ts

@@ -9,3 +9,4 @@ export * from './data-picker';
 export * from './upload';
 export * from './date-range';
 export { NotSupportedEditor } from './not-supported-editor/not-supported-editor';
+export * from './switch';

app_Web/src/components/editor/switch/grid-switch/grid-switch.tsx

+import {
+  getGridSwitchProps,
+  useGridCellEditor,
+  useNamespace,
+} from '@ibiz-template/vue-util';
+import { defineComponent, h } from 'vue';
+
+export const IBizGridSwitch = defineComponent({
+  name: 'IBizGridSwitch',
+  props: getGridSwitchProps(),
+  setup(props, { emit }) {
+    const ns = useNamespace('grid-switch');
+    const { isInfoMode, componentRef, autoFocus, onOperateChange, onChange } =
+      useGridCellEditor(props, { emit });
+    return {
+      ns,
+      isInfoMode,
+      autoFocus,
+      componentRef,
+      onOperateChange,
+      onChange,
+    };
+  },
+  render() {
+    return (
+      <grid-editor
+        disabled={this.disabled}
+        readonly={this.readonly}
+        ref='componentRef'
+        class={this.ns.b()}
+      >
+        {h('IBizSwitch', {
+          props: {
+            ...this.$props,
+            readonly: this.isInfoMode,
+            disabled: this.disabled,
+            autoFocus: this.autoFocus,
+          },
+          on: {
+            change: this.onChange,
+            operate: this.onOperateChange,
+          },
+        })}
+      </grid-editor>
+    );
+  },
+});

app_Web/src/components/editor/switch/index.ts

+export { IBizSwitch } from './switch/switch';

app_Web/src/components/editor/switch/switch/switch.tsx

+import { getSwitchProps, useNamespace } from '@ibiz-template/vue-util';
+import { defineComponent, ref, watch } from 'vue';
+
+export const IBizSwitch = defineComponent({
+  name: 'IBIzSwitch',
+  props: getSwitchProps(),
+  setup(props, { emit }) {
+    const ns = useNamespace('switch');
+    const currentVal = ref(false);
+
+    watch(
+      () => props.value,
+      (newVal, oldVal) => {
+        if (newVal !== oldVal) {
+          if (!newVal) {
+            currentVal.value = false;
+          } else {
+            // eslint-disable-next-line eqeqeq
+            currentVal.value = props.value == 1;
+          }
+        }
+      },
+      { immediate: true },
+    );
+
+    const onChange = (value: boolean) => {
+      const emitValue = value === true ? 1 : 0;
+      emit('change', emitValue);
+    };
+    return {
+      ns,
+      currentVal,
+      onChange,
+    };
+  },
+  render() {
+    return (
+      <div class={this.ns.b()}>
+        <i-switch
+          v-mode={this.currentVal}
+          onOn-change={this.onChange}
+        ></i-switch>
+      </div>
+    );
+  },
+});

app_Web/src/provider/editor/index.ts

@@ -7,6 +7,7 @@ import { DatePickerEditorProvider } from './date-picker-provider';
 import { FileUploaderEditorProvider } from './file-uploader-provider';
 import { DataPickerEditorProvider } from './data-picker-provider';
 import { DateRangeEditorProvider } from './date-range-provider';
+import { SwitchProvider } from './switch-provider';
 
 /**
  * 预置默认的编辑器适配器
@@ -101,6 +102,7 @@ export function presetEditorProvider(): void {
     'ADDRESSPICKUP_AC',
     new DataPickerEditorProvider('ADDRESSPICKUP'),
   );
+  editorRegister.register('SWITCH', new SwitchProvider());
 }
 
 export {
@@ -111,4 +113,5 @@ export {
   DatePickerEditorProvider,
   FileUploaderEditorProvider,
   DataPickerEditorProvider,
+  SwitchProvider,
 };

app_Web/src/provider/editor/switch-provider.ts

+import {
+  FormItemController,
+  GridEditItemController,
+  IEditorProvider,
+  SwitchEditorController,
+} from '@ibiz-template/controller';
+import { SwitchEditorModel } from '@ibiz-template/model';
+
+export class SwitchProvider implements IEditorProvider {
+  formEditor: string = 'IBizSwitch';
+
+  gridEditor: string = 'IBizGridSwitch';
+
+  async createController(
+    editorModel: SwitchEditorModel,
+    parentController: FormItemController | GridEditItemController,
+  ): Promise<SwitchEditorController> {
+    const c = new SwitchEditorController(editorModel, parentController);
+    await c.init();
+    return c;
+  }
+}