SelectCty.vue 3.84 KB
<template>
    <el-select :disabled="isDisabled" @change="handleChange" clearable filterable placeholder="请选择国家(地区)"
               v-bind="this.$attrs" v-model="selectedValue">
        <el-option :key="item.value" :label="item.label" :value="item.value" v-for="item in options"></el-option>
    </el-select>
</template>

<script>
    import commonDepend from "../../mixin/commonDepend.js";
    import {getCnyctyCod} from "../../service/business/rmb";

    export default {
        inject: {
            root: {
                default: () => null
            }
        },
        mixins: [commonDepend],
        props: {
            value: {
                type: String,
                default: ''
            },
            disabled: {
                type: Boolean,
                default: false
            },
        },
        data() {
            return {
                options: [],
            };
        },
        computed: {
            selectedValue: {
                get() {
                    return this.value;
                },
                set(val) {
                    this.$emit('input', val);
                }
            },
            isDisabled() {
                return this.$store.state.Status.mode === "display" || this.disabled;
            },
        },
        mounted() {
            this.initializeOptions();
        },
        methods: {
            handleChange(value) {
                this.$emit('change', value);
                this.changeModify();
            },

            //检查本地存储是否有缓存数据
            hasCachedOptions() {
                return !!localStorage.getItem('SelectCtyOptions');
            },

            //获取缓存的options数据
            getCachedOptions() {
                const cachedOptions = localStorage.getItem('SelectCtyOptions');
                return JSON.parse(cachedOptions);
            },

            //缓存options数据
            cacheOptions(options) {
                const optionsJson = JSON.stringify(options);
                localStorage.setItem('SelectCtyOptions', optionsJson);
            },

            //初始化国别选项
            initializeOptions() {
                if (this.hasCachedOptions()) {
                    this.options = this.getCachedOptions()
                } else {
                    let params = {
                        countryCod: this.model || "",
                        pageNum: 1,
                        pageSize: 500,
                    };
                    getCnyctyCod(params).then(response => {
                        if (response.respCode === SUCCESS) {
                            if (response.data && response.data.list) {
                                response.data.list.sort((a, b) => a.numcod - b.numcod);
                                for (const item of response.data.list) {
                                    const option = {
                                        label: item.numcod.padStart(3, '0') + '-' + item.txt.split(' ')[0],
                                        value: item.cod
                                    };
                                    option.label = option.label.replace(/[a-zA-Z,]/g, '')
                                        .replace(/\(([^()]{10,})\)/g, '');
                                    let existingIndex = this.options.findIndex(item => item.value === option.value);
                                    if (existingIndex !== -1) {
                                        this.options.splice(existingIndex, 1)
                                    }
                                    this.options.push(option);
                                }
                                this.cacheOptions(this.options);
                            }
                        }
                    });
                }
            }
        }
    };
</script>

<style scoped>
</style>