qimall/addons/Store/backend/views/store-user-associated/index.php

<?php

use common\helpers\ComponentHelper;
ComponentHelper::loadComponentView('com-dialog-store');

?>

<div id="app" v-cloak>
    <el-card shadow="never" style="border:0;min-width: 1000px;" body-style="background-color: #f3f3f3;padding: 10px 0 0;">
        <div slot="header">
            <div class="all_flex" style="margin-bottom: 30px;align-items: flex-end;">
                <div class="top_title">门店会员</div>
                <div style="font-size:12px;color: #919191;flex:1;"></div>
            </div>
            <el-form ref="form" style="margin-bottom: 10px;" :model="searchInfo" label-width="96px" size="mini">
                <el-row :gutter="24">
                    <el-col :span="5" style="padding-left: 0;" class="top_form">
                        <el-form-item label="用户">
                            <el-input v-model="searchInfo.keyword" placeholder="请输入用户ID/昵称" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5" style="padding-left: 0;"  class="top_form">
                        <el-form-item label="关联时间">
                            <el-date-picker
                                    v-model="addTime"
                                    type="datetimerange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    value-format="yyyy-MM-dd HH:mm:ss"
                                    @change="addTimeChange"
                                    :default-time="['00:00:00', '23:59:59']"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <div>
                        <el-button @click="search" class="search_button all_button" size="small" type="primary">搜索</el-button>
                        <el-button type="danger" size="small" @click="resetSearch" v-if="show_clear_search_btn">重置</el-button>
                    </div>
                </el-row>
                <div>
                    <el-button class="all_button" type="primary" size="small" @click="addAssociatedUser">添加</el-button>
                    <el-button class="all_button" type="primary" size="small" @click="batchEditUserStore" style=" margin-left: 0px;" >会员批量修改</el-button>
                    <el-button class="all_button" type="primary" size="small" @click="userBatchMigration" style=" margin-left: 0px;" >门店批量修改</el-button>
                </div>
            </el-form>

            <el-table class="table-info" ref="multipleTable" @selection-change="scFormTab" @sort-change="sortChang" stripe :data="form" highlight-current-row style="width: 100%" v-loading="listLoading">
                <el-table-column type="selection" width="100"></el-table-column>
                <el-table-column prop="user_id" label="会员ID" width="200" ></el-table-column>
                <el-table-column label="会员" width="300">
                    <template slot-scope="scope">
                        <div class="table-info-img-text">
                            <el-image class="table-info-img circle" :src="scope.row.user.avatar_url">
                                <div slot="error" class="image-slot">
                                    <com-image src="/resources/img/common/default-avatar.png"></com-image>
                                </div>
                            </el-image>
                            <div class="no_user" style="width: 50px; bottom:20px;" v-if="scope.row.user.status == 0">黑名单</div>
                            <div class="table-info-text">
                                <div style="color:#000;">{{scope.row.user.nickname}}</div>
                                <div style="font-size: 12px;">{{scope.row.user.mobile}}</div>
                            </div>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="score" label="关联时间" width="180px" align="center">
                    <template slot-scope="scope">
                        {{scope.row.updated_at|dateTimeFormat('Y-m-d H:i:s')}}
                    </template>
                </el-table-column>
                <el-table-column label="操作" min-width="170px" align="center" fixed="right">
                    <template slot-scope="scope">
                        <el-button type="text" @click="editUserStore(scope.row.user_id)" class="all_text">修改</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 底部按钮操作 -->
            <div style="margin: 10px 20px 0;">
<!--                <el-checkbox class="up_checkbox_color" style="margin-right: 10px;" v-model="checkedAll" @change="tabAll"><div :class="{all_text:checkedAll}">全选当前页</div></el-checkbox>-->
                <div id="bottom_t" style="text-align: right;">
                    <el-input  v-model="page" placeholder="" size="small"  @keyup.enter.native="pageSearch" style="width:50px; float: right; text-align: center; margin: 0;padding: 0;"></el-input>
                    <el-pagination @current-change="pagination" background layout="prev, pager, next"
                                   :page-count="pageCount" :current-page="currentPage"></el-pagination>
                </div>
            </div>
        </div>

        <!-- 添加关联用户 -->
        <el-dialog :visible.sync="addUserFormDialogVisible" title="添加会员" @close="addUserFormDialogVisible = false" width="60%">
            <el-form :model="ruleForm" :rules="rules" size="small" ref="ruleForm" label-width="200px" v-loading="listLoading">
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="会员" prop="user_id">
                            <el-button type="primary" style="padding:9px 40px" size="small" @click.sync='chooseUser'>选择会员 </el-button>
                        </el-form-item>
                        <el-form-item label="选中会员" v-if="ruleForm.user_id">
                            <div style="display: inline-block; margin-left: 15px;">会员ID：<span>{{ruleForm.user_id}}</span></div>
                            <div style="display: inline-block; margin-left: 15px;">会员昵称：<span>{{ruleForm.nickname}}</span></div>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>


            <span slot="footer" class="dialog-footer">
                <el-button @click="addUserFormDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitForm('ruleForm')">确定</el-button>
            </span>
        </el-dialog>
        <el-dialog title="添加会员" :visible.sync="addUserDialogVisible" width="60%">
            <div class="search-box">
                <div class="input-item" style="padding-right: 10px">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="请输入会员ID" v-model="searchData.user_id"> </el-input>
                </div>
                <div class="input-item" style="padding-right: 10px">
                    <el-input @keyup.enter.native="getUser" size="small" placeholder="会员昵称/手机号" v-model="searchData.keyword"> </el-input>
                </div>
                <el-button type="primary" size="small" @click="getUserClick">搜索</el-button>
                <el-button type="warning" size="small" @click="clearSearch" v-if="searchData.keyword || searchData.user_id" style="padding: 9px 15px !important;">清除搜索条件</el-button>
            </div>
            <el-table :data="addUserList" stripe v-loading="userListLoading" style="width: 100%" @current-change="clickChange">
                <el-table-column prop="date" width="50">
                    <template slot-scope="scope">
                        <el-radio v-model="userInfo" :label="scope.row"><i></i></el-radio>
                    </template>
                </el-table-column>
                <el-table-column prop="id" label="ID" width="80"> </el-table-column>
                <el-table-column prop="avatar_url" label="会员" width="80">
                    <template slot-scope="scope">
                        <el-image style="width: 60px; height: 60px" :src="scope.row.avatar_url" fit="cover"></el-image>
                    </template>
                </el-table-column>
                <el-table-column prop="nickname" width="180"> </el-table-column>
                <el-table-column prop="mobile" label="手机号" width="200">
                </el-table-column>
                <el-table-column prop="level_name" label="会员等级">
                    <template slot-scope="scope">
                        <div v-if="scope.row.level > 0">等级{{scope.row.level_name}}</div>
                        <div v-else>普通用户</div>
                    </template>
                </el-table-column>
                <el-table-column prop="parent_nickname" label="已绑定推荐人">
                </el-table-column>
            </el-table>
            <div style="text-align: right;margin: 20px 0;">
                <el-pagination @current-change="userPagination" background layout="prev, pager, next" :page-count="addUserPageCount"></el-pagination>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="addUserDialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="selectUser">确 定</el-button>
        </span>
        </el-dialog>

        <!-- 门店批量修改 -->
        <el-dialog title="门店批量修改" :visible.sync="userMigrationDialogVisible" >
            <div>
                <el-form :model="userMigrationForm" :rules="userMigrationRules" ref="userMigrationForm" size="small" label-width="200px">

                    <el-form-item label="所属门店" prop="store_id">
                        <com-dialog-store :multiple="false" @selected="storeSelect" title="修改门店">
                            <el-button type="primary" size="mini">选择门店</el-button>
                        </com-dialog-store>
                    </el-form-item>
                    <el-form-item v-if="migrationStore">
                        <div style="max-width:400px;max-height: 300px;overflow-y: auto;background-color: #eee;margin: 5px 0;">
                            <div flex>
                                <div style="padding-right: 10px;flex-grow: 0">
                                    <com-image mode="aspectFill"
                                               :src="migrationStore.logo_img"></com-image>
                                </div>
                                <div style="flex-grow: 1;">
                                    <com-ellipsis :line="2">{{migrationStore.store_name}}
                                    </com-ellipsis>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="userMigrationDialogVisible=false" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="btnBossLoading" style="margin-bottom: 10px;" size="small" @click="submitForm('userMigrationForm')">保存</el-button>
        </span>
        </el-dialog>

        <el-dialog :title="userEditStoreFormTitle" :visible.sync="userEditDialogVisible" >
            <div>
                <el-form :model="userEditStoreForm" :rules="userEditRules" ref="userEditStoreForm" size="small" label-width="200px">

                    <el-form-item label="所属门店" prop="store_id">
                        <com-dialog-store :multiple="false" @selected="storeEditStoreSelect" title="修改门店">
                            <el-button type="primary" size="mini">选择门店</el-button>
                        </com-dialog-store>
                    </el-form-item>
                    <el-form-item v-if="userEditStore">
                        <div style="max-width:400px;max-height: 300px;overflow-y: auto;background-color: #eee;margin: 5px 0;">
                            <div flex>
                                <div style="padding-right: 10px;flex-grow: 0">
                                    <com-image mode="aspectFill"
                                               :src="userEditStore.logo_img"></com-image>
                                </div>
                                <div style="flex-grow: 1;">
                                    <com-ellipsis :line="2">{{userEditStore.store_name}}
                                    </com-ellipsis>
                                </div>
                            </div>
                        </div>
                    </el-form-item>
                </el-form>
            </div>
            <span slot="footer" class="dialog-footer">
            <el-button @click="userEditDialogVisible=false" type="default" size="small">取消</el-button>
            <el-button type="primary" :loading="btnBossLoading" style="margin-bottom: 10px;" size="small" @click="submitForm('userEditStoreForm')">保存</el-button>
        </span>
        </el-dialog>

    </el-card>

</div>
<script>
    const app = new Vue({
        el: '#app',
        props: {
            edit_user_url: {
                type: String,
                default: 'mall/user/edit'
            },
            import_user_url: {
                type: String,
                default: 'mall/user/import-users'
            },
        },
        data() {
            return {
                store_id:'',
                platform: '0',
                member_level: '0',
                mall_members: [],
                keyword: '',
                keyword_user_id: '',
                form: [],
                member: [],
                pageCount: 0,
                page: 1,
                member_page: 1,
                currentPage: null,
                listLoading: false,
                btnLoading: false,
                user_count: 0,
                updateTime: '',
                searchInfo: {
                    keyword: '',
                    related_start: '',//注册开始时间
                    related_end: '',//注册结束时间
                },
                addTime: '',//注册时间
                lastSpendTime: '',//上次消费时间
                visibleUserId: 0,
                checkedAll: false,
                selFormArr: [],//表格选中的元素
                sortFo: '', //排序方向：asc升序 desc降序 ''不排序
                sortPorp: '',//排序的元素属性名
                dataRenewBoo: false,
                userUrl: 'mall/user/index',
                install_addons: [],
                isFreezeCommission: 0,
                editRowId: 0,
                editColumnId: -1,


                searchData: {
                    user_id: null,
                    keyword: '',
                },


                //添加关联用户
                ruleForm: {
                    user_id: null,
                    nickname: ''
                },
                rules: {
                    'user_id': [{required: true, message: '会员不能为空'}],
                },

                userListLoading: false,
                addUserList: [],
                userInfo: {},
                addUserFormDialogVisible:false,
                addUserDialogVisible:false,

                // 门店批量修改
                userMigrationDialogVisible:false,
                btnBossLoading: false,
                userMigrationForm: {
                    store_id: null,
                    old_store_id:null,
                },
                migrationStore:null,
                userMigrationRules: {
                    // 'store_id': [{required: true, message: '门店不能为空'}]
                },

                //用户修改 and 用户批量修改
                userEditStoreFormTitle:null,
                userEditDialogVisible:false,
                userEditStoreForm: {
                    user_ids : [],
                    store_id: null,
                    old_store_id:null,
                },
                userEditRules: {
                    // 'store_id': [{required: true, message: '门店不能为空'}],
                    // 'userEditStoreForm.user_id': [{required: true, message: '会员不能为空'}],
                },
                userEditStore:null,
            };
        },
        computed: {
            show_clear_search_btn: function() {
                return !isEmpty(this.searchInfo.keyword)
                    ||!isEmpty(this.searchInfo.related_start)
                    ||!isEmpty(this.searchInfo.related_end)
            }
        },
        methods: {
            search() {
                // console.info(this.searchInfo);
                this.page = 1;
                this.getList();
            },
            pageSearch(){
                this.page_count = 1;
                this.getList();
            },
            pagination(currentPage) {
                this.checkedAll = false;
                this.selFormArr = [];
                this.page = currentPage;
                this.getList();
            },
            getList() {
                this.listLoading = true;
                let sort = '';
                let data = {
                    page: this.page,
                    keyword: this.searchInfo.keyword,
                    related_start: this.searchInfo.related_start,
                    related_end: this.searchInfo.related_end,
                    limit:10,
                    // search: JSON.stringify(this.searchInfo),
                }
                if(this.sortFo){
                    sort = this.sortPorp + ' ' + this.sortFo;
                    data.sort = sort;
                }
                let params = {
                    r: 'store/store-user-associated/index',
                    store_id: this.store_id,
                };
                params = Object.assign(params, data);
                request({
                    params: params,
                    method: 'get',
                }).then(e => {
                    //console.info(e);
                    if (e.data.code === 0) {
                        //console.log(e.data.data.user_list.list);
                        this.form = e.data.data.list;
                        this.pageCount = e.data.data.page_count;
                        this.currentPage = e.data.data.page;
                        this.user_count = e.data.data.count;
                        if(this.page_count !=1) this.pageCount = e.data.data.page_count;
                        this.currentPage =  parseInt(this.page);
                        if(this.checkedAll){
                            this.$nextTick(rrr => {
                                this.form.forEach(v => {
                                    this.$refs.multipleTable.toggleRowSelection(v);
                                })
                            })
                        }

                        // if(this.currentPage == 1){
                        //     this.updateTime = e.data.data.mall_data.updated_at;
                        //     this.userTagList = e.data.data.tag_list;
                        //     this.memberLabelList = e.data.data.member_label_List;
                        //     this.channelArr = e.data.data.channel;
                        //     this.levels = e.data.data.levels;
                        //     this.currencyList = e.data.data.currency_list;
                        //     for (const key in e.data.data.mall_data) {
                        //         let info = this.orderTotalArr.filter(v => v.type == key); //订单概况
                        //         if(info.length){
                        //             let index = this.orderTotalArr.findIndex(v => v.type==info[0].type);
                        //             this.orderTotalArr[index].value = e.data.data.mall_data[key];
                        //         }
                        //     }
                        // }
                    } else {
                        this.$message.error(e.data.msg);
                    }
                    this.listLoading = false;
                }).catch(e => {
                    this.listLoading = false;
                });
            },
            addTimeChange(v){
                this.searchInfo.related_start = v?v[0]:'';
                this.searchInfo.related_end = v?v[1]:'';
            },
            resetSearch(){
                this.searchInfo = {
                    keyword: '',
                    related_start: '',//关联开始时间
                    related_end: '',//关联结束时间
                }
                this.addTime = '';//注册时间
                this.lastSpendTime =  '';//上次消费时间
            },
            // 排序
            sortChang(column){
                // console.info(column);
                if(column.order == 'ascending'){
                    this.sortFo = 'asc';
                } else if(column.order == 'descending'){
                    this.sortFo = 'desc';
                } else {
                    this.sortFo = '';
                }
                this.sortPorp = column.prop;
                this.page = 1;
                this.getList();
            },
            // 修改表格表头样式
            tableStyle({row, column, rowIndex, columnIndex}){
                if(rowIndex === 0){
                    //  #FAFAFA #F0F7FF
                    return "background: #F0F7FF;"
                }
            },
            rowStyle({row, rowIndex}){
                console.info(rowIndex);
                if((rowIndex+1) %2 == 0){
                    return "background: #F5F7FB;"
                }
            },
            handleEditRow(row, scope){
                console.log('scope',scope);
                this.editRowId = row.id
                this.editColumnId = scope.column.id
            },

            addAssociatedUser() {
                this.ruleForm.user_id = null;
                this.ruleForm.nickname = null;
                this.addUserFormDialogVisible = true;
                this.clearSearch();
            },

            // 获取会员列表
            getUser() {
                let self = this;
                self.userListLoading = true;
                request({
                    params: {
                        r: 'store/store-user-associated/get-users',
                        page: self.addUserCurrPage,
                        ...self.searchData,
                    },
                    method: 'get',
                }).then(e => {
                    self.userListLoading = false;
                    if (e.data.code == 0) {
                        self.addUserList = e.data.data.list;
                        self.addUserPageCount = e.data.data.page_count;
                    } else {
                        self.$message.error(e.data.msg);
                        return false;
                    }
                }).catch(e => {
                    console.log(e);
                    self.$message.error('网络错误');
                    return false;
                });
            },

            getUserClick() {
                this.addUserCurrPage = 1;
                this.getUser();
            },
            // 选择会员
            chooseUser() {
                this.getUser();
                this.addUserDialogVisible = true;
            },
            // 会员列表分页
            userPagination(addUserCurrPage) {
                this.addUserCurrPage = addUserCurrPage;
                this.getUser();
            },
            // 选中会员确定回调
            selectUser() {
                console.log('selectUser === : ', this.userInfo);
                this.ruleForm.user_id = this.userInfo.id;
                this.ruleForm.nickname = this.userInfo.nickname;
                this.addUserDialogVisible = false;
            },
            // 会员列表选中
            clickChange(userInfo) {
                this.userInfo = userInfo;
            },
            // 清楚搜索条件
            clearSearch() {
                this.searchData.user_id = null;
                this.searchData.keyword = '';
                this.getUser();
            },

            submitForm(formName) {
                let self = this;
                if (formName === 'userEditStoreForm') {
                    if (!self.userEditStoreForm.user_id) {
                        self.$message.error('请选择关联会员');
                        return false;
                    }
                    if (!self.userEditStoreForm.store_id) {
                        self.$message.error('门店不能为空');
                        return false;
                    }
                }

                if (formName === 'userMigrationForm') {
                    if (!self.userMigrationForm .store_id) {
                        self.$message.error('门店不能为空');
                        return false;
                    }
                }

                const isStoreIdRequired = formName === 'ruleForm';

                const request_map = {
                    'ruleForm':  'store/store-user-associated/add-user-store',
                    'userMigrationForm':  'store/store-user-associated/batch-edit-user-store',
                    'userEditStoreForm':  'store/store-user-associated/edit-user-store',
                };

                const dialogVisible_map = {
                    'ruleForm':  'addUserFormDialogVisible',
                    'userMigrationForm':  'userMigrationDialogVisible',
                    'userEditStoreForm':  'userEditDialogVisible',
                };

                const visibilityProp = dialogVisible_map[formName];

                self.$refs[formName].validate((valid, obj) => {
                    console.log(valid, obj)
                    if (valid) {
                        self.btnLoading = true;
                        request({
                            params: {
                                r: request_map[formName],
                            },
                            method: 'post',
                            // data: Object.assign({
                            //     store_id: self.store_id
                            // }, self[formName]),
                            data: isStoreIdRequired ? Object.assign({ ...self[formName], store_id: self.store_id }) : self[formName],
                        }).then(e => {
                            self.btnLoading = false;
                            if (e.data.code == 0) {
                                self.$message.success('操作成功');
                            } else {
                                self.$message.error(e.data.msg);
                            }

                            this[visibilityProp] = false;
                            this.userEditStore = this.migrationStore = null;
                            this.getList();
                        }).catch(e => {
                            self.btnLoading = false;
                            console.log(e);
                            self.$message.error('网络错误');
                            return false;
                        });
                    } else {
                        self.btnLoading = false;
                        var msg = '';
                        for (let index in obj) {
                            msg = msg + '*' + obj[index][0].message + ' ';
                        }
                        this.$message({
                            message: msg,
                            type: 'error'
                        });
                        return false;
                    }
                });
            },

            storeSelect(param) {
                this.migrationStore = param;
                this.userMigrationForm.store_id = param.id;
            },
            editUserStore(id) {
                this.userEditStoreFormTitle = '修改';
                this.userEditDialogVisible = true;
                this.userEditStoreForm.user_id = id;
                this.userEditStoreForm.old_store_id = this.store_id;
                this.userEditStore = null;
            },
            storeEditStoreSelect(param) {
                this.userEditStore = param;
                this.userEditStoreForm.store_id = param.id;
            },

            batchEditUserStore() {
                this.userEditStoreFormTitle = '会员批量修改';
                this.userEditDialogVisible = true;
                this.userEditStore = null;
                this.userEditStoreForm.old_store_id = this.store_id;

                if(this.selFormArr.length > 0){
                    let userArr = []
                    this.selFormArr.forEach(v => {
                        userArr.push(v.user_id);
                    })
                    this.userEditStoreForm.user_id = userArr.join();
                    // console.log('user_id ========>', this.userEditStoreForm.user_id);
                }
            },

            userBatchMigration() {
                this.userMigrationDialogVisible = true;
                this.userMigrationForm.old_store_id = this.store_id;
            },

            scFormTab(sel){
                // console.info(sel);
                if(sel.length == this.form.length){
                    this.checkedAll = true;
                }else {
                    this.checkedAll = false;
                }
                this.selFormArr = sel;
            },
        },
        mounted: function () {
            getQuery('memberLabelIds')? this.searchInfo.memberLabelIds.push( getQuery('memberLabelIds') ):0;
            this.page = getQuery('page') ? getQuery('page') : 1;
            this.store_id = getQuery('store_id');
            console.log('store =>>>> ', this.store_id)
            // if(this.store_id){
            //     this.$set(this.searchInfo,'lableValue',parseInt(this.store_id));
            // }
            this.getList();
        },
    });
</script>
<style>
    @media screen and (max-width: 1500px) {
        #app {
            min-width: 1270px;
        }
    }
    .top_title{
        font-weight: 600;
        font-size: 18px;
        margin-right: 12px;
    }
    .table-body {
        padding: 20px;
        background-color: #fff;
    }

    .table-info .el-button {
        /* padding: 0; */
        border: 0;
        margin: 0 5px;
    }

    .input-item {
        display: inline-block;
        width: 250px;
        margin: 0 0 20px;
    }

    .input-item .el-input__inner {
        border-right: 0;
    }

    .input-item .el-input__inner:hover {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input__inner:focus {
        border: 1px solid #dcdfe6;
        border-right: 0;
        outline: 0;
    }

    .input-item .el-input-group__append {
        background-color: #fff;
        border-left: 0;
        width: 10%;
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        padding: 0;
    }

    .input-item .el-input-group__append .el-button {
        margin: 0;
    }

    .select {
        float: left;
        width: 100px;
        margin-right: 10px;
    }


    .el-table th>.cell{
        color: #333;
        font-weight: bold;
        font-size: 14px;
    }

    /* .el-table__footer-wrapper, .el-table__header-wrapper{
     border-bottom: 1.4px solid #D6D6D6;
    } */

    .stat_details{
        padding: 5px 0 20px;
        display: flex;
    }

    .order_module{
        flex: 1;
        background: #F5F7FA;;
        margin: 0 5px;
        padding: 20px 25px;
        border-radius: 3px;
        text-align: center;
        border: 1px solid #F5F7FA;
    }

    .se_module{
        background: #E8F3FE;
        border: 1px solid #2E8FF4;
        color: #2E8FF4;
    }

    .order_module:last-child{
        margin-right: 0;
    }

    .order_module:first-child{
        margin-left: 0;
    }

    .price{
        font-size: 22px;
        font-weight: bold;
    }

    .oirder_modul_title{
        font-size: 12px;
        margin-bottom: 10px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .oirder_modul_title .text{
        margin-right: 4px;
    }
    .stat_icon{
        font-size: 19px;
        color: #BFBFBF;
    }

    .el-col {
        padding: 0;
    }

    .all_flex{
        display: flex;
    }

    .value_input  .el-form-item__content{
        display: flex;
    }

    .value_input .el-input-group input{
        width: 58px;
        border-right: 0;
    }

    .value_input .el-input-group{
        display: flex;
        width: 100px;
    }

    .value_input .el-input-group__append{
        display: flex;
        align-items: center;
        justify-content: center;
        background: #FFF;
    }

    .sel_input .el-input-group__append{
        border: 1px solid #03C5FF;
        border-left: 0;
    }

    .search_button{
        /* margin-left: 108px; */
        margin-right: 10px;
        width: 80px;
    }


    .el-table_1_column_3  .cell{
        display: flex;
    }
    .user_img{
        position: relative;
        margin-right: 8px;
        height: 50px;
        width: 50px;
    }

    .no_user{
        position: absolute;
        bottom: 0;
        width: 100%;
        text-align: center;
        white-space: nowrap;
        line-height: normal;
        background: #0000006b;
        color: #FFF;
        border-radius: 30px;
    }

    .el-popover{
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        /* min-width: 80px; */
    }

    .el-button+.el-button{
        margin-left: 0;
    }
    .el-popover .el-button--text{
        color: #2E8FF4;
    }

    .bottom_but{
        margin-right: 20px;
        border: 1px solid #DCDFE6;
        padding: 12px 20px;
        border-radius: 4px;
        line-height: 14px;
    }

    .bottom_but:hover{
        cursor:pointer
    }

    .title_bu:hover{
        cursor:pointer;
    }

    .el-form-item .el-form-item__label{
        font-size: 12px;
    }

    .top_form .el-form-item__label{
        width: 64px !important;
    }

    .top_form  .el-form-item__content{
        margin-left: 64px !important;
    }

    .el-form-item__content .el-range-editor{
        width: 100%;
    }

    .el-form-item__content .el-range-editor .el-icon-time{
        display: none;
    }

    .el-form-item__content .el-range-editor .el-range-separator{
        padding: 0;
        width: 8%;
    }

    .el-form-item__content .el-range-editor input{
        width: 49%;
    }
    .default-avatar{
        width: 50px;
        height: 50px;
        border-radius: 50%;
    }

    .order-status-container {
        display: flex;
        justify-content: flex-start;
        text-align: left;
    }
</style>