新增动作面板组件

src/app-register.ts

@@ -130,5 +130,7 @@ export const AppComponents = {
         v.component('app-mob-menu-sideslip-view',() => import('@/components/app-mob-menu-sideslip-view/app-mob-menu-sideslip-view.vue'));
         // 侧滑菜单组件头部信息
         v.component('app-mob-menu-sideslip-view-header',() => import('@/components/app-mob-menu-sideslip-view-header/app-mob-menu-sideslip-view-header.vue'));
+        // 动作面板
+        v.component('app-mob-actionsheet',() => import('@/components/app-mob-actionsheet/app-mob-actionsheet.vue'));
     },
 };
\ No newline at end of file

src/components/app-mob-actionsheet/app-mob-actionsheet.less

+.app-mobile-actionsheet {
+  height: 40px;
+  width: 100%;
+  .cancel-icon {
+    width: 16px;
+    height: 16px;
+    background-color: #fcfcfc;
+    position: absolute;
+    right: 12px;
+    top: 50%;
+    transform: translateY(-50%);
+    z-index: 9998;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ion-icon{
+      position: absolute;
+      font-size: 16px;
+      right: 0;
+      top: 0;
+      color:#969696;
+      z-index:9999;
+    }
+  }
+  .select-icon {
+    right: 17px;
+    top: 50%;
+    margin-top: -3px;
+    position: absolute;
+    width: 0px;
+    height: 0px;
+    color: currentcolor;
+    border-top: 5px solid;
+    border-right: 5px solid transparent;
+    border-left: 5px solid transparent;
+    color: #969696;
+  }
+  .van-action-sheet{
+    width: 100%;
+  }
+  .text{
+    text-align: right;
+    line-height: 40px;
+    width: 210px;
+    height: 40px;
+    color:#969696;
+  }
+}
\ No newline at end of file

src/components/app-mob-actionsheet/app-mob-actionsheet.vue

+<template>
+  <div class="app-mobile-actionsheet">
+      <div class="cancel-icon" v-if="curValue || curValue === 0"><ion-icon name="close-circle-outline" @click="clear"></ion-icon></div>
+      <div v-if="curValue== null || curValue==''" class="select-icon" ></div>
+      <!-- <ion-input :value="action" readonly @ionFocus="showSheet"></ion-input> -->
+      <div @click="showSheet" class="text">{{action}}</div>
+      <van-action-sheet get-container="#app" v-model="show" :actions="actions" @open="load" @select="change" :cancel-text="$t('app.button.cancel')" @cancel="cancel"/>
+  </div>
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop, Provide, Emit, Watch, } from "vue-property-decorator";
+import { CodeListService } from "@/ibiz-core";
+import { Loading } from '@/ibiz-core/utils';
+@Component({
+    components: {},
+})
+export default class AppMobActionsheet extends Vue {
+
+    /**
+     * 动作面板选中数据
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public action:any;
+  
+    /**
+     * 动作面板所需数据
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public actions:Array<any> = [];
+
+    /**
+     * 动作面板状态
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public show:boolean = false;
+
+    /**
+     * 显示动作面板
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public showSheet(){
+      this.show = true;
+    }
+
+    /**
+     * options->actions处理数据
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public handleActions(){
+      this.options.forEach((option:any,index:number)=>{
+        this.actions[index] = {};
+        this.actions[index].name = option.text;
+        this.actions[index].value = option.value;
+      })
+    }
+
+    /**
+     * 代码表服务对象
+     *
+     * @type {CodeListService}
+     * @memberof AppMobActionsheet
+     */
+    public codeListService: CodeListService = new CodeListService();
+
+    /**
+     * 传入值
+     *
+     * @type {string}
+     * @memberof AppMobActionsheet
+     */
+    @Prop() public value?: any;
+
+    /**
+     * 当前选中值
+     * @memberof AppMobActionsheet
+     */
+    get curValue() {
+        if (this.options.length > 0 && this.value !== null && this.value !== "") {
+            let isIncluded = this.options.some((option:any)=>{return option.value === this.value})
+            if (isIncluded) {
+                return this.value;
+            }
+        }
+        return "";
+    }
+
+    /**
+     * change事件
+     *
+     * @memberof AppMobActionsheet
+     */
+    public change(action: any) {
+        console.log(action);
+        this.action = action.name;
+        this.$store.commit('setSelectStatus',true); 
+        let devalue:any = action.value;
+        if (devalue !== '') {
+          for(let key in this.options){
+            if (this.options[key].isValueNumber) {
+              devalue = +devalue;
+            }
+          }
+          if (Object.is(this.codeListType, 'DYNAMIC')) {
+            for(let key in this.options){
+              if (typeof this.options[key].id == 'number') {
+                  devalue = +devalue;
+              }
+            }
+          }
+        }
+        console.log(devalue);
+        this.$emit("change", devalue);
+        this.show = false;
+    }
+
+    /**
+     * 下拉数据数组
+     *
+     * @type {any[]}
+     * @memberof AppMobActionsheet
+     */
+    public options: any[] = [];
+
+    /**
+     * 是否禁用
+     *
+     * @type {string}
+     * @memberof AppMobActionsheet
+     */
+    @Prop() public disabled?: string;
+
+    /**
+     * 代码表标识
+     *
+     * @type {string}
+     * @memberof AppMobActionsheet
+     */
+    @Prop() public tag!: string;
+
+    /**
+     * 代码表类型
+     * STATIC：静态
+     * DYNAMIC：动态
+     *
+     * @type {('STATIC' | 'DYNAMIC')}
+     * @memberof Login
+     */
+    @Prop() public codeListType!: 'STATIC' | 'DYNAMIC';
+
+    /**
+     * 传入表单数据
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop() public data?: any;
+
+    /**
+     * 应用上下文
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop({ default: {} }) protected context?: any;
+
+    /**
+     * 导航参数
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop({ default: {} }) protected navigateParam?: any;
+
+    /**
+     * 导航上下文
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop({ default: {} }) protected navigateContext?: any;
+
+    /**
+     * 是否缓存
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop({ default: true }) protected isCache?: boolean;
+
+    /**
+     * 视图参数
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    @Prop() public viewparams!: any;
+
+    /**
+     * 是否被缓存
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    public isCached: boolean = false;
+
+    /**
+     * 监听表单数据
+     *
+     * @param {*} newVal
+     * @param {*} val
+     * @memberof AppMobActionsheet
+     */
+    @Watch('value')
+    onDataChange(newVal: any, oldVal: any) {
+        if (newVal) {
+            this.load();
+            this.$store.commit('setSelectStatus',true);
+        }
+    }
+
+    /**
+     * mounted
+     */
+    public mounted() {
+        if (Object.is(this.codeListType, "STATIC")) {
+            this.options = this.$store.getters.getCodeListItems(this.tag);
+        } else {
+            if (this.curValue) {
+                this.load();
+                this.$store.commit('setSelectStatus',true);
+            }
+        }
+    }
+
+    /**
+     * 取消选择
+     *
+     * @type {*}
+     * @memberof AppMobActionsheet
+     */
+    public cancel(){
+      this.$store.commit('setSelectStatus',true);
+    }
+
+    /**
+     * 加载
+     *
+     * @returns {Promise<any>}
+     * @memberof AppMobActionsheet
+     */
+    public async load(): Promise<any> {
+        this.$store.commit('setSelectStatus',false);
+        if (Object.is(this.codeListType, "STATIC")) {
+            return;
+        }
+    
+        // 处理导航参数、上下文参数
+        let param: any = {};
+        const bcancel: boolean =this.handleOtherParam(param);
+        if(!bcancel){
+            return
+        }
+        let response: any = await this.codeListService.getItems(this.tag,  param.context, param.param);
+        if (response) {
+            this.options = response
+            if (this.isCache) {
+                this.isCached = true;
+            }
+        } else {
+            this.options = [];
+        }
+        console.log(this.options);
+        this.handleActions();
+    }
+    /**
+     * 清空值
+     * @memberof AppMobActionsheet
+     */
+    public clear() {
+        this.$emit("change", "");
+        this.action = '';
+    }
+
+    /**
+     * 处理额外参数
+     */
+    public handleOtherParam(arg:any) {
+        if (!this.data) {
+            return false;
+        }
+        // 附加参数处理
+        const {context, param} = this.$viewTool.formatNavigateParam( this.navigateContext, this.navigateParam, this.context, this.viewparams, this.data );
+        arg.context = context;
+        arg.param = param;
+        return true;
+    }
+
+}
+</script>
+
+<style lang="less">
+@import './app-mob-actionsheet.less';
+</style>
\ No newline at end of file