<template> <div> <el-rate :value="currentVal" :disabled="disabled" :max="maxItem" @change="change" :colors="colors" :show-text="showText" :texts="texts" > </el-rate> </div> </template> <script lang="ts"> import { Component, Vue, Prop, 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(); /** * 传递最大值 * @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 {*} * @memberof AppRate */ @Prop() texts?: any[]; /** * 是否显示辅助说明文本 * @type {boolean} * @memberof AppRate */ @Prop() showText?: boolean; /** * 自定义颜色 * @type {*} * @memberof AppRate */ @Prop() colors?: Object | string[3]; /** * 最大值 * @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); } /** * 值改变 * @memberof AppRate */ 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>