<template> <div> <el-rate :value="currentVal" :disabled="disabled" :max="maxItem" @change="change"> </el-rate> </div> </template> <script lang="ts"> import { Component, Vue, Prop, Model, Watch } from 'vue-property-decorator'; import CodeListService from '@codelist/codelist-service'; @Component({}) export default class AppRate extends Vue { /** * 传入值 * @type {any} * @memberof AppRate */ @Prop() public value?: any; /** * 是否禁用 * @type {boolean} * @memberof AppRate */ @Prop() public disabled?: boolean; /** * 下发数据 * @type {number} * @memberof AppRate */ @Prop() public data?: any; /** * 代码表服务对象 * * @type {CodeListService} * @memberof AppRate */ public codeListService: CodeListService = new CodeListService({ $store: this.$store }); /** * 传递最大值 * @type {*} * @memberof AppRate */ @Prop({ default: 5 }) public max!: number; /** * 应用上下文 * @type {*} * @memberof AppRate */ @Prop() context: any; /** * 视图参数 * @type {*} * @memberof AppRate */ @Prop() viewparams: any; /** * 临时上下文 * @type {*} * @memberof AppRate */ @Prop() localContext: any; /** * 临时参数 * @type {*} * @memberof AppRate */ @Prop() localParam: any; /** * 代码表标识 * @type {string} * @memberof AppRate */ @Prop() tag?: string; /** * 代码表类型 * @type {string} * @memberof AppRate */ @Prop() codelistType?: string; /** * 代码表值分隔符 * @type {string} * @memberof AppRate */ @Prop({default: ','}) valueSeparator?: string; /** * 数据名称 * @type {*} * @memberof AppRate */ @Prop() name: any; /** * 最大值 * @type {number} * @memberof AppRate */ public maxItem: number = 5; /** * 监听数据变化 * * @memberof AppRate */ @Watch('data',{immediate:true,deep:true}) onDataChange(newVal: any, oldVal: any) { if(newVal){ if(this.tag && this.codelistType == 'DYNAMIC'){ // 公共参数处理 let data: any = {}; this.handlePublicParams(data); // 参数处理 let _context = data.context; let _param = data.param; this.codeListService.getItems(this.tag, _context, _param).then((res: any) => { const items = res; // 获取最大值 const maxItem = Math.max.apply(Math,items.map((item: any) => { return item.value; })); this.maxItem = maxItem>5 ? 5 : maxItem; }).catch((error: any) => { console.log(`----${this.tag}----$t('components.appCheckBox.notExist')`); }); } } } /** * 当前值 * * @memberof AppRate */ get currentVal() { return Number(this.value); } /** * change */ public change(val: any) { this.$emit('change', val); } /** * Vue生命周期 * @memberof AppRate */ public created() { if (this.max) { this.maxItem = this.max; } this.handleCodelist(); } /** * 公共参数处理 * * @param {*} arg * @returns * @memberof AppRate */ public handlePublicParams(arg: any) { // 合并表单参数 arg.param = this.viewparams ? JSON.parse(JSON.stringify(this.viewparams)) : {}; arg.context = this.context ? JSON.parse(JSON.stringify(this.context)) : {}; // 附加参数处理 if (this.localContext && Object.keys(this.localContext).length >0) { let _context = this.$util.computedNavData(this.data,arg.context,arg.param,this.localContext); Object.assign(arg.context,_context); } if (this.localParam && Object.keys(this.localParam).length >0) { let _param = this.$util.computedNavData(this.data,arg.param,arg.param,this.localParam); Object.assign(arg.param,_param); } } /** * 根据代码表获取最大值 * @memberof AppRate */ public handleCodelist() { if (this.tag && Object.is(this.codelistType, 'STATIC')) { const codelist = this.$store.getters.getCodeList(this.tag); if (codelist) { const items = [...JSON.parse(JSON.stringify(codelist.items))]; // 获取最大值 const maxItem = Math.max.apply(Math,items.map((item: any) => { return item.value; })); this.maxItem = maxItem>5 ? 5 : maxItem; } else { console.log(`----${this.tag}----$t('components.appCheckBox.notExist')`); } } else if (this.tag && Object.is(this.codelistType, 'DYNAMIC')) { // 公共参数处理 let data: any = {}; this.handlePublicParams(data); // 参数处理 let _context = data.context; let _param = data.param; this.codeListService.getItems(this.tag, _context, _param).then((res: any) => { const items = res; // 获取最大值 let maxItem = Math.max.apply(Math,items.map((item: any) => { return item.value; })); this.maxItem = maxItem>5 ? 5 : maxItem; }).catch((error: any) => { console.log(`----${this.tag}----$t('components.appCheckBox.notExist')`); }); } } } </script> <style lang="less"> @import './app-rate.less'; </style>