修改bug,店铺管理新增、查询

“dzb”

2022-10-09 2bb0e066fdc522beb51dd13f6a72cd67bd5d6a58

修改bug,店铺管理新增、查询

 src/views/operate/baseSetting/illegalBuild/index.vue

@@ -48,13 +48,13 @@
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '修改违建信息' :'查看违建信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    v-if="dialogUpdate" :before-close="handleClose2">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                        <!-- <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
@@ -66,7 +66,7 @@
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </div>
                        </div> -->
                    </div>
                    <div class="pagination">
                        <el-pagination background :current-page="currentPage" layout="prev, pager, next"
@@ -254,6 +254,17 @@
                    done();
                })
                .catch(_ => { });
        },
        handleClose2(done){
            if(this.updateFlag){
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
            }else{
                done();
            }
        }
    }
}

 src/views/operate/baseSetting/violation/index.vue

@@ -16,7 +16,7 @@
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新增违规类型</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增违规类型" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser  @changeDialog=changeDialog />
                        <createUser @changeDialog=changeDialog />
                    </el-dialog>
                </div>
            </div>
@@ -32,13 +32,13 @@
                    </el-table-column>
                    <el-table-column prop="number" label="违规事项编号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="所属类型" min-width="10">
                    <el-table-column prop="typeThird" label="所属类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeFirst" label="所属大类" min-width="10">
                    <el-table-column prop="typeSecond" label="所属大类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeSecond" label="所属小类" min-width="10">
                    <el-table-column prop="typeFirst" label="所属小类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeThird" label="案由" min-width="45">
                    <el-table-column prop="type" label="案由" min-width="45">
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="10">
                        <template slot-scope="scope">
@@ -52,14 +52,14 @@
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    v-if="dialogUpdate" :before-close="handleClose2">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                        <!-- <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
@@ -71,7 +71,7 @@
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </div>
                        </div> -->
                    </div>
                    <div class="pagination">
                        <el-pagination background :current-page="currentPage" layout="prev, pager, next"
@@ -89,7 +89,7 @@
import createUser from "./createUser"
export default {
    components: {
        updateUser,createUser
        updateUser, createUser
    },
    data() {
        return {
@@ -132,16 +132,16 @@
    },
    methods: {
        // 批量删除
        mulDelete(idArr){
        mulDelete(idArr) {
            console.log(idArr);
            this.$axios({
                method:'delete',
                url:'sccg/violations/batch_delete?ids='+idArr,
            }).then(res=>{
                method: 'delete',
                url: 'sccg/violations/batch_delete?ids=' + idArr,
            }).then(res => {
                this.getUserList();
                this.$message({
                    message:res.message,
                    type:res.code === 200 ? 'success' : 'warning'
                    message: res.message,
                    type: res.code === 200 ? 'success' : 'warning'
                })
            })
        },
@@ -277,11 +277,24 @@
            this.currentPage = page;
            this.getUserList();
        },
        changeDialog({flag}) {
        changeDialog({ flag }) {
            this.dialogCreate = flag;
            this.dialogUpdate = flag;
            this.getUserList();
        },
        handleClose2(done) {
            if (this.updateFlag) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.dialogCreate = false;
                        this.dialogUpdate = false;
                        done();
                    })
                    .catch(_ => { });
            } else {
                done();
            }
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {

 src/views/operate/disposal/casepool/pool/index.vue

@@ -75,7 +75,7 @@
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="20">
                        <template slot-scope="scope">
                            <div class="operation">
                            <div class="operation" v-if="statusArr[0]===0">
                                <span @click="handleFind(scope.row)">上报</span>
                                <span class="line">|</span>
                                <span @click="handleDispatch(scope.row)">调度</span>

 src/views/operate/fivepack/shop/components/createUser/index.vue

@@ -2,46 +2,43 @@
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                <el-form ref="user" label-width="140px" autoComplete="on" :model="store" :rules="createUserRules"
                    label-position="right">
                    <!-- 店铺类型 -->
                    <el-form-item class="optionItem" label="店铺类型:" prop="storetype">
                        <el-select v-model="user.storetype" placeholder="选择店铺/门店类型">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                        <el-select v-model="store.storetype" placeholder="选择店铺/门店类型">
                            <el-option v-for="item in shopTypeList" :key="item.name" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 店铺名称 -->
                    <el-form-item class="optionItems" label="店铺名称:" prop="storename">
                        <el-input v-model="user.password" type="password" placeholder="请填写店铺名称"></el-input>
                        <el-input v-model="store.storename" placeholder="请填写店铺名称"></el-input>
                    </el-form-item>
                    <!-- 负责人 -->
                    <el-form-item class="optionItem" label="负责人:" prop="username">
                        <el-input v-model="user.username" placeholder="请填写用户姓名"></el-input>
                    <el-form-item class="optionItem" label="负责人:" prop="owner">
                        <el-input v-model="store.owner" placeholder="请填写店铺负责人名字"></el-input>
                    </el-form-item>
                    <!-- 店铺描述 -->
                    <el-form-item class="optionItem" label="店铺描述:" prop="mobile">
                        <el-input type="textarea" v-model="user.mobile" placeholder="输入部门描述"></el-input>
                    <el-form-item class="optionItem" label="店铺描述:" prop="storedesc">
                        <el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4}" maxlength="300" show-word-limit
                            v-model="store.storedesc" placeholder="输入部门描述"></el-input>
                        <!-- <el-input type="textarea" v-model="user.storedesc" placeholder="输入部门描述"></el-input> -->
                    </el-form-item>
                    <!-- 联系方式 -->
                    <el-form-item class="optionItem" label="联系方式:" prop="email">
                        <el-input v-model="user.email" placeholder="请填写店铺联系方式"></el-input>
                    <el-form-item class="optionItem" label="联系方式:" prop="contact">
                        <el-input v-model="store.contact" placeholder="请填写店铺联系方式"></el-input>
                    </el-form-item>
                    <!-- 店铺地址 -->
                    <el-form-item class="optionItem" label="店铺地址:" prop="userType">
                        <el-select v-model="user.userType" placeholder="请填写店铺详细地址">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    <el-form-item class="optionItem" label="店铺地址:" prop="storeaddr">
                        <el-input v-model="store.storeaddr" placeholder="请填写店铺详细地址"></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </main>
        <footer>
            <div class="optionBtn">
                <el-button class="btn reset">取消</el-button>
                <el-button class="btn reset" @click="handleBack">取消</el-button>
                <el-button type="primary" class="btn submit" @click="handleUser">确定</el-button>
            </div>
        </footer>
@@ -53,7 +50,7 @@
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("负责人不能为空"));
            }else{
            } else {
                callback();
            }
        };
@@ -66,9 +63,9 @@
        };
        const validateTruename = (rule, value, callback) => {
            if (!value) {
                callback();
                callback(new Error('店铺地址不能为空'));
            } else {
               callback(new Error('店铺地址不能为空'))
                callback()
            }
        };
        const validatePhone = (rule, value, callback) => {
@@ -78,17 +75,26 @@
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                }else{
                    callback();
                }
            }
        };
        const validateMail = (rule, value, callback) => {
            if (value) {
                callback();
            }else{
            } else {
                callback(new Error('店铺名称不能为空'))
            }
        };
        const validateType = (rule, value, callback) => {
            if (!value) {
                callback(new Error('门店类型不能为空'));
            } else { 
                callback();
            }
        };
        const validateDesc = (rule, value, callback) => {
            if (!value) {
                callback();
            } else {
@@ -96,18 +102,23 @@
            }
        };
        return {
            user: {
                contact:'',
                idcardinfo:'',
                owner:'',
                storeaddr:'',
                storename:'',
                storedesc:'',
                storetype:'',
            store: {
                contact: '',
                idcardinfo: '',
                owner: '',
                storeaddr: '',
                storename: '',
                storedesc: '',
                storetype: '',
            },
            createUserRules: {
                owner: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                storetype:[
                    {
                        required:true,trigger:'change', validator:validateType,
                    }
                ],
                idcardinfo: [
                    { required: true, trigger: "blur", validator: validatePass },
@@ -119,51 +130,61 @@
                    { required: true, trigger: "blur", validator: validatePhone },
                ],
                storename: [
                    { required: false, trigger: "blur", validator: validateMail },
                    { required: true, trigger: "blur", validator: validateMail },
                ],
                storedesc: [
                    { required: true, trigger: "blur", validator: validateType },
                    { required: false, trigger: "blur", validator: validateDesc },
                ],
            },
            roleList: [
                { name: '角色1', value: 1 }, { name: '角色2', value: 2 }
            shopTypeList: [
                { name: '类型1', value: 1 }, { name: '类型2', value: 2 }
            ],
            typeList: []
        }
    },
    created() {
        const that = this;
        // 获取角色列表
        // this.$axios.get('')
        // 获取用户类型列表
        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
        //     console.log(res);
        // })
        // 获取全部部门列表
        this.$axios.get('sccg/depart/page').then(res => {
            that.typeList = res.data.records;
        })
    },
    methods: {
        handleUser() {
            const { user } = this;
            this.$axios.post('sccg/store/storeinfo/add',{
                contact:'18728108911',
                    idcardinfo:'511025199910028213',
                    owner:'测试人员',
                    storeaddr:'四川省',
                    storename:'测试店一',
                    storephoto:'111',
                    storescore:0,
            })
            .then(res => {
                console.log(res);
                // if (res.code === 200) {
                //     console.log(1);
                //     this.$emit('sendDialog', { flag: false });
                // }
            const { store } = this;
            console.log('in');
            this.$refs.user.validate((valid)=>{
                console.log(valid);
                if(valid){
                    this.$axios({
                        method:'post',
                        url:'sccg/store/storeinfo/add',
                        data:{
                            contact:store.contact,
                            idcardinfo:'511025184612310215',
                            owner:store.owner,
                            storeaddr:store.storeaddr,
                            storename:store.storename,
                        }
                    })
                    .then(res=>{
                        console.log(res);
                        if(res.code===200){
                            this.$message({
                                type:'success',
                                message:'添加成功',
                            })
                            this.$emit('sendDialog',{flag:false});
                        }else{
                            this.$message({
                                type:'error',
                                message:res.message,
                            })
                        }
                    })
                }else{
                    return false;
                }
            })
        },
        handleBack(){
            this.$emit('sendDialog',{flag:false})
        }
    },
    props: ['sendDialog']
}
@@ -228,6 +249,7 @@
        display: flex;
        justify-content: flex-end;
        padding: 0 20px;

        .optionBtn {
            display: flex;
            margin-top: 20px;
@@ -237,5 +259,14 @@
            }
        }
    }

    ::v-deep .el-textarea__inner {
        background-color: #09152f;
        border: 1px solid #17324c;
    }

    ::v-deep .el-input__count {
        background-color: #09152f;
    }
}
</style>

 src/views/operate/fivepack/shop/components/header/index.vue

@@ -21,7 +21,7 @@

        </div>
        <div class="footer">
            <el-dialog :visible.sync="dialogCreate" title="添加店铺" width="45%" v-if="dialogCreate">
            <el-dialog :visible.sync="dialogCreate" title="添加店铺" width="45%" v-if="dialogCreate" @close="handleClose">
                <createUser @sendDialog="sendDialog" />
            </el-dialog>
        </div>
@@ -47,6 +47,10 @@
            console.log(flag);
            this.dialogCreate = flag.flag;
            this.$emit('setDialog', { flag: true })
        },
        handleClose(){
            console.log(this.dialogCreate);
            console.log(1);
        }
    },
    props: ['setDialog', 'getSearch', 'flag'],

 src/views/operate/fivepack/shop/components/main/index.vue

@@ -52,7 +52,7 @@
    data() {
        return {
            tableData: [],
            search: "111",
            search: "",
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',

 src/views/systemSetting/baseSetting/department/createUser/index.vue

@@ -18,7 +18,12 @@
                    </el-form-item>
                    <!-- 部门类型 -->
                    <el-form-item class="optionItem" label="部门类型:" prop="departType">
                        <el-input v-model="depart.departType" placeholder="请选择部门类型"></el-input>
                        <el-select v-model="depart.departType" placeholder="请选择部门类型">
                            <el-option v-for="item in departTypeList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- <el-input v-model="depart.departType" placeholder="请选择部门类型"></el-input> -->
                    </el-form-item>
                    <!--添加人员  -->
                    <el-form-item class="optionItem add" label="添加人员:">
@@ -35,7 +40,7 @@
                                    <div @click="addUser">添加</div>
                                </div>
                                <div class="scrollWrap">
                                    <el-checkbox-group :max="3" v-model="checkedUser" @change="handleCheckedUserChange">
                                    <el-checkbox-group v-model="checkedUser">
                                        <el-checkbox v-for="user in userList" :label="user.id" :key="user.id">
                                            {{user.username}}
                                        </el-checkbox>
@@ -113,6 +118,7 @@
            departList: [],
            checkedUser: [],
            openUser: false,
            departTypeList: [],
        }
    },
    created() {
@@ -121,28 +127,43 @@
        this.getDepartTree();
        // 获取用户列表
        this.getUserList();
        // 获取部门类型列表
        this.getDepartTypeList();
    },
    methods: {
        handleUser() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { depart, checkedUser } = this;
                    const { depart, checkedUser, userList } = this;
                    console.log(depart);
                    console.log(checkedUser);
                    this.$axios.post('/sccg/depart/create', {
                        departName: depart.departName,
                        parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes
                    const arr = [];
                    checkedUser.forEach(item => {
                        userList.forEach(child => {
                            if (item === child.id) {
                                arr.push({ isLeader: 0, userId: item,});
                            }
                        })
                    })
                    this.$axios({
                        method: 'post',
                        url:'/sccg/depart/create',
                        data: {
                            departName: depart.departName,
                            parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes,
                            departManagerList: arr
                        }
                    }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message:res.message,
                                type:'success'
                                message: res.message,
                                type: 'success'
                            })
                            this.refresh();
                        }else if(res.code ===2001){
                        } else if (res.code === 2001) {
                            this.$message({
                                message:res.message,
                                type:'error'
                                message: res.message,
                                type: 'error'
                            })
                            this.refresh();
                        }
@@ -165,39 +186,33 @@
        },
        // 获取所有用户信息
        getUserList() {
            const that = this;
            const { currentPage, pageSize, search } = this;
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            this.$axios.get(`sccg/admin/list`).then(res => {
                if (res.code === 200) {
                    console.log(res)
                    this.userList = res.data.records;
                    console.log(this.userList);
                }
            })
        },
        handleCheckedUserChange(value) {
            // console.log(value);
            if (value.length > 3) {
                console.log(this.checkedUser);
                this.$message({
                    type: 'warning',
                    message: '最多只能添加三个成员'
                })
            }
            // let checkedCount = value.length;
            // this.checkAll = checkedCount === this.cities.length;
            // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        addUser() {
            console.log(this.checkedUser);
            this.openUser = false;
        },
        handleClose(){
            this.$emit('changMyDialog',{flag:false});
        handleClose() {
            this.$emit('changMyDialog', { flag: false });
        },
        // 获取部门类型
        getDepartTypeList() {
            this.$axios({
                method: 'get',
                url: 'sccg/dict/query_depart_type',
            })
                .then(res => {
                    console.log(res);
                    this.departTypeList = res.data;
                })
        }
    },
    props: ['refresh','changMyDialog']
    props: ['refresh', 'changMyDialog']
}
</script>
<style lang="scss" scoped>

 src/views/systemSetting/baseSetting/department/index.vue

@@ -12,7 +12,7 @@
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新增部门</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增部门信息" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        :before-close="handleClose2">
                        <createUser :refresh="context==='' ? getUserList : search " @changMyDialog="changMyDialog" />
                    </el-dialog>
                </div>
@@ -36,8 +36,8 @@
                    </el-table-column>
                    <el-table-column prop="departDes" label="部门描述" min-width="10">
                    </el-table-column>
                    <el-table-column prop="createTime" label="创建时间" min-width="10">
                    </el-table-column>
                    <!-- <el-table-column prop="createTime" label="创建时间" min-width="10">
                    </el-table-column> -->
                    <el-table-column prop="status" label="启用" min-width="5">
                        <template slot-scope="scope">
                            <el-switch class="switchStyle" v-model="scope.row.status" active-text="开" inactive-text="关"
@@ -307,15 +307,26 @@
            this.search();
        },
        // 关闭dialog
        changMyDialog({flag}) {
        changMyDialog({ flag }) {
            this.dialogUpdate = flag;
            this.dialogCreate = flag;
        },
        handleClose(done) {
            if (this.updateFlag) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.dialogUpdate = false;
                        this.dialogCreate = false;
                        done();
                    })
                    .catch(_ => { });
            } else {
                done();
            }
        },
        handleClose2(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogUpdate = false;
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });

 src/views/systemSetting/baseSetting/role/createUser/index.vue

@@ -10,12 +10,11 @@
                    </el-form-item>
                    <!-- 角色类型 -->
                    <el-form-item class="optionItems" label="角色类型:" prop="status">
                        <el-input v-model="role.type" placeholder="请选择角色类型"></el-input>
                        <!-- <el-select v-model="role.type" placeholder="请选择角色类型">
                            <el-option v-for="item in typeList" :key="item.name" :label="item.name" :value="item.value"
                                :disabled="item.disabled">
                        <!-- <el-input v-model="role.type" placeholder="请选择角色类型"></el-input> -->
                        <el-select v-model="role.type" placeholder="请选择角色类型">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select> -->
                        </el-select>
                    </el-form-item>
                    <!-- 角色描述 -->
                    <el-form-item class="optionItem" label="角色描述:" prop="description">
@@ -83,20 +82,13 @@
                    { required: false, trigger: "blur", validator: validateTruename },
                ],
            },
            typeList:[],
        }
    },
    created() {
        const that = this;
        // 获取角色列表
        // this.$axios.get('')
        // 获取用户类型列表
        // this.$axios.get('sccg/admin/list',{userType:0}).then(res=>{
        //     console.log(res);
        // })
        // 获取全部部门列表
        // this.$axios.get('sccg/depart/page').then(res => {
        //     that.typeList = res.data.records;
        // })
        this.getRoleTypeList(); 
    },
    methods: {
        handleUser() {
@@ -119,6 +111,17 @@
        },
        handleStop(){
            this.refresh();
        },
        // 获取角色类型
        getRoleTypeList(){
            this.$axios({
                method:'get',
                url:'sccg/dict/query_role_type',
            })
            .then(res=>{
                console.log(res);
                this.typeList = res.data; 
            })
        }
    },
    props: ['refresh']

 src/views/systemSetting/baseSetting/role/index.vue

@@ -12,7 +12,7 @@
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        :before-close="handleClose2">
                        <createUser :refresh="context==='' ? getUserList : search" />
                    </el-dialog>
                </div>
@@ -76,7 +76,7 @@
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                        <!-- <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
@@ -88,7 +88,7 @@
                                    :value="item.value" :disabled="item.disabled">
                                </el-option>
                            </el-select>
                        </div>
                        </div> -->
                    </div>
                    <div class="pagination">
                        <el-pagination background :current-page="currentPage" layout="prev, pager, next"
@@ -349,13 +349,24 @@
            this.dialogView = flag;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
            if(this.updateFlag){
                this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogUpdate = false;
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
            }else{
                done();
            }
        },
        handleClose2(done){
            this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => { });
        }
    }
}

 src/views/systemSetting/baseSetting/role/updateUser/index.vue

@@ -4,8 +4,8 @@
            <div class="mainContent">
                <div class="my-tree">
                    <div class="my-tree__wrap">
                        <el-tree ref="tree" :data="roleList" :props="defaultProps"  show-checkbox
                            @check="handleCheck" :default-checked-keys="checkedIds" default-expand-all node-key="id">
                        <el-tree ref="tree" :data="roleList" :props="defaultProps" show-checkbox @check="handleCheck"
                            :default-checked-keys="checkedIds" default-expand-all node-key="id">
                        </el-tree>
                    </div>
                    <div class="my-tree__bottom"></div>
@@ -45,26 +45,6 @@
        this.getMenuList();
    },
    methods: {
        handleUser() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { role } = this;
                    console.log(role);
                    this.$axios.post('/sccg/role/update/' + role.id, {
                        id: role.id,
                        status: role.status,
                        description: role.description,
                        name: role.name,
                        sort: 0
                    }).then(res => {
                        this.$emit('changeDialog', { dialogUpdate: false });
                        this.getUserList();
                    })
                } else {
                    return false;
                }
            })
        },
        // 获取系统菜单
        getMenuList() {
            this.$axios({
@@ -75,14 +55,6 @@
                    this.roleList = res.data;
                })
        },
        // 点击树节点
        handleNodeClick({ title, id }) {
            // console.log(obj);
            this.role.sort = title;
            this.treeLabel = title;
            this.treeId = id;

        },
        // 树形控件复选框点击事件
        handleCheck(data, checked) {
            console.log(checked.checkedKeys);
@@ -92,45 +64,47 @@
        // 保存role
        saveRole() {
            this.resCheckedIds = [];
            const {userInfo} = this;
            const { userInfo } = this;
            this.resCheckedIds = this.checkedIds;
            this.$axios({
                method:'post',
                url:'sccg/role/allocMenu?roleId='+userInfo.id + '&menuIds=' + this.checkedIds,
                method: 'post',
                url: 'sccg/role/allocMenu?roleId=' + userInfo.id + '&menuIds=' + this.checkedIds,
            })
            .then(res=>{
                if(res.code === 200){
                    this.$message({
                        type:'success',
                        message:'修改角色权限成功',
                    })
                    this.getRoleMenus(userInfo.id);
                }else{
                    this.$message({
                        type:'warning',
                        message:res.message
                    })
                }
            })
                .then(res => {
                    if (res.code === 200) {
                        this.$message({
                            type: 'success',
                            message: '修改角色权限成功',
                        })
                        this.getRoleMenus(userInfo.id);
                        this.$emit('changeDialog', { flag: false });
                        this.getUserList();
                    } else {
                        this.$message({
                            type: 'warning',
                            message: res.message
                        })
                    }
                })
            // this.$emit('changeDialog',{dialogUpdate:false});
        },
        // 消除role
        resetRole() {
            this.resCheckedIds = [];
            this.$emit('changeDialog',{dialogUpdate:false});
            this.$emit('changeDialog', { dialogUpdate: false });
        },
        // 获取角色菜单
        getRoleMenus(roleId){
        getRoleMenus(roleId) {
            this.$axios({
                method:'get',
                url:`sccg/role/listMenu/${roleId}`
                method: 'get',
                url: `sccg/role/listMenu/${roleId}`
            })
            .then(res=>{
                this.checkedIds = [];
                res.data.forEach(item=>{
                    this.checkedIds.push(item.id);
                .then(res => {
                    this.checkedIds = [];
                    res.data.forEach(item => {
                        this.checkedIds.push(item.id);
                    })
                })
            })
        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
@@ -140,10 +114,12 @@
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        text-align: left;
        padding: 50px 55px;
        background-color: #09152f;

        .mainContent {
            .my-tree {
                height: 200px;
@@ -151,11 +127,13 @@
                background-color: #17324c;
                position: relative;
                border-radius: 4px;
                .my-tree__wrap{

                .my-tree__wrap {
                    overflow: scroll;
                    height: 200px;
                }
                .my-tree__bottom{

                .my-tree__bottom {
                    position: absolute;
                    left: 0px;
                    bottom: 0px;
@@ -164,7 +142,8 @@
                    height: 20px;
                    border-bottom-left-radius: 4px;
                }
                .my-tree__right{

                .my-tree__right {
                    position: absolute;
                    right: 0px;
                    top: 0px;
@@ -191,6 +170,7 @@
    margin-top: 10px;
    display: flex;
    justify-content: space-between;

    .el-button {
        padding: 10px 20px;
        border-radius: 4px;

 src/views/systemSetting/baseSetting/user/components/createUser/index.vue

@@ -4,17 +4,17 @@
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- 用户名称
                    <el-form-item class="optionItem" label="用户名称:" prop="nickName">
                        <el-input v-model="user.nickName" placeholder="填写用户名称"></el-input>
                    </el-form-item> -->
                    <!-- 用户名称 -->
                    <el-form-item class="optionItem" label="用户名称:" prop="username">
                        <el-input v-model="user.username" placeholder="填写用户名称"></el-input>
                    </el-form-item>
                    <!-- 用户密码 -->
                    <el-form-item class="optionItems" label="用户密码:" prop="password">
                        <el-input v-model="user.password" type="password" placeholder="请输入用户密码"></el-input>
                    </el-form-item>
                    <!-- 所属用户姓名 -->
                    <el-form-item class="optionItem" label="所属用户姓名:" prop="username">
                        <el-input v-model="user.username" placeholder="请填写用户姓名"></el-input>
                    <el-form-item class="optionItem" label="所属用户姓名:" prop="nickName">
                        <el-input v-model="user.nickName" placeholder="请填写用户姓名"></el-input>
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item class="optionItem" label="性别:" prop="sex">
@@ -32,7 +32,7 @@
                    </el-form-item>
                    <!-- 所属手机号码 -->
                    <el-form-item class="optionItem" label="所属手机号码:" prop="mobile">
                        <el-input v-model="user.mobile" placeholder="请填写手机号码"></el-input>
                        <el-input v-model="user.mobile" maxlength="11" placeholder="请填写手机号码"></el-input>
                    </el-form-item>
                    <!-- 邮箱地址 -->
                    <el-form-item class="optionItem" label="邮箱地址:" prop="email">
@@ -40,31 +40,38 @@
                    </el-form-item>
                    <!-- 选择角色 -->
                    <el-form-item class="optionItem" label="选择角色:" prop="role">
                        <el-select v-model="user.role" placeholder="请选择所属角色">
                        <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags>
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- <el-select v-model="user.role" placeholder="请选择所属角色">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                        </el-select> -->
                    </el-form-item>
                    <!-- 用户类型 -->
                    <el-form-item class="optionItem" label="用户类型:" prop="userType">
                        <el-select v-model="user.userType" placeholder="请选择用户类型">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id"
                                :disabled="item.disabled">
                            <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 座机/分机 -->
                    <el-form-item class="optionItem" label="座机/分机:" prop="zj">
                        <div class="optionHandleSp">
                            <el-input class="areaNumber" v-model="user.zj.areaNumber" placeholder="电话区号">
                    <div class="user-item">
                        <el-form-item label="座机/分机:" prop="zjarea">
                            <el-input v-model="user.zjarea" placeholder="电话区号">
                            </el-input>
                            <el-input class="telNumber" v-model="user.zj.phoneNumber" placeholder="电话号码">
                        </el-form-item>
                        <el-form-item prop="zjnumber" class="left-px">
                            <el-input v-model="user.zjnumber" placeholder="电话号码">
                            </el-input>
                            <el-input class="moreNumber" v-model="user.zj.moreNumber" placeholder="分机号码">
                        </el-form-item>
                        <el-form-item prop="zjother" class="left-px">
                            <el-input v-model="user.zjother" placeholder="分机号码">
                            </el-input>
                        </div>
                    </el-form-item>
                        </el-form-item>
                    </div>
                    <!-- 所属部门 -->
                    <el-form-item class="optionItem" label="所属部门:" prop="departmentId">
                        <el-select v-model="user.departmentId" placeholder="请选择所属部门" @change="getDepartName">
@@ -101,13 +108,13 @@
<script>
export default {
    data() {
        // const validateNickname = (rule, value, callback) => {
        //     if (!value) {
        //         callback(new Error("用户名称不能为空"));
        //     }else{
        //         callback();
        //     }
        // };
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户名称不能为空"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户密码不能为空"));
@@ -115,7 +122,7 @@
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                }else{
                } else {
                    callback();
                }
            }
@@ -127,7 +134,7 @@
                const rep = /^[\u4E00-\u9FA5]{2,4}$/;
                if (!rep.test(value)) {
                    callback("请输入正确的用户姓名");
                }else{
                } else {
                    callback();
                }
            }
@@ -139,19 +146,23 @@
                const rep = /(^1[3|4|5|7|8|9]\d{9}$)|(^09\d{8}$)/
                if (!rep.test(value)) {
                    callback("请输入正确的手机号码");
                }else{
                } else {
                    callback();
                }
            }
        };
        // const validateMail = (rule, value, callback) => {
        //     if (value) {
        //         const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
        //         if (!rep.test(value)) {
        //             callback(new Error("请输入正确的邮箱"))
        //         }
        //     }
        // };
        const validateMail = (rule, value, callback) => {
            if (value) {
                const rep = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
                if (!rep.test(value)) {
                    callback(new Error("请输入正确的邮箱"))
                }else{
                    callback();
                }
            }else{
                callback();
            }
        };
        const validateRole = (rule, value, callback) => {
            if (!value) {
                callback(new Error("所属角色不能为空"));
@@ -180,22 +191,23 @@
                callback();
            }
        };
        // const validateMac = (rule, value, callback) => {
        //     if (value) {
        //         callback(new Error(""));
        //     }else{
        //         callback()
        //     }
        // };
        // const validateIp = (rule, value, callback) => {
        //     if (value) {
        //     }else{
        //         callback()
        //     }
        // };
        const validateMac = (rule, value, callback) => {
            if (value) {
                callback();
            }else{
                callback()
            }
        };
        const validateIp = (rule, value, callback) => {
            if (value) {
                callback();
            }else{
                callback()
            }
        };
        return {
            user: {
                // nickName: '',
                nickName: '',
                password: '',
                username: '',
                sex: 1,
@@ -204,20 +216,18 @@
                email: '',
                role: null,
                userType: null,
                zj: {
                    areaNumber: '',
                    phoneNumber: "",
                    moreNumber: "",
                },
                zjarea: '',
                zjnumber: '',
                zjother: '',
                departmentId: null,
                jobTitle: null,
                mac: '',
                ip: '',
            },
            createUserRules: {
                // nickName: [
                //     { required: true, trigger: "blur", validator: validateNickname },
                // ],
                nickName: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                password: [
                    { required: true, trigger: "blur", validator: validatePass },
                ],
@@ -233,9 +243,9 @@
                mobile: [
                    { required: true, trigger: "blur", validator: validatePhone },
                ],
                // email: [
                //     { required: false, trigger: "blur", validator: validateMail },
                // ],
                email: [
                    { required: false, trigger: "blur", validator: validateMail },
                ],
                role: [
                    { required: true, trigger: "change", validator: validateRole },
                ],
@@ -251,18 +261,18 @@
                jobTitle: [
                    { required: true, trigger: "blur", validator: validateWork },
                ],
                // mac: [
                //     { required: false, trigger: "blur", validator: validateMac },
                // ],
                // ip: [
                //     { required: false, trigger: "blur", validator: validateIp },
                // ],
                mac: [
                    { required: false, trigger: "blur", validator: validateMac },
                ],
                ip: [
                    { required: false, trigger: "blur", validator: validateIp },
                ],
            },
            roleList: [
                { name: '角色1', id: 1 }, { name: '角色2', id: 2 }
                
            ],
            typeList: [
                { name: '类型1', id: 1 }, { name: '类型2', id: 2 }
                
            ],
            departList: []
        }
@@ -275,6 +285,8 @@
        this.$axios.get('sccg/depart/page').then(res => {
            that.departList = res.data.records;
        })
        // 获取用户类型
        this.getUserTypeList();
    },
    methods: {
        // 提交注册
@@ -287,14 +299,19 @@
                    this.$axios.post('sccg/admin/register', {
                        departmentId: user.departmentId,
                        email: user.email,
                        jsDy: user.isDy,
                        icon:'',
                        isDy: `${user.isDy}`,
                        jobTitle: user.jobTitle,
                        mobile: user.mobile,
                        note:'',
                        roleIds:user.role,
                        // nickName: user.nickName,
                        sex:`${user.sex}`,
                        password: user.password,
                        userType: user.userType,
                        userType: `${user.userType}`,
                        username: user.username,
                        departName:user.departName,
                        zj:user.zjarea+`${user.zjnumber}`+user.zjother,
                        // departName:user.departName,
                    }).then(res => {
                        if (res.code === 200) {
                            console.log(1);
@@ -308,9 +325,14 @@
                                type:'warning',
                                message:'该用户已注册'
                            })
                        }else{
                            this.$message({
                                type:'warning',
                                message:res.message
                            })
                        }
                    })
                }else{
                } else {
                    return false
                }
            })
@@ -326,15 +348,26 @@
                })
        },
        // 重置表单
        resetForm(){
        resetForm() {
            this.$refs['user'].resetFields();
        },
        // 获得部门名称
        getDepartName(data){
            this.departList.forEach(item=>{
                if(item.id === data){
        getDepartName(data) {
            this.departList.forEach(item => {
                if (item.id === data) {
                    this.user.departName = item.departName
                }
            })
        },
        // 获取用户类型
        getUserTypeList(){
            this.$axios({
                method:'get',
                url:'sccg/dict/query_user_type'
            })
            .then(res=>{
                console.log(res);
                this.typeList = res.data;
            })
        }
    },
@@ -375,29 +408,23 @@
                }
            }

            .optionHandleSp {
            .user-item {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                .left-px :deep(.el-form-item__content) {
                    margin-left: 0px !important;
                }
            }
                .optionBtn {
                    display: flex;
                    margin-top: 20px;

            .optionBtn {
                display: flex;
                margin-top: 20px;

                .btn {
                    padding: 12px 50px;
                    .btn {
                        padding: 12px 50px;
                    }
                }
            }

            }
        }
    }
}
</style>

 src/views/systemSetting/baseSetting/user/components/main/index.vue

@@ -18,6 +18,9 @@
                <el-table-column prop="mobile" label="联系方式" min-width="7">
                </el-table-column>
                <el-table-column prop="note" label="所属角色" min-width="8">
                    <template slot-scope="scope">
                        <span>{{filterRole(scope.row.roles)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="departName" label="所属部门" min-width="8">
                </el-table-column>
@@ -147,9 +150,9 @@
                if (list === 3) {
                    await this.mulDelte(this.tempList);
                } else if (list === 2) {
                    await this.mulUpdateStatus(this.tempList,0);
                    await this.mulUpdateStatus(this.tempList, 0);
                } else {
                    await this.mulUpdateStatus(this.tempList,1);
                    await this.mulUpdateStatus(this.tempList, 1);
                }
                this.myIdx = 0;
            } else {
@@ -199,13 +202,13 @@
                .catch(err => { console.log(err) })
        },
        // 批量修改账号
        mulUpdateStatus(idArr,flag) {
        mulUpdateStatus(idArr, flag) {
            console.log(flag);
            this.$confirm( flag === 1 ? "您确定要进行批量启用用户吗?" :'您确定要进行批量禁用用户吗?' ) 
            this.$confirm(flag === 1 ? "您确定要进行批量启用用户吗?" : '您确定要进行批量禁用用户吗?')
                .then(_ => {
                    this.$axios({
                        method: 'post',
                        url: 'sccg/admin/updateStatusBatch?ids=' + idArr + '&status='+flag,
                        url: 'sccg/admin/updateStatusBatch?ids=' + idArr + '&status=' + flag,
                    })
                        .then(res => {
                            if (res.code === 200) {
@@ -230,11 +233,8 @@
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();

        },
        disSame(list) {
            // console.log(this.$refs.multipleTable);
            // const row = this.$refs.table.data
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
@@ -260,12 +260,17 @@
            this.getUserList();
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogUpdate = false
                    done();
                })
                .catch(_ => { });
            if (this.updateFlag) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.dialogUpdate = false;
                        this.updateFlag = false;
                        done();
                    })
                    .catch(_ => { });
            }else{
                done();
            }
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
@@ -311,10 +316,9 @@
            this.$axios.get(`sccg/admin/list?keyword=${search}&current=${currentPage}&pageSize=${pageSize}`).then(res => {
                if (res.code === 200) {
                    res.data.records.forEach(item => {
                        // item.createTime = helper(item.createTime);
                        item.status == 1 ? item.status = true : item.status = false;
                    })
                    that.totalNum = res.data.pages * pageSize;
                    that.totalNum = res.data.total;
                    that.tableData = res.data.records;
                    this.renderFlag = true;
                }
@@ -339,6 +343,23 @@
            }
            return '';
        },
        // 处理用户所属角色
        filterRole(arr){
            let str = '';
            if(arr.length === 0){
                return;
            }
            arr.forEach((item,index)=>{
                if(item!==null){
                    if(index<arr.length-1){
                        str+=item.name +',';
                    }else{
                        str+=item.name;
                    }
                }
            })
            return str;
        }
    },
    props: ['refresh', 'keyword', 'resetFresh'],
    watch: {

 src/views/systemSetting/baseSetting/user/components/updateUser/index.vue

@@ -41,9 +41,9 @@
                    </el-form-item>
                    <!-- 选择角色 -->
                    <el-form-item class="optionItem" label="选择角色:" prop="role">
                        <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags @change="handleChangeRole">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name"
                                :value="item.id">
                        <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags
                            @change="handleChangeRole" :disabled="!flag.role">
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                        <!-- <el-select v-model="user.role" placeholder="请选择所属角色" :disabled="!flag.role">
@@ -85,11 +85,11 @@
                    </el-form-item>
                    <!-- 填写所属mac地址 -->
                    <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac">
                        <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input>
                        <el-input v-model="user.mac" placeholder="请填写所属mac地址" disabled></el-input>
                    </el-form-item>
                    <!-- 填写所属ip地址 -->
                    <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip">
                        <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input>
                        <el-input v-model="user.ip" placeholder="请填写所属ip地址" disabled></el-input>
                    </el-form-item>
                    <el-form-item v-if="updateFlag">
                        <div class="optionBtn">
@@ -302,22 +302,61 @@
        },
        // 修改用户信息
        handleUser() {
            const { depart, role } = this.flag;
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { user } = this;
                    this.$axios({
                        method: 'post',
                        url: 'sccg/admin/role/update?adminId=' + user.id + '&roleIds='+user.role,
                        data: user
                    })
                        .then(res => {
                            this.$message({
                                type: res.code === 200 ? 'success' : 'warning',
                                message: res.message,
                            })
                            this.getUserList();
                            this.$emit('closeDialog', { flag: false });
                    user.isDy = `${user.isDy}`;
                    if (depart) {
                        console.log(this.user);
                        this.$axios({
                            method: 'post',
                            url: `sccg/admin/update/${user.id}`,
                            data: {
                                "id": user.id,
                                "username": user.username,
                                "password": user.password,
                                "icon": user.icon,
                                "email": user.email,
                                "nickName": user.nickName,
                                "note": user.note,
                                "createTime": user.createTime,
                                "loginTime": user.loginTime,
                                "status": user.status ? 1 : 0,
                                "macAddress": user.macAddress,
                                "ipAddress": user.ipAddress,
                                "isDy": `${user.isDy}`,
                                "sex": `${user.sex}`,
                                "jobTitle": user.jobTitle,
                                "departmentId": user.departmentId,
                                "departName": user.departName,
                                "userType": user.userType,
                                "zj": user.zj,
                                "mobile": user.mobile,
                            }
                        })
                            .then(res => {
                                this.$message({
                                    type: res.code === 200 ? 'success' : 'warning',
                                    message: res.message,
                                })
                                this.getUserList();
                                this.$emit('closeDialog', { flag: false });
                            })
                    } else {
                        this.$axios({
                            method: 'post',
                            url: 'sccg/admin/role/update?adminId=' + user.id + '&roleIds=' + user.role,
                        })
                            .then(res => {
                                this.$message({
                                    type: res.code === 200 ? 'success' : 'warning',
                                    message: res.message,
                                })
                                this.getUserList();
                                this.$emit('closeDialog', { flag: false });
                            })
                    }
                } else {
                    return false;
                }
@@ -334,24 +373,24 @@
                })
        },
        // 改变用户角色
        handleChangeRole(data){
        handleChangeRole(data) {
            console.log(this.user.role);
            // console.log(data);
        },
        // 获取用户的角色列表
        getUserRole(id){
        getUserRole(id) {
            this.$axios({
                method:'get',
                url:`sccg/admin/role/${id}`
                method: 'get',
                url: `sccg/admin/role/${id}`
            })
            .then(res=>{
                console.log(res);
                const arr = [];
                res.data.forEach(item=>{
                    arr.push(item.id);
                .then(res => {
                    console.log(res);
                    const arr = [];
                    res.data.forEach(item => {
                        arr.push(item.id);
                    })
                    this.user.role = arr;
                })
                this.user.role = arr;
            })
        }
    },
    props: ['userInfo', 'updateFlag', 'flag', 'closeDialog', 'getUserList']
@@ -361,13 +400,16 @@
.updateUser {
    border-radius: 1px;
    background-color: #09152f;
    :deep(.el-tag){

    :deep(.el-tag) {
        background-color: #09152f;
    }
    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected{

    .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
        background-color: #09152f;
        color: #4b9bb7;
    }

    // .el-select-dropdown__item :deep(.selected){
    //     background-color: #09152f;
    //     color: #4b9bb7;