<template> <div class="app-mobile-check-list"> <ion-icon v-if="curValue" name="close-circle-outline" @click="clear"></ion-icon> <ion-select ref="checkList" @ionChange="change" :disabled="disabled" multiple="true" :ok-text="$t('app.button.confirm')" :cancel-text="$t('app.button.cancel')"> <ion-select-option v-for="option of options" :key="option.value" :value="option.value">{{option.text}} </ion-select-option> </ion-select> </div> </template> <script lang="ts"> import { Vue, Component, Prop, Provide, Emit, Watch } from "vue-property-decorator"; import CodeListService from "@app-core/service/app/code-list-service"; @Component({ components: {} }) export default class AppCheckList extends Vue { /** * 代码表服务对象 * * @type {CodeListService} * @memberof AppCheckList */ public codeListService: CodeListService = new CodeListService(); /** * 传入值 * * @type {string} * @memberof AppCheckList */ @Prop() public value ? : string; /** * 当前选中值 * @memberof AppCheckList */ public curValue:any = this.value; /** * 下拉数据数组 * * @type {any[]} * @memberof AppCheckList */ public options: any[] = []; /** * 是否禁用 * * @type {string} * @memberof AppCheckList */ @Prop() public disabled ? : string; /** * 代码表标识 * * @type {string} * @memberof AppCheckList */ @Prop() public tag!: string; /** * 代码表类型 * * @type {string} * @memberof AppCheckList */ @Prop() public type!: string; /** * 导航参数 * * @type {*} * @memberof AppCheckList */ @Prop({ default: {} }) protected navigateParam?: any; /** * 导航上下文 * * @type {*} * @memberof AppCheckList */ @Prop({ default: {} }) protected navigateContext?: any; /** * 应用上下文 * * @type {*} * @memberof AppCheckList */ @Prop({ default: {} }) protected context?: any; /** * 是否缓存 * * @type {*} * @memberof AppCheckList */ @Prop({ default: true }) protected isCache?: boolean; /** * 传入表单数据 * * @type {*} * @memberof AppCheckList */ @Prop() public data?: any; /** * 视图参数 * * @type {*} * @memberof AppCheckList */ @Prop() public viewparams!: any; /** * 生命周期 * * @type {*} * @memberof AppCheckList */ public created() { if (this.tag && this.type) { if (Object.is(this.type, "dynamic")) { this.codeListService .getItems(this.tag) .then((res: any) => { this.options = res; }) .catch((error: any) => { this.options = []; }); } else { // 处理导航参数、上下文参数 let param: any= {}; this.handleOtherParam(param); this.options = this.$store.getters.getCodeListItems(this.tag ,this.isCache, param.context, param.param); } } } /** * 值改变 * * @memberof AppCheckList */ public change(value: any) { this.curValue = value.detail.value; this.$emit('change', value.detail.value); } /** * 回填值 * @memberof AppCheckList */ public mounted(){ const select:any = this.$refs.checkList; select.value = this.curValue; } /** * 处理额外参数 */ public handleOtherParam(arg:any) { if (!this.data) { return false; } // 合并表单参数 arg.param = this.viewparams ? {...this.viewparams} : {}; arg.context = this.context ? {...this.context} : {}; // 附加参数处理 const param = this.$viewTool.formatNavigateParam({context:this.navigateContext,param:this.navigateParam},this.context,this.viewparams,this.data); Object.assign(arg.context,param.context); Object.assign(arg.param,param.param); return true; } /** * 清空值 * @memberof @memberof AppCheckList */ public clear(){ this.curValue = null; const select:any = this.$refs.checkList; select.value = ''; this.$emit('change','') } } </script> <style lang="less"> @import "./app-mob-check-list.less"; </style>