组件——编辑器结构调整

src/app-register.ts

@@ -23,12 +23,8 @@ export const AppComponents = {
         v.component('app-list-menu', () => import('@/components/app-list-menu/app-list-menu.vue'));
         v.component('app-slider-menu', () => import('@/components/app-slider-menu/app-slider-menu.vue'));
         v.component('app-icon-menu', () => import('@/components/app-icon-menu/app-icon-menu.vue'));
-        v.component('app-mob-datetime-picker', () => import('@/components/app-mob-datetime-picker/app-mob-datetime-picker.vue'));
-        v.component('app-mob-stepper', () => import('@/components/app-mob-stepper/app-mob-stepper.vue'));
-        v.component('app-mob-input', () => import('@/components/app-mob-input/app-mob-input.vue'));
         v.component('app-radio', () => import('@/components/app-radio/app-radio.vue'));
         v.component('app-multiple-select', () => import('@/components/app-multiple-select/app-multiple-select.vue'));
-        v.component('app-mob-select', () => import('@/components/app-mob-select/app-mob-select.vue'));
         v.component('app-form-druipart', () => import('@/components/app-form-druipart/app-form-druipart.vue'));
         v.component('app-card-list', () => import('@/components/app-card-list/app-card-list.vue'));
         v.component('app-icon-list', () => import('@/components/app-icon-list/app-icon-list.vue'));
@@ -41,8 +37,7 @@ export const AppComponents = {
         v.component('app-status-list', () => import('@/components/app-status-list/app-status-list.vue'));
         v.component('app-table-list', () => import('@/components/app-table-list/app-table-list.vue'));
         v.component('app-van-menu', () => import('@/components/app-van-menu/app-van-menu.vue'));
-        v.component('app-mpicker', () => import('@/components/app-mpicker/app-mpicker.vue'));
-        v.component('app-mob-picker', () => import('@/components/app-mob-picker/app-mob-picker.vue'));
+
         v.component('app-viewpager', () => import('@/components/app-viewpager/app-viewpager.vue'));
         v.component('app-notice-bar', () => import('@/components/app-notice-bar/app-notice-bar.vue'));
         v.component('app-twotitle-list', () => import('@/components/app-twotitle-list/app-twotitle-list.vue'));
@@ -51,37 +46,57 @@ export const AppComponents = {
         v.component('app-form-group', () => import('@/components/app-form-group/app-form-group.vue'));
         v.component('app-list-default', () => import('@/components/app-list-default/app-list-default.vue'));
         v.component('app-list-swipe', () => import('@/components/app-list-swipe/app-list-swipe.vue'));
-        v.component('app-mob-rate', () => import('@/components/app-mob-rate/app-mob-rate.vue'));
-        v.component('app-mob-select-drop-down', () => import('@/components/app-mob-select-drop-down/app-mob-select-drop-down.vue'));
-        v.component('app-mob-textarea',() => import('./components/app-mob-textarea/app-mob-textarea.vue'));
+        // 日历组件
+        v.component('app-calendar',() => import('@/components/app-calendar/app-calendar.vue'));
+        v.component('app-vcalendar',() => import('@/components/app-vcalendar/app-vcalendar.vue'));
         // 搜索表单2
         v.component('app-form-item2', () => import('@/components/app-form-item2/app-form-item2.vue'));
         // 搜索表单2编辑器
         v.component('app-search-editor', () => import('@/components/app-search-editor/app-search-editor.vue'));
-        // 日历组件
-        v.component('app-calendar',() => import('@/components/app-calendar/app-calendar.vue'));
-        v.component('app-vcalendar',() => import('@/components/app-vcalendar/app-vcalendar.vue'));
+
         // 编辑器 BEGIN
+        // 评分器
+        v.component('app-mob-rate', () => import('@/components/editor/app-mob-rate/app-mob-rate.vue'));
+        // 下拉视图
+        v.component('app-mob-select-drop-down', () => import('@/components/editor/app-mob-select-drop-down/app-mob-select-drop-down.vue'));
+        // 多行文本
+        v.component('app-mob-textarea',() => import('./components/editor/app-mob-textarea/app-mob-textarea.vue'));
         // 图片选择
-        v.component('app-mob-picture', () => import('@/components/app-mob-picture/app-mob-picture.vue'));
+        v.component('app-mob-picture', () => import('@/components/editor/app-mob-picture/app-mob-picture.vue'));
         // 下拉列表 （多选）
-        v.component('app-mob-check-list', () => import('@/components/app-mob-check-list/app-mob-check-list.vue'));
+        v.component('app-mob-check-list', () => import('@/components/editor/app-mob-check-list/app-mob-check-list.vue'));
         // 文件上传
-        v.component('app-mob-file-upload', () => import('@/components/app-mob-file-upload/app-mob-file-upload.vue'));
+        v.component('app-mob-file-upload', () => import('@/components/editor/app-mob-file-upload/app-mob-file-upload.vue'));
         // 开关
-        v.component('app-mob-switch', () => import('@/components/app-mob-switch/app-mob-switch.vue'));
+        v.component('app-mob-switch', () => import('@/components/editor/app-mob-switch/app-mob-switch.vue'));
         // 滑动输入条
-        v.component('app-mob-slider', () => import('@/components/app-mob-slider/app-mob-slider.vue'));        
+        v.component('app-mob-slider', () => import('@/components/editor/app-mob-slider/app-mob-slider.vue'));        
         //单选框
-        v.component('app-mob-radio-list', () => import('@/components/app-mob-radio-list/app-mob-radio-list.vue'));   
+        v.component('app-mob-radio-list', () => import('@/components/editor/app-mob-radio-list/app-mob-radio-list.vue'));   
         //下拉单选
-        v.component('app-mob-dropdown-list', () => import('@/components/app-mob-dropdown-list/app-mob-dropdown-list.vue')); 
+        v.component('app-mob-dropdown-list', () => import('@/components/editor/app-mob-dropdown-list/app-mob-dropdown-list.vue')); 
         //下拉单选
-        v.component('app-mob-mpicker', () => import('@/components/app-mob-mpicker/app-mob-mpicker.vue'));  
+        v.component('app-mob-mpicker', () => import('@/components/editor/app-mob-mpicker/app-mob-mpicker.vue'));  
         //span
-        v.component('app-mob-span', () => import('@/components/app-mob-span/app-mob-span.vue'));   
+        v.component('app-mob-span', () => import('@/components/editor/app-mob-span/app-mob-span.vue'));   
         //录音 
-        v.component('app-mob-recorder', () => import('@/components/app-mob-recorder/app-mob-recorder.vue'));               
+        v.component('app-mob-recorder', () => import('@/components/editor/app-mob-recorder/app-mob-recorder.vue'));  
+        // 工作流审批意见控件
+        v.component('app-wf-approval',() => import('@/components/editor/app-wf-approval/app-wf-approval.vue'));      
+        // 数据选择多选
+        v.component('app-mob-picker', () => import('@/components/editor/app-mob-picker/app-mob-picker.vue'));       
+        // 下拉选择
+        v.component('app-mob-select', () => import('@/components/editor/app-mob-select/app-mob-select.vue'));
+        // 时间选择器
+        v.component('app-mob-datetime-picker', () => import('@/components/editor/app-mob-datetime-picker/app-mob-datetime-picker.vue'));
+        // 输入框
+        v.component('app-mob-input', () => import('@/components/editor/app-mob-input/app-mob-input.vue'));
+        // 步进器
+        v.component('app-mob-stepper', () => import('@/components/editor/app-mob-stepper/app-mob-stepper.vue'));
+        // 富文本（模态）
+        v.component('app-rich-text',() => import('@/components/editor/app-rich-text/app-rich-text.vue'));
+        // 富文本项
+        v.component('app-mob-rich-text-editor',() => import('@/components/editor/app-mob-rich-text-editor/app-mob-rich-text-editor.vue'));
         // 编辑器 END
 
         // 菜单样式 BEGIN
@@ -102,22 +117,13 @@ export const AppComponents = {
 
         // 路由缓存
         v.component('app-keep-alive', AppKeepAlive);
-        // 工作流审批意见控件
-        v.component('app-wf-approval',() => import('@/components/app-wf-approval/app-wf-approval.vue'));
         v.component('app-list-index',() => import('@/components/app-list-index/app-list-index.vue'));
-        // 富文本项
-        v.component('app-mob-rich-text-editor',() => import('@/components/app-mob-rich-text-editor/app-mob-rich-text-editor.vue'));
         // 列表项插件
         v.component('app-list-index-text',() => import('@/components/app-list-index-text/app-list-index-text.vue'));
-        // 富文本（模态）
-        v.component('app-rich-text',() => import('@/components/app-rich-text/app-rich-text.vue'));
-
         // 多数据快速分组组件
         v.component('app-quick-group-tab',() => import('@/components/app-quick-group-tab/app-quick-group-tab.vue'));
-
         // 搜索历史组件
         v.component('app-search-history',() => import('@/components/app-search-history/app-search-history.vue'));
-
         // 更新日志
         v.component('app-update-log',() => import('@/ibiz-core/components/app-update-log/app-update-log.vue'));
         // 风格切换组件

src/components/app-mpicker/app-mpicker.less

-.app-mpicker {
-    width: 100%;
-    position: relative;
-    .open-picker {
-      position: absolute;
-      right: 10px;
-      top: 10px;  
-      z-index: 3;
-    }
-  }
\ No newline at end of file

src/components/app-mpicker/app-mpicker.vue

-<template>
-  <div class="app-mpicker">
-      <ion-input  :clear-input="true" @ionFocus="openModal">
-        <div style="    display: flex; flex-wrap: wrap;">
-            <p v-for="(item,index) in curValue" :key="index" style="margin: 0; padding: 0;">
-            <ion-chip outline color="primary">
-              <ion-label>{{item.text}}</ion-label>
-              <ion-icon name="close-circle" @click="remove(item)"></ion-icon>
-            </ion-chip>
-          </p>
-          </div>
-      </ion-input>
-      <ion-icon class="open-picker" name="search-outline" @click="openModal"></ion-icon>
-    </div>
-</template>
-<script lang="ts">
-import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator';
-import { Subject, Subscription } from 'rxjs';
-import { debounceTime, distinctUntilChanged } from 'rxjs/operators';
-
-@Component({})
-export default class AppPicker extends Vue {
-
- /**
-   * 视图上下文
-   *
-   * @type {*}
-   * @memberof AppMPicker
-   */
-  @Prop() public context!: any;
-
-  /**
-   * 视图参数
-   *
-   * @type {*}
-   * @memberof AppMPicker
-   */
-  @Prop() public viewparams!: any;
-
-  /**
-   * 输入值
-   * @type any
-   * @memberof AppMPicker
-   */
-  @Prop() public value?: any;
-
-  get curValue() {
-    if (this.value) {
-      if (this.value instanceof Array) {
-        return this.value;
-      } else if (typeof this.value === "string") {
-        try {
-          return JSON.parse(this.value);
-        } catch (error) {
-          console.error(error);
-        }
-      }
-    } else {
-      return [];
-    }
-  }
-
-  set curValue(val: any) {
-    if (!val) {
-      this.$emit("change", null);
-    } else {
-      this.$emit("change", JSON.stringify(val));
-    }
-  }
-
-  /**
-   *  标签label
-   * @type string
-   * @memberof AppMPicker
-   */
-  @Prop() public labelText?: string;
-
-  /**
-   *  是否允许为空
-   * @type boolean
-   * @memberof AppMPicker
-   */
-  @Prop() public allowEmpty?: boolean;
-
-  /**
-   * 输入值
-   * @type boolean
-   * @memberof AppMPicker
-   */
-  @Prop() public disabled?: boolean;
-
-  /**
-   * 空白提示信息
-   * @type string
-   * @memberof AppMPicker
-   */
-  @Prop() public placeholder?: string;
-
-  /**
-   * 视图名称
-   * @type string
-   * @memberof AppMPicker
-   */
-  @Prop() public viewname?: string;
-
-    /**
-     * 打开模态
-     *
-     * @memberof AppMPicker
-     */
-    public async openModal() {
-        if (this.viewname) {
-            const result: any = await this.$appmodal.openModal({ viewname: this.viewname, title: this.viewname}, this.context, this.viewparams);
-            if (result || Object.is(result.ret, 'OK')) {
-                this.curValue = result.datas;
-            }
-        } else {
-            console.log("选择视图未配置");
-        }
-    }
-
-  /**
-   * 删除单个数据项
-   *
-   * @memberof AppMPicker
-   */
-  public remove(value: any) {
-    if (this.disabled) {
-      return;
-    }
-    this.curValue = this.curValue.filter((item:any) =>{
-        return item.srfkey !== value.srfkey;
-    })
-  }
-}
-</script>
-<style lang="less">
-@import './app-mpicker.less';
-</style>
\ No newline at end of file