mashangyoujiu/Public/Retail/common/js/select-store.js

/**
 * 选择一个门店
 */
Vue.component('select-store', {
    template: `<el-select v-model="store"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                           size="small"
                          @change="changeStore"
                          value-key="id"
                          clearable filterable>
                    <el-option v-for="item in dataList"
                            :key="item.id"
                            :label="item.store_name"
                            :disabled="item.id==disabledStoreId?true:false"
                            :value="item">
                            <template v-if="showStatus">
                                <span style="float: left">{{item.store_name}}</span>
                                <span style="float: right; color: #8492A6; font-size: 12px">{{item.store_status==1?'关闭':'开启'}}</span>
                            </template>
                    </el-option>
                </el-select>`,
    props: {
        'storeId': {
            type: String,
            default: '',
        },//选择的门店ID
        'placeholder': {
            type: String,
            default: '选择门店',
        },//选择的门店ID
        'storeStatus': {
            type: Number,
            default: 3,
        },//门店状态  1开启的门店  2关闭的门店  3开启和关闭的门店
        'showStatus': {
            type: Boolean,
            default: false,
        },//是否显示门店状态
        'industryId': {
            type: String,
            default: '',
        },//筛选的行业ID
        'storeIndustryId': {
            type: String,
            default: '',
        },//已选门店的行业ID
        'strictIndustry': {
            type: Boolean,
            default: false,
        },//是否是严格模式筛选行业下的门店
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
        'disabledStoreId': {
            type: String,
            default: '',
        },//禁止选择的门店ID
    },
    data() {
        return {
            store: '',//已选中的门店信息
            dataList: [],// 数据
            page: 1,
            limit: 20,
            loadSuccess: false,
            timer: null,
        };
    },
    methods: {
        //切换门店
        changeStore() {
            this.$emit('update:storeId', this.store && this.store.id ? this.store.id : '');
            this.$emit('update:storeIndustryId', this.store && this.store.industry_id ? this.store.industry_id : '');
            this.$emit('change', this.store && this.store.id ? this.store.id : '');
        },
        //获取门店列表
        getStoreList() {
            this.sendRequest('Retail/Store/getStoreLimitList', {
                data: {
                    page: this.page,
                    limit: this.limit,
                    store_status: this.storeStatus,
                    industry_id: this.industryId,
                    strict_industry: this.strictIndustry ? 1 : 0,
                },
                success: (res) => {
                    this.loadSuccess = true;
                    if (res.status == 1) {
                        if (this.page == 1) {
                            this.dataList = res.data;
                        } else {
                            this.dataList.push.apply(this.dataList, res.data);
                        }
                        this.unitStore()
                        if (this.limit == res.data.length) {
                            this.page++;
                            this.getStoreList();
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                },
            })
        },
        unitStore() {
            console.log(123);
            if (this.timer) return
            this.timer = setInterval(() => {
                if (this.loadSuccess) {
                    clearInterval(this.timer)
                    this.timer = null
                    let flag = false;
                    for (let i in this.dataList) {
                        if (this.storeId == this.dataList[i].id) {
                            this.store = {...this.dataList[i]};
                            flag = true;
                            continue;
                        }
                    }
                    if (!flag) {
                        this.store = '';
                    }
                    this.changeStore();
                }
            }, 500)

        }
    },
    created() {
        this.getStoreList();
    },
    watch: {
        storeId(n) {
            if (this.store && this.store.id && n != this.store.id || n && !this.store) this.unitStore();
        },
    }
});

/**
 * 选择多个门店
 */
Vue.component('select-store-multiple', {
    template: `<el-select v-model="store_id_arr"
                          :placeholder="placeholder"
                          :disabled="isDisabled"
                          size="small" style="width:100%;max-width: 600px"
                          @change="changeStore"
                          multiple clearable filterable>
                    <el-option v-for="item in dataList"
                            :value-key="item.id"
                            :key="item.id"
                            :label="item.store_name"
                            :value="item.id">
                            <template v-if="showStatus">
                                <span style="float: left">{{ item.store_name }}</span>
                                <span style="float: right; color: #8492A6; font-size: 12px;padding-right: 16px;">{{item.store_status==1?'关闭':'开启'}}</span>
                            </template>
                    </el-option>
                </el-select>`,
    props: {
        'storeIdArr': {
            type: Array,
            default() {
                return []
            },
        },//选择的门店ID列表
        'placeholder': {
            type: String,
            default: '选择门店',
        },//选择的门店ID
        'storeStatus': {
            type: Number,
            default: 3,
        },//门店状态  1开启的门店  2关闭的门店  3开启和关闭的门店
        'showStatus': {
            type: Boolean,
            default: false,
        },//是否显示门店状态
        'isDisabled': {
            type: Boolean,
            default: false,
        },//是否禁止修改
    },
    data() {
        return {
            store_id_arr: '',//已选中的门店ID列表
            dataList: [],// 数据
            page: 1,
            limit: 20,
        };
    },
    methods: {
        //切换门店
        changeStore(val) {
            this.$emit('update:storeIdArr', val);
            this.$emit('change', val);
        },
        //获取门店列表
        getStoreList() {
            this.sendRequest('Retail/Store/getStoreLimitList', {
                data: {
                    page: this.page,
                    limit: this.limit,
                    store_status: this.storeStatus,
                },
                success: (res) => {
                    if (res.status == 1) {
                        if (this.page == 1) {
                            this.dataList = res.data;
                        } else {
                            this.dataList.push.apply(this.dataList, res.data);
                        }
                        if (this.limit == res.data.length) {
                            this.page++;
                            this.getStoreList();
                        }
                    } else {
                        this.$message.error(res.message);
                    }
                },
            })
        },
    },
    created() {
        this.store_id_arr = [...this.storeIdArr];
        this.getStoreList();
    },
    watch: {
        storeIdArr(n) {
            this.store_id_arr = [...n];
        }
    }
})