app-rate.vue 6.9 KB
Newer Older
1 2
<template>
    <div class="app-rate">
3 4 5 6 7 8 9 10 11 12
        <el-rate
            :value="currentVal"
            :disabled="disabled || readonly"
            :max="maxItem"
            :colors="colors"
            :show-text="showText"
            :texts="texts"
            @change="change"
        >
        </el-rate>
13 14 15 16
    </div>
</template>

<script lang="ts">
17 18
import { Component, Vue, Prop, Model, Watch } from "vue-property-decorator";
import { CodeListService, LogUtil } from "ibiz-core";
19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35

@Component({})
export default class AppRate extends Vue {
    /**
     * 传入值
     * @type {any}
     * @memberof AppRate
     */
    @Prop() public value?: any;

    /**
     * 是否禁用
     * @type {boolean}
     * @memberof AppRate
     */
    @Prop() public disabled?: boolean;

36 37 38 39 40 41
    /**
     * 只读模式
     *
     * @type {boolean}
     */
    @Prop({ default: false }) public readonly?: boolean;
42 43 44 45 46 47 48 49 50 51 52 53 54 55

    /**
     * 下发数据
     * @type {number}
     * @memberof AppRate
     */
    @Prop() public data?: any;

    /**
     * 代码表服务对象
     *
     * @type {CodeListService}
     * @memberof AppRate
     */
56 57 58
    public codeListService: CodeListService = new CodeListService({
        $store: this.$store,
    });
59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113

    /**
     * 传递最大值
     * @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
114
     */
115 116 117 118 119 120 121
    @Prop() public codeList!: any;

    /**
     * 代码表值分隔符
     * @type {string}
     * @memberof AppRate
     */
122
    @Prop({ default: "," }) valueSeparator?: string;
123 124 125 126 127 128 129 130

    /**
     * 数据名称
     * @type {*}
     * @memberof AppRate
     */
    @Prop() name: any;

131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151
    /**
     * 辅助说明文本
     * @type {*}
     * @memberof AppRate
     */
    @Prop() texts?: any[];

    /**
     * 是否显示辅助说明文本
     * @type {boolean}
     * @memberof AppRate
     */
    @Prop() showText?: boolean;

    /**
     * 自定义颜色
     * @type {*}
     * @memberof AppRate
     */
    @Prop() colors?: Object | string[3];

152 153 154 155 156 157 158 159 160
    /**
     * 最大值
     * @type {number}
     * @memberof AppRate
     */
    public maxItem: number = 5;

    /**
     * 监听数据变化
161
     *
162 163
     * @memberof AppRate
     */
164
    @Watch("data", { immediate: true, deep: true })
165
    onDataChange(newVal: any, oldVal: any) {
166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193
        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) => {
                        LogUtil.log(
                            `----${this.tag}----$t('app.commonwords.codenotexist')`
                        );
                    });
            }
        }
194 195 196 197 198 199 200 201 202 203 204 205 206
    }

    /**
     * 当前值
     *
     * @memberof AppRate
     */
    get currentVal() {
        return Number(this.value);
    }

    /**
     * change
207
     * @memberof AppRate
208 209
     */
    public change(val: any) {
210
        this.$emit("change", val);
211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232
    }

    /**
     * Vue生命周期
     * @memberof AppRate
     */
    public created() {
        if (this.max) {
            this.maxItem = this.max;
        }
        this.loadData();
    }

    /**
     * 公共参数处理
     *
     * @param {*} arg
     * @returns
     * @memberof AppRate
     */
    public handlePublicParams(arg: any) {
        // 合并表单参数
233 234 235 236 237 238
        arg.param = this.viewparams
            ? JSON.parse(JSON.stringify(this.viewparams))
            : {};
        arg.context = this.context
            ? JSON.parse(JSON.stringify(this.context))
            : {};
239
        // 附加参数处理
240 241 242 243 244 245 246 247
        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);
248
        }
249 250 251 252 253 254 255 256
        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);
257 258 259 260 261 262 263 264
        }
    }

    /**
     * 加载数据
     *
     * @memberof DropDownList
     */
265 266
    public loadData() {
        if (this.tag && this.codelistType) {
267 268 269 270 271
            let data: any = {};
            this.handlePublicParams(data);
            // 参数处理
            let context = data.context;
            let viewparam = data.param;
272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297
            this.codeListService
                .getDataItems({
                    tag: this.tag,
                    type: this.codelistType,
                    data: this.codeList,
                    context: context,
                    viewparam: viewparam,
                })
                .then((codelistItems: Array<any>) => {
                    const items = codelistItems;
                    //  获取最大值
                    const maxItem = Math.max.apply(
                        Math,
                        items.map((item: any) => {
                            return item.value;
                        })
                    );
                    this.maxItem = maxItem > 5 ? 5 : maxItem;
                })
                .catch((error: any) => {
                    LogUtil.log(
                        `----${this.tag}----${this.$t(
                            "app.commonwords.codenotexist"
                        )}`
                    );
                });
298 299 300 301
        }
    }
}
</script>