新增短信页面和短信模板页面

mg

2022-11-01 bdf3026858cbe53ca31861d9e3cb073469d0992e

新增短信页面和短信模板页面

 src/router/index.js

@@ -276,8 +276,8 @@
                component: () => import('@/views/operate/sms/smsIndex'),
              },
              {
                path: 'smstemplate',
                name: 'smstemplate',
                path: 'smsTemplate',
                name: 'smsTemplate',
                component: () => import('@/views/operate/sms/smsTemplate'),
              },
            ]

 src/views/operate/rectification/taskList/index.vue

@@ -112,15 +112,41 @@
    methods: {
        // 获取接口列表
        getUserList() {
            const that = this;
            // const { currentPage, pageSize, search } = this;
            this.dialogCreate = false;
            this.$axios.get("sccg/system/portal/thirdApp/search").then(res => {
                const { code, data } = res;
                if (code == 200) {
                    this.tableData = data;
                }
            })
            // const that = this;
            // // const { currentPage, pageSize, search } = this;
            // this.dialogCreate = false;
            // this.$axios.get("/sccg/task/list").then(res => {
            //     const { code, data } = res;
            //     if (code == 200) {
            //         this.tableData = data;
            //     }
            // })

            // let arr = [];
            // const { currentPage, pageSize,context,messageStatus,messageKind } = this;
            // await this.$axios({
            //     method: 'post',
            //     url: '/sccg/task/list',
            //     data: {
            //         body: "",
            //         channelCode: messageKind === '00' ?'':messageKind,
            //         createUser: '',
            //         current: currentPage,
            //         head: context,
            //         messageType: "",
            //         pageSize: pageSize,
            //         randomCode: "",
            //         remark: "",
            //         sendTime: "",
            //         status: messageStatus === 2 ? '':messageStatus,
            //         targetFrom: "",
            //         targetTo: ""
            //     }
            // })
            //     .then(res => {
            //         this.tableData = res.data;
            //     })
            // return arr;
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {

 src/views/operate/sms/smsIndex/index.vue

@@ -11,19 +11,19 @@
                    <el-input placeholder="消息标题" v-model="context"></el-input>
                </div>
                <div class="message-status">
                    <span>消息状态:</span>
                    <el-select v-model="messageStatus" placeholder="请选择消息状态">
                    <span>短信回执:</span>
                    <el-select v-model="messageStatus" placeholder="请选择">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="message-kind">
                <!-- <div class="message-kind">
                    <span>消息分类:</span>
                    <el-select v-model="messageKind" placeholder="请选择消息分类">
                        <el-option v-for="item in kindList" :key="item.id" :label="item.columnName" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                </div> -->
                <div class="find">
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
@@ -48,31 +48,24 @@
                    </el-table-column>
                    <el-table-column prop="head" label="标题" min-width="10">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="修改时间" min-width="10">
                    <el-table-column prop="updateTime" label="发送时间" min-width="10">
                        <template slot-scope="scope">
                            <span>{{changeTime(scope.row)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="targetFrom" label="发布人员" min-width="15">
                    </el-table-column>
                    <el-table-column prop="channelCode" label="消息分类" min-width="10">
                        <template slot-scope="scope">
                            <span>{{scope.row.channelCode === '01' ? '站内信':scope.row.channelCode
                            ==='02'?"邮件":'短信'}}</span>
                        </template>
                    <el-table-column prop="targetFrom" label="发送账号" min-width="15">
                    </el-table-column>
                    <el-table-column prop="status" label="发布状态" min-width="5">
                        <template slot-scope="scope">
                            {{scope.row.status === 0 ? '未发布' :'已发布'}}
                            {{scope.row.status === 0 ? '发送失败' :'发送成功'}}
                        </template>
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="15">
                        <template slot-scope="scope">
                            <div class="operation">
                                <el-link icon="el-icon-view" :underline="false" @click="handleView(scope.row)">查看</el-link>
                                <el-link icon="el-icon-edit" class="leftPx" :underline="false" @click="handleEdit(scope.row)">编辑</el-link>
                                <el-link class="leftPx" icon="el-icon-delete-solid" :underline="false"
                                    @click="handleDelete([scope.row.id])">删除</el-link>
                                <el-link icon="el-icon-edit" class="leftPx" :underline="false" @click="handleEdit(scope.row)">重新发送</el-link>
                            </div>
                        </template>
                    </el-table-column>
@@ -121,6 +114,7 @@
    </div>
</template>
<script>
import helper from '@/utils/mydate'
export default {
    components: {
        // MyView, MyCreate,MyEdit
@@ -167,11 +161,11 @@
                    value: 2,
                },
                {
                    label: '未发布',
                    label: '发送失败',
                    value: 0,
                },
                {
                    label: '已发布',
                    label: '发送成功',
                    value: 1,
                }
            ],
@@ -257,7 +251,7 @@
                url: 'sccg/message/list',
                data: {
                    body: "",
                    channelCode: messageKind === '00' ?'':messageKind,
                    channelCode: '03',
                    createUser: '',
                    current: currentPage,
                    head: context,

 src/views/operate/sms/smsTemplate/createTemplate/index.vue

New file
@@ -0,0 +1,432 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="role" :rules="createRoleRules"
                    label-position="right">
                    <!-- 消息栏目 -->
                    <el-form-item class="optionItem" label="模板类型:" prop="messageType">
                        <div class="message-item">
                            <div class="message-item__left">
                                <el-select v-model="role.messageType" placeholder="请选择">
                                    <el-option v-for="item in colList" :key="item.id" :label="item.columnName"
                                        :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>                       
                        </div>
                    </el-form-item>
                    <!-- 消息标题 -->
                    <el-form-item class="optionItems" label="消息标题:" prop="head">
                        <div class="message-item__left">
                            <el-input v-model="role.head" placeholder="请选择消息标题"></el-input>
                        </div>
                    </el-form-item>
                    <!-- 接收对象 -->
                    <!-- <el-form-item class="optionItem" label="接收对象:" prop="targetTo">
                        <div class="message-item__left">
                            <el-select v-model="role.targetTo" placeholder="请选择接收对象" >
                                <el-option :value="role.targetTo">
                                    <el-tree ref="tree" :data="departList" :props="defaultProps" show-checkbox
                                        @check="handleCheck" default-expand-all node-key="id">
                                    </el-tree>
                                </el-option>
                            </el-select>
                        </div>
                    </el-form-item> -->
                    <!-- 消息内容 -->
                    <el-form-item class="optionItem" label="消息内容:" prop="body">
                        <MyEditor ref="edit" @getMyBody="getMyBody"></MyEditor>
                        <!-- <el-input type="textarea" v-model="role.description" placeholder="请输入描述内容200字以内"></el-input> -->
                    </el-form-item>
                    <!-- 提醒方式 -->
                    <!-- <el-form-item class="optionItem" label="提醒方式:" prop="channelCode">
                        <el-radio-group v-model="role.channelCode">
                            <el-radio label="01">站内信</el-radio>
                            <el-radio label="02">邮件</el-radio>
                            <el-radio label="03">短信</el-radio>
                        </el-radio-group>
                        <span class="message-tip">(短信可用数: 1000条)</span>
                    </el-form-item> -->
                    <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" @click.native.prevent="handleSubmit(0)" class="btn save">保存
                            </el-button>
                            <!-- <el-button type="primary" @click.native.prevent="handleSubmit(1)" class="btn submit">发布
                            </el-button>
                            <el-button type="primary" @click.native.prevent="handleView" class="btn submit">预览
                            </el-button> -->
                            <el-button class="btn cancel" @click.native.prevent="handleReset">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>
                <!-- 新增栏目 -->
                <el-dialog title="添加栏目" :visible.sync="dialogCreate" v-if="dialogCreate" width="60%"
                    :before-close="handleConfirmClose" append-to-body>
                    <MyColumnAdd @closeDialog="closeDialog"></MyColumnAdd>
                </el-dialog>
                <!-- 预览消息 -->
                <el-dialog title="消息预览" :visible.sync="dialogView" v-if="dialogView" width="60%"
                    :before-close="handleConfirmClose" append-to-body>
                    <MyColView  :info="info" @closeDialog="closeDialog"></MyColView>
                </el-dialog>
            </div>
        </main>
    </div>
</template>
<script>
import MyEditor from '@/components/edit'
export default {
    components: { MyEditor, },
    data() {
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写消息栏目"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback();
            } else {
                callback();
            }
        };
        const validateTruename = (rule, value, callback) => {
            if (value.length !== 0) {
                callback();
            } else {
                callback(new Error('请选择接收对象'));
            }
        };
        return {
            role: {
                messageType: '',
                head: '',
                targetTo: '',
                targetFrom: null,
                body: '',
                channelCode: '01',
            },
            createRoleRules: {
                messageType: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                head: [
                    { required: false, trigger: "blur", validator: validatePass },
                ],
                targetTo: [
                    { required: false, trigger: "blur", validator: validateTruename },
                ],
            },
            colList: [],
            departList: [],
            typeList: [],
            dialogCreate: false,
            dialogView: false,
            defaultProps: {
                children: 'children',
                label: 'departName',
                // disabled: function (data, node) {
                //     if (data.createTime) {
                //         return !data.leaf
                //     }
                // }
            },
            checkedList: [],
            tempNameArr:[],
            info:{},
            sendUser:""
        }
    },
    created() {
        this.setColumnList();
        this.setDepartList();
        this.getLoginUserInfo();
    },
    methods: {
        // 关闭弹窗
        handleConfirmClose(done) {
            this.$confirm('确认关闭?')
                .then(_ => {
                    done();
                })
        },
        // 设置栏目
        async setColumnList() {
            this.colList = [{"id":"1","columnName":"验证码模板"},{"id":"2","columnName":"活动模板"}];
        },
        // 获取栏目
        async getColumnList() {
            let arr;
            await this.$axios({
                method: 'get',
                url: 'sccg/message_column/getAllColumn'
            })
                .then(res => {
                    console.log(res);
                    arr = res.data;
                })
            return arr;
        },
        // 关闭弹窗
        closeDialog({ flag, index }) {
            this.dialogCreate = flag;
            if (index === 1) {
                // 重新设置栏目
                this.setColumnList();
            }
        },
        // 获取部门树
        async getDepartList() {
            let arr
            await this.$axios({
                method: 'get',
                url: 'sccg/depart/tree'
            })
                .then(res => {
                    arr = res.data
                })
            return arr;
        },
        // 设置部门树
        async setDepartList() {
            this.departList = await this.filterDepartList();
        },
        // 处理部门树
        async filterDepartList() {
            let arr = await this.getDepartList();
            const { setChildren } = this;
            // console.log(setChildren);
            arr.forEach(item => {
                setChildren(item);
            })
            return arr;
        },
        // 递归children
        setChildren(obj) {
            if (obj.children !== null) {
                if (obj.children.length !== 0) {
                    obj.children.forEach(item => {
                        return this.setChildren(item);
                    })
                }
            } else {
                if (obj.userInfoDTOS.length !== 0) {
                    obj.children = [];
                    obj.userInfoDTOS.forEach(item => {
                        obj.children.push({ id: item.userId, departName: item.username })
                    })
                }
            }
        },
        // 选中id
        handleCheck(data, node) {
            let arr = [],nameArr = []
            console.log(node.checkedNodes)
            node.checkedNodes.forEach(item => {
                if(!item.hasOwnProperty('departType')){
                    arr.push(item.id)
                    nameArr.push(item.departName)
                }
            })
            this.checkedList = arr
            this.tempNameArr = nameArr
            console.log(this.tempNameArr)
            this.role.targetTo = arr.length + '人'
        },
        // 新建/保存消息(1:新建,0保存消息)
        handleSubmit(mystatus) {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { role, checkedList } = this;
                    console.log(checkedList);
                    this.$axios({
                        method: 'post',
                        url: 'sccg/message_sms_template/addSmsTemplate',
                        data: {
                            body: role.body,
                            channelCode: `${role.channelCode}`,
                            title: role.head,
                            type: role.messageType,
                            sendTime: new Date(),
                            targetTo: checkedList.join(','),
                            targetFrom: `${role.targetFrom}`,
                            status: mystatus,
                        }
                    })
                        .then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: mystatus === 1 ? '发送成功' : '保存成功',
                                })
                                this.$emit('closeMyDialog', { flag: false, index: 1 });
                            }
                        })
                } else {
                    return false;
                }
            })
        },
        // 获得消息体
        getMyBody(obj) {
            console.log(obj);
            this.role.body = obj;
        },
        // 重置表单
        handleReset() {
            this.$refs.edit.editor.txt.clear();
            // this.$refs.edit.wangEditor.txt.html('<p><br></p>') 
            this.setDepartList();
            this.$refs.user.resetFields();
        },
        // 获取当前登录用户信息
        getLoginUserInfo() {
            const name = sessionStorage.getItem('name');
            this.$axios({
                method: 'get',
                url: 'sccg/admin/info?name=' + name,
            })
                .then(res => {
                    this.role.targetFrom = res.data.userId
                    this.sendUser = res.data.username
                })
        },
        // 消息预览
        handleView() {
            this.$refs.user.validate((valid) => {
                if (valid) {
                    const { role,getColText,tempNameArr,sendUser } = this
                    this.dialogView = true;
                    let info = {}
                    // 获得栏目消息
                    info.channelCode = role.channelCode === '01'? '站内信': role.channelCode === '02' ? '邮件':'短信'
                    info.messageType = getColText(role.messageType)
                    info.body = role.body
                    info.head = role.head
                    info.targetTo = tempNameArr
                    info.targetFrom = sendUser
                    this.info = info
                } else {
                    return false
                }
            })
        },
        // 获得栏目消息
        getColText(id){
            console.log(id)
            const {colList} = this
            let str = ''
            colList.forEach(item=>{
                item.id === id ? str = item.columnName : '' 
            })
            return str
        }
    },
    props: ['closeMyDialog']
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
    background-color: #09152f;

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

        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;
            &:deep(.el-dialog__title) {
                color: #4b9bb7;
            }
            &::v-deep .el-form-item__label {
                color: #4b9bb7;
            }

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

            .message-item__left {
                width: 400px;
            }

            .message-add {
                &:hover {
                    cursor: pointer;
                }
            }

            .el-form-item__content :deep(.el-select) {
                width: 400px;
            }

            :deep(.el-input) {
                width: 400px;
            }

            .message-item {
                display: flex;

                span {
                    margin-left: 20px;
                    color: #4b9bb7;
                }
            }

            .message-tip {
                margin-left: 20px;
            }

            :deep(.el-input--suffix) {
                width: 400px;
            }

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

            .el-form-item__content {
                width: 400px;

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

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

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

        }
    }
}
</style>

 src/views/operate/sms/smsTemplate/index.vue

@@ -11,19 +11,19 @@
                    <el-input placeholder="消息标题" v-model="context"></el-input>
                </div>
                <div class="message-status">
                    <span>消息状态:</span>
                    <el-select v-model="messageStatus" placeholder="请选择消息状态">
                    <span>模板类型:</span>
                    <el-select v-model="messageStatus" placeholder="请选择">
                        <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value">
                        </el-option>
                    </el-select>
                </div>
                <div class="message-kind">
                <!-- <div class="message-kind">
                    <span>消息分类:</span>
                    <el-select v-model="messageKind" placeholder="请选择消息分类">
                        <el-option v-for="item in kindList" :key="item.id" :label="item.columnName" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                </div> -->
                <div class="find">
                    <el-button type="primary" icon="el-icon-search" @click="handleSearch">查询</el-button>
                    <el-button icon="el-icon-delete-solid" @click="handleReset">重置</el-button>
@@ -46,26 +46,26 @@
                    <el-table-column label="ID" min-width="5">
                        <template slot-scope="scope">{{ scope.row.id }}</template>
                    </el-table-column>
                    <el-table-column prop="head" label="标题" min-width="10">
                    <el-table-column prop="title" label="标题" min-width="10">
                    </el-table-column>
                    <el-table-column prop="updateTime" label="修改时间" min-width="10">
                    <el-table-column prop="createTime" label="创建时间" min-width="10">
                        <template slot-scope="scope">
                            <span>{{changeTime(scope.row)}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="targetFrom" label="发布人员" min-width="15">
                    </el-table-column>
                    <el-table-column prop="channelCode" label="消息分类" min-width="10">
                    <!-- <el-table-column prop="targetFrom" label="发布人员" min-width="15">
                    </el-table-column> -->
                    <el-table-column prop="type" label="模板类型" min-width="10">
                        <template slot-scope="scope">
                            <span>{{scope.row.channelCode === '01' ? '站内信':scope.row.channelCode
                            ==='02'?"邮件":'短信'}}</span>
                            <span>{{scope.row.type === 1 ? '验证码模板':scope.row.type
                            ===2?"活动模板":'其他模板'}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column prop="status" label="发布状态" min-width="5">
                    <!-- <el-table-column prop="status" label="发布状态" min-width="5">
                        <template slot-scope="scope">
                            {{scope.row.status === 0 ? '未发布' :'已发布'}}
                        </template>
                    </el-table-column>
                    </el-table-column> -->
                    <el-table-column prop="operation" label="操作" min-width="15">
                        <template slot-scope="scope">
                            <div class="operation">
@@ -78,10 +78,10 @@
                    </el-table-column>
                </el-table>
                <!-- 新建消息 -->
                <!-- <el-dialog title="新建消息" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%"
                <el-dialog title="新建短信模板" :visible.sync="dialogCreate" v-if="dialogCreate" width="80%"
                    :before-close="handleConfirmClose">
                    <MyCreate @closeMyDialog="closeDialog"></MyCreate>
                </el-dialog> -->
                </el-dialog>
                <!-- 消息详情 -->
                <!-- <el-dialog title="消息详情" :visible.sync="dialogView" v-if="dialogView" width="45%"
                    :before-close="handleClose">
@@ -121,9 +121,11 @@
    </div>
</template>
<script>
import helper from '@/utils/mydate'
import MyCreate from './createTemplate'
export default {
    components: {
        // MyView, MyCreate,MyEdit
         MyCreate,
    },
    data() {
        return {
@@ -159,20 +161,20 @@
                }
            ],
            tempList: [],
            messageStatus: 2,
            messageStatus: 0,
            messageKind: '00',
            statusList: [
                {
                    label: '全部',
                    value: 2,
                },
                {
                    label: '未发布',
                    value: 0,
                },
                {
                    label: '已发布',
                    label: '验证码模板',
                    value: 1,
                },
                {
                    label: '活动模板',
                    value: 2,
                }
            ],
            kindList: [
@@ -254,19 +256,19 @@
            const { currentPage, pageSize,context,messageStatus,messageKind } = this;
            await this.$axios({
                method: 'post',
                url: 'sccg/message/list',
                url: 'sccg/message_sms_template/list',
                data: {
                    body: "",
                    channelCode: messageKind === '00' ?'':messageKind,
                    createUser: '',
                    current: currentPage,
                    head: context,
                    title: context,
                    messageType: "",
                    pageSize: pageSize,
                    randomCode: "",
                    remark: "",
                    sendTime: "",
                    status: messageStatus === 2 ? '':messageStatus,
                    type: messageStatus === 0 ? '':messageStatus,
                    targetFrom: "",
                    targetTo: ""
                }

 src/views/systemSetting/device/grid/components/createUser/index.vue

New file
@@ -0,0 +1,555 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="user" :rules="createUserRules"
                    label-position="right">
                    <!-- 用户名称 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="用户名称:" prop="username">
                                <el-input v-model="user.username" placeholder="填写用户名称" autoComplete="new-username">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 用户密码 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItems" label="用户密码:" prop="password">
                                <el-input v-model="user.password" type="password" autoComplete="new-password"
                                    placeholder="请输入用户密码"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                        <!-- 重新输入密码即为修改，密码有效期默认为3个月 -->
                    </div>
                    <!-- 所属用户姓名 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="所属用户姓名:" prop="nickName">
                                <el-input v-model="user.nickName" placeholder="请填写用户姓名"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 性别 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="性别:" prop="sex">
                                <el-radio-group v-model="user.sex">
                                    <el-radio :label="1">男</el-radio>
                                    <el-radio :label="0">女</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 是否党员 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="是否党员:" prop="isDy">
                                <el-radio-group v-model="user.isDy">
                                    <el-radio :label="1">是</el-radio>
                                    <el-radio :label="0">否</el-radio>
                                </el-radio-group>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 所属手机号码 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="所属手机号码:" prop="mobile">
                                <el-input v-model="user.mobile" maxlength="11" placeholder="请填写手机号码"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 邮箱地址 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="邮箱地址:" prop="email">
                                <el-input v-model="user.email" placeholder="请填写邮箱地址"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 选择角色 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="选择角色:" prop="role">
                                <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-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 用户类型 -->
                    <div class="user-item">
                        <div class="item-left">
                            <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">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 座机/分机 -->
                    <div class="user-item sp-item">
                        <div class="item-left">
                            <el-form-item label="座机/分机:" prop="zjarea">
                                <el-input v-model="user.zjarea" placeholder="电话区号">
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="zjnumber" class="left-px">
                                <el-input v-model="user.zjnumber" placeholder="电话号码">
                                </el-input>
                            </el-form-item>
                            <el-form-item prop="zjother" class="left-px">
                                <el-input v-model="user.zjother" placeholder="分机号码">
                                </el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 所属部门 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="所属部门:" prop="departmentId">
                                <el-select v-model="user.departmentId" placeholder="请选择所属部门" @change="getDepartName">
                                    <el-option :value="mylabel">
                                        <el-tree ref="tree" :check-strictly="true" :data="departList"
                                            :props="defaultProps" show-checkbox @check-change="handleCheck"
                                            default-expand-all node-key="id">
                                        </el-tree>
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 当前职务 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="当前职务:" prop="jobTitle">
                                <el-input v-model="user.jobTitle" placeholder="请输入当前职务"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 填写所属mac地址 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac">
                                <el-input v-model="user.mac" placeholder="请填写所属mac地址"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <!-- 填写所属ip地址 -->
                    <div class="user-item">
                        <div class="item-left">
                            <el-form-item class="optionItem" label="填写所属ip地址:" prop="ip">
                                <el-input v-model="user.ip" placeholder="请填写所属ip地址"></el-input>
                            </el-form-item>
                        </div>
                        <div class="item-right"></div>
                    </div>
                    <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                            <el-button class="btn reset" @click.native.prevent="resetForm">重置</el-button>
                        </div>
                    </el-form-item>
                </el-form>

            </div>
        </main>
    </div>
</template>
<script>
import { getTypeList } from '@/utils/helper'
export default {
    data() {
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("所属姓名不能为空"));
            } else {
                callback();
            }
        };
        const validatePass = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户密码不能为空"));
            } else {
                const rep = /^\w+$/;
                if (!rep.test(value)) {
                    callback(new Error("密码只能是以数字、26个英文字母或者下划线组成的字符串"));
                } else {
                    callback();
                }
            }
        };
        const validateTruename = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户姓名不能为空"));
            } else {
                callback();
            }
        };
        const validatePhone = (rule, value, callback) => {
            if (!value) {
                callback(new Error("手机号码不能为空"));
            } else {
                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) {
                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("所属角色不能为空"));
            } else {
                callback()
            }
        };
        const validateType = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户类型不能为空"));
            } else {
                callback()
            }
        };
        const validateDepartment = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请选择用户部门"));
            } else {
                callback()
            }
        };
        const validateWork = (rule, value, callback) => {
            if (!value) {
                callback(new Error("用户当前职务不能为空"));
            } 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: '',
                password: '',
                username: '',
                sex: 1,
                isDy: 0,
                mobile: '',
                email: '',
                role: null,
                userType: null,
                zjarea: '',
                zjnumber: '',
                zjother: '',
                departmentId: null,
                jobTitle: null,
                mac: '',
                ip: '',
            },
            createUserRules: {
                nickName: [
                    { required: true, trigger: "blur", validator: validateNickname },
                ],
                password: [
                    { required: true, trigger: "blur", validator: validatePass },
                ],
                username: [
                    { required: true, trigger: "blur", validator: validateTruename },
                ],
                sex: [
                    { required: true, trigger: "blur" },
                ],
                isDy: [
                    { required: true, trigger: "blur" },
                ],
                mobile: [
                    { required: true, trigger: "blur", validator: validatePhone },
                ],
                email: [
                    { required: true, trigger: "blur", validator: validateMail },
                ],
                role: [
                    { required: true, trigger: "change", validator: validateRole },
                ],
                userType: [
                    { required: true, trigger: "change", validator: validateType },
                ],
                zj: [
                    { required: false, trigger: "blur" },
                ],
                departmentId: [
                    { required: true, trigger: "change", validator: validateDepartment },
                ],
                jobTitle: [
                    { required: true, trigger: "blur", validator: validateWork },
                ],
                mac: [
                    { required: false, trigger: "blur", validator: validateMac },
                ],
                ip: [
                    { required: false, trigger: "blur", validator: validateIp },
                ],
            },
            roleList: [

            ],
            typeList: [

            ],
            departList: [],
            mylabel: '',
            defaultProps: {
                children: 'children',
                label: 'departName',
                disabled: (data, node) => {
                    if (node.level === 1 && node.childNodes.length !== 0) {
                        return !data.leaf
                    }
                }
            },
            selectOrg: {
                orgsid: []
            },
        }
    },
    created() {
        // 获取角色列表
        this.getRoleList();
        // 获取用户类型
        this.getUserTypeList();
        // 获取部门
        this.getDepartList();
    },
    methods: {
        // 提交注册
        handleUser() {
            this.$refs['user'].validate((valid) => {
                console.log(valid);
                if (valid) {
                    const { user, selectOrg } = this;
                    console.log(user);
                    this.$axios.post('sccg/admin/register', {
                        departmentId: selectOrg.orgsid[0],
                        email: user.email,
                        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,
                        username: user.username,
                        zj: user.zjarea + `${user.zjnumber}` + user.zjother,
                        nickName: user.nickName
                        // departName:user.departName,
                    }).then(res => {
                        if (res.code === 200) {
                            console.log(1);
                            this.$message({
                                type: 'success',
                                message: res.message,
                            })
                            this.$emit('sendDialog', { flag: false });
                        } else if (res.code === 500 && res.message === "操作失败") {
                            this.$message({
                                type: 'warning',
                                message: '该用户已注册'
                            })
                        } else {
                            this.$message({
                                type: 'warning',
                                message: res.message
                            })
                        }
                    })
                } else {
                    return false
                }
            })
        },
        // 获取角色列表
        getRoleList() {
            this.$axios({
                method: 'get',
                url: 'sccg/role/listAll',
            })
                .then(res => {
                    this.roleList = res.data;
                })
        },
        // 重置表单
        resetForm() {
            this.$refs['user'].resetFields();
        },
        // 获得部门名称
        getDepartName(data) {
            this.departList.forEach(item => {
                if (item.id === data) {
                    this.user.departName = item.departName
                }
            })
        },
        // 获取用户类型
        async getUserTypeList() {
            this.typeList = await getTypeList(1, '07');
        },
        // 获取部门树
        getDepartList() {
            this.$axios({
                method: 'get',
                url: 'sccg/depart/tree'
            })
                .then(res => {
                    this.departList = res.data;
                })
        },
        handleCheck(data, checked) {
            this.user.departmentId = data.departName;
            // 获取当前选择的id在数组中的索引
            const indexs = this.selectOrg.orgsid.indexOf(data.id)
            // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
            if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
                this.$message({
                    message: '只能选择一个部门！',
                    type: 'warning',
                    showClose: true
                })
                // 设置已选择的节点为false 很重要
                this.$refs.tree.setChecked(data, false)
            } else if (this.selectOrg.orgsid.length === 0 && checked) {
                // 发现数组为空 并且是已选择
                // 防止数组有值，首先清空，再push
                this.selectOrg.orgsid = []
                this.selectOrg.orgsid.push(data.id)
            } else if (
                indexs >= 0 &&
                this.selectOrg.orgsid.length === 1 &&
                !checked
            ) {
                // 再次直接进行赋值为空操作
                this.selectOrg.orgsid = []
                this.user.departmentId = '';
            }
        },
    },
    props: ['sendDialog']
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
    background-color: #09152f;

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

        .mainContent {
            display: flex;
            // justify-content: center;
            margin-top: 50px;
            width: 100%;
            &::v-deep .el-form-item__label {
                color: #4b9bb7;
            }

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

            .el-form-item__content {
                width: 400px;
                .el-select {
                    width: 100%;
                }
            }

            .sp-item {
                .item-left{
                    display: flex;
                }
            }

            .user-item {
                display: flex;
                justify-content: space-between;
                .item-left {
                    width: 500px;
                }
                .item-right {
                    line-height: 40px;
                    color: #4b9bb7;
                    font-size: 12px;
                    // margin-left: 16px;
                }

                .left-px :deep(.el-form-item__content) {
                    margin-left: 0px !important;
                }
            }

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

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

        }
    }
}
</style>

 src/views/systemSetting/device/grid/components/header/index.vue

New file
@@ -0,0 +1,110 @@
<template>
    <header>
        <div class="headerContent">
            <div class="search">
                <span>筛选条件:</span>
                <el-input placeholder="请输入内容" v-model="search"></el-input>
                <div class="findBtn">
                    <el-button type="primary" @click="setSearch">查询</el-button>
                </div>
            </div>
            <div class="addUser">
                <!-- :before-close="handleClose" -->
                <el-button class="addBtn" type="primary" @click="dialogCreate = true">添加用户</el-button>
                <el-dialog :visible.sync="dialogCreate" title="新增账户" width="60%" v-if="dialogCreate"
                    :before-close="handleClose">
                    <createUser @sendDialog="sendDialog" />
                </el-dialog>
            </div>
        </div>
    </header>
</template>
<script>
import createUser from "../createUser";
export default {
    components: {
        createUser,
    },
    data() {
        return {
            dialogCreate: false,
            search: '',
        }
    },
    methods: {
        setSearch() {
            this.$emit('getSearch', { text: this.search })
        },
        sendDialog(flag) {
            console.log(flag);
            this.dialogCreate = flag.flag;
            this.$emit('setDialog', { flag: true })
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        }
    },
    props: ['setDialog', 'getSearch', 'flag'],
}
</script>
<style lang="scss" scoped>
header {
    background-color: #09152f;
    border: 1pox solid #fff;

    .headerContent {
        padding: 0 40px;
        display: flex;
        line-height: 100px;
        justify-content: space-between;
        align-items: center;

        .search {
            display: flex;
            justify-content: flex-start;

            span {
                flex: 1;
            }

            .el-input {
                flex: 2;
                color: #1d3f57;

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

        }

        .findBtn {
            line-height: 100px;
            margin-left: 15px;
            display: flex;
            align-items: center;
            margin-top: -2px;

            .el-button {
                padding: 12px 25px;
                border-radius: 20px;
            }
        }

        .addBtn {
            background-color: #eb5d01;
            border: none;
            border-radius: 20px;
            padding: 12px 30px;
        }


    }
}
</style>

 src/views/systemSetting/device/grid/components/main/index.vue

New file
@@ -0,0 +1,508 @@
<template>
    <main>
        <div class="mainContent">
            <!-- 数据展示 -->
            <el-table ref="multipleTable"
                :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                :data="tableData" style="width: 100%" :row-class-name="tableRowClassName"
                @selection-change="tableChange">
                <el-table-column type="selection" min-width="5">
                </el-table-column>
                <el-table-column label="用户ID" min-width="6">
                    <template slot-scope="scope">{{ scope.row.id }}</template>
                </el-table-column>
                <el-table-column prop="nickName" label="用户名称" min-width="10">
                </el-table-column>
                <el-table-column prop="username" label="所属姓名" min-width="8">
                </el-table-column>
                <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>
                <el-table-column prop="jobTitle" label="所属职务" min-width="8">
                </el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="10">
                    <template slot-scope="scope">
                        <span>{{changeTime(scope.row)}}</span>
                    </template>
                </el-table-column>
                <el-table-column prop="status" label="启用" min-width="5">
                    <template slot-scope="scope">
                        <!-- @change="handleChangeStatus(scope.row)" -->
                        <el-switch class="switchStyle" v-model="scope.row.status"
                            active-color="#3fef9a" inactive-color="#000212" disabled>
                        </el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="operation" label="操作" min-width="20">
                    <template slot-scope="scope">
                        <div class="operation">
                            <span @click="handleChangeRole(scope.row,'role')">修改角色</span>
                            <span class="line">|</span>
                            <span @click="handleFind(scope.row)">查看</span>
                            <span class="line">|</span>
                            <span @click="handleChangeRole(scope.row,'password')">修改密码</span>
                            <span class="line">|</span>
                            <span @click="handleDelete(scope.row)">删除</span>
                            <span class="line">|</span>
                            <span @click="handleChangeRole(scope.row,'depart')">修改部门</span>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
            <!-- 查看页面 -->
            <el-dialog :visible.sync="dialogView" width="45%" v-if="dialogView"
                title="查看用户信息">
                <MyView :userInfo=userInfo></MyView>
            </el-dialog>
            <!-- 修改页面 -->
            <el-dialog :visible.sync="dialogUpdate" width="45%" v-if="dialogUpdate"
                :title="updateFlag ? flag.role ? '修改用户角色信息' : flag.depart ? '修改用户部门信息': '修改用户密码' :''"
                :before-close="handleClose">
                <updateUser :updateFlag="updateFlag" :userInfo=userInfo :flag=flag @closeDialog="closeDialog"
                    :getUserList="getUserList" v-if="!flag.password" />
                <MyPwd v-else :userInfo=userInfo @closeDialog="closeDialog"></MyPwd>
            </el-dialog>
            <!-- tools -->
            <div class="tools">
                <div class="funs">
                    <div class="funsItem funs-sp">
                        <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                    </div>
                    <div class="funsItem funs-sp">
                        <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
                    </div>
                    <div class="funsItem">
                        <el-select v-model="myIdx" placeholder="批量操作" @change="selectChange">
                            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"
                                :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </div>
                </div>
                <div class="pagination">
                    <el-pagination background :current-page="currentPage" layout="prev, pager, next" :total="totalNum"
                        :page-size="pageSize" @current-change="changeCurrentPage" @prev-click="handlePrev"
                        @next-click="handleNext">
                    </el-pagination>
                </div>
            </div>
        </div>
    </main>
</template>
<script>
import helper from '@/utils/mydate'
import updateUser from '../updateUser';
import MyPwd from '../password'
import MyView from '../myView'
export default {
    components: {
        updateUser, MyPwd,MyView
    },
    data() {
        return {
            tableData: [],
            search: "",
            dialogUpdate: false,
            dialogView:false,
            updateFlag: false,
            userInfo: '',
            totalNum: 0,
            pageSize: 10,
            currentPage: 1,
            renderFlag: false,
            flag: {
                role: false,
                password: false,
                depart: false,
            },
            all: false,
            unsame: false,
            myIdx: 0,
            preMyIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        async selectChange(list) {
            console.log(this.tempList);
            if (this.tempList.length !== 0) {
                this.preMyIdx = list;
                if (list === 3) {
                    await this.mulDelte(this.tempList);
                } else if (list === 2) {
                    await this.mulUpdateStatus(this.tempList, 0);
                } else {
                    await this.mulUpdateStatus(this.tempList, 1);
                }
                this.myIdx = 0;
            } else {
                this.myIdx = this.preMyIdx;
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        tableChange(list) {
            this.tempList = [];
            list.forEach(item => {
                this.tempList.push(item.id);
            })
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        // 批量删除用户信息
        mulDelte(idArr) {
            console.log(idArr);
            this.$confirm("您确定要进行批量删除用户吗?")
                .then(_ => {
                    this.$axios({
                        method: 'post',
                        url: 'sccg/admin/deleteBatch?ids=' + idArr,
                    })
                        .then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '删除用户信息成功',
                                })
                                this.getUserList();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            }
                            console.log(res);
                        })
                })
                .catch(err => { console.log(err) })
        },
        // 批量修改账号
        mulUpdateStatus(idArr, flag) {
            console.log(flag);
            this.$confirm(flag === 1 ? "您确定要进行批量启用用户吗?" : '您确定要进行批量禁用用户吗?')
                .then(_ => {
                    this.$axios({
                        method: 'post',
                        url: 'sccg/admin/updateStatusBatch?ids=' + idArr + '&status=' + flag,
                    })
                        .then(res => {
                            if (res.code === 200) {
                                this.$message({
                                    type: 'success',
                                    message: '更改用户状态成功',
                                })
                                this.getUserList();
                            } else {
                                this.$message({
                                    type: 'error',
                                    message: res.message
                                })
                            }
                            console.log(res);
                        })
                })
                .catch(err => { console.log(err) })
        },
        changeTime({ createTime }) {
            return helper(createTime);
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 删除用户
        handleDelete({ id }) {
            this.$confirm('确认删除？').then(_ => {
                this.$axios({
                    method: 'post',
                    url: 'sccg/admin/delete/' + id,
                }).then(res => {
                    console.log(res);
                    this.$message({
                        message: res.message,
                        type: 'success'
                    })
                    this.getUserList();
                })
            }).catch(_ => { })
        },
        closeDialog({ flag }) {
            this.dialogUpdate = flag;
            this.getUserList();
        },
        handleClose(done) {
            if (this.updateFlag) {
                this.$confirm('确认关闭？')
                    .then(_ => {
                        this.dialogUpdate = false;
                        this.updateFlag = false;
                        done();
                    })
                    .catch(_ => { });
            }else{
                done();
            }
        },
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 修改角色
        handleChangeRole(obj, mykey) {
            this.dialogUpdate = true;
            this.updateFlag = true;
            for (let key in this.flag) {
                if (key == mykey) {
                    this.flag[key] = true;
                } else {
                    this.flag[key] = false;
                }
            }
            this.userInfo = obj;
        },
        // 修改用户状态
        handleChangeStatus(obj) {
            let { id, status } = obj;
            status == true ? status = 1 : status = 0;
            this.$axios.post(`sccg/admin/updateStatus/` + id + '?status=' + status).then(res => {
                console.log(res);
            })
        },
        // 获取用户列表
        getUserList() {
            const that = this;
            const { currentPage, pageSize, search } = this;
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            this.$axios.get(`sccg/admin/list?keyword=${search}&current=${currentPage}&pageSize=${pageSize}`).then(res => {
                if (res.code === 200) {
                    res.data.records.forEach(item => {
                        item.status == 1 ? item.status = true : item.status = false;
                    })
                    that.totalNum = res.data.total;
                    that.tableData = res.data.records;
                    this.renderFlag = true;
                }
            })
        },
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogView = true;
            this.userInfo = rowData;
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
                return 'warning-row';
            } else {
                return 'success-row';
            }
            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: {
        refresh: {
            handler(newValue, oldValue) {
                if (newValue == true) {
                    this.search = '';
                    if (this.keyword != '') {
                        this.search = this.keyword;
                    }
                    this.currentPage = 1;
                    this.getUserList();
                    this.$emit('resetFresh', { flag: false })
                }
            },
            immediate: true
        }
    }
}
</script>
<style lang="scss" scoped>
main {
    background-color: #09152f;
    margin-top: 20px;
    padding-bottom: 50px;
    border: 1pox solid #fff;

    .mainTitle {
        line-height:60px;
    }

    .tools {
        display : flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;

        .funs {
            display: flex;
            .funs-sp{
                border: 1px solid #17324c;
            }
            .funsItem {
                line-height: 28px;
                display: flex;
                align-items: center;
                border-radius: 4px;
                font-size: 12px;
                margin-left: 10px;

                .el-checkbox {
                    width: 80px;
                    padding: 0 10px;
                }

                .el-select {
                    width: 120px;
                }

                &::v-deep .el-input__inner {
                    border: none;
                    background-color: #09152f;
                }

                &:hover {
                    border: 1px solid #4b9bb7;
                }

                &:hover .el-checkbox {
                    color: #4b9bb7;
                }
            }

        }

        .pagination {
            margin-top: 50px;
            display: flex;
            line-height: 50px;
            justify-content: center;

            .el-pagination {

                &::v-deep li,
                &::v-deep .btn-prev,
                &::v-deep .btn-next {
                    background-color: #071f39;
                    color: #4b9bb7;
                }

                &::v-deep .active {
                    background-color: #409eff;
                    color: #fff;
                }
            }
        }
    }

    .el-table {
        color: #4b9bb7;
        font-size: 10px;
        .operation {
            display: flex;
            font-size: 10px;
            .line {
                padding: 0 1px;
            }

            span:hover {
                cursor: pointer;
            }
        }
    }
    // &::v-deep .switchStyle .el-switch__label {
    //     position: absolute;
    //     display: none;
    //     color: #fff;
    // }

    // &::v-deep .el-switch__core {
    //     background-color: rgba(166, 166, 166, 1);
    // }

    // &::v-deep .switchStyle .el-switch__label--left {
    //     z-index: 9;
    //     left: 20px;
    // }

    // &::v-deep .switchStyle .el-switch__label--right {
    //     z-index: 9;
    //     left: 4px;
    // }

    // &::v-deep .switchStyle .el-switch__label.is-active {
    //     display: block;
    // }

    // &::v-deep .switchStyle.el-switch .el-switch__core,
    // &::v-deep .el-switch .el-switch__label {
    //     width: 56px !important;
    // }
}
</style>

 src/views/systemSetting/device/grid/components/myView/index.vue

New file
@@ -0,0 +1,202 @@
<template>
    <div class="updateUser">
        <main>
            <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="username">
                        <el-input v-model="user.username" placeholder="填写用户名称" disabled></el-input>
                    </el-form-item>
                    <!-- 用户密码 -->
                    <el-form-item class="optionItems" label="用户密码:" prop="password">
                        <el-input v-model="user.password" type="password" placeholder="请输入用户密码" disabled>
                        </el-input>
                    </el-form-item>
                    <!-- 所属用户姓名 -->
                    <el-form-item class="optionItem" label="所属用户姓名:" prop="nickName">
                        <el-input v-model="user.nickName" placeholder="请填写用户姓名" disabled></el-input>
                    </el-form-item>
                    <!-- 性别 -->
                    <el-form-item class="optionItem" label="性别:" prop="sex">
                        <el-radio-group v-model="user.sex" disabled>
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 是否党员 -->
                    <el-form-item class="optionItem" label="是否党员:" prop="isDy">
                        <el-radio-group v-model="user.isDy" disabled>
                            <el-radio :label="1">是</el-radio>
                            <el-radio :label="0">否</el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 所属手机号码 -->
                    <el-form-item class="optionItem" label="所属手机号码:" prop="mobile">
                        <el-input v-model="user.mobile" placeholder="请填写手机号码" disabled></el-input>
                    </el-form-item>
                    <!-- 邮箱地址 -->
                    <el-form-item class="optionItem" label="邮箱地址:" prop="email">
                        <el-input v-model="user.email" placeholder="请填写邮箱地址" disabled></el-input>
                    </el-form-item>
                    <!-- 选择角色 -->
                    <el-form-item class="optionItem" label="选择角色:" prop="role">
                        <el-select v-model="user.role" placeholder="请选择所属角色" multiple collapse-tags
                        disabled>
                            <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 用户类型 -->
                    <el-form-item class="optionItem" label="用户类型:" prop="userType">
                        <el-select v-model="user.userType" placeholder="请选择用户类型" 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="departmentId">
                        <el-input  v-model="user.departName"></el-input>
                    </el-form-item>
                    <!-- 当前职务 -->
                    <el-form-item class="optionItem" label="当前职务:" prop="jobTitle">
                        <el-input v-model="user.jobTitle" placeholder="请输入当前职务" disabled></el-input>
                    </el-form-item>
                    <!-- 填写所属mac地址 -->
                    <el-form-item class="optionItem" label="填写所属mac地址:" prop="mac">
                        <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地址" disabled></el-input>
                    </el-form-item>
                </el-form>
            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {
            },
            createUserRules: {
            },
            roleList: [
               
            ],
            typeList: [],
            departList: [],
        }
    },
    created() {
        const that = this;
        this.user = JSON.parse(JSON.stringify(that.userInfo));
        this.user.departName  = this.user.departName ? this.user.departName : '暂无所属部门'
        // 获取所有角色列表
        this.getRoleList();
        // 获取当前用户角色列表
        this.getUserRole(this.user.id)
        // 获取全部部门列表
        this.$axios.get('/sccg/depart/tree').then(res => {
            this.departList = res.data;
        })
    },
    methods: {
        // 获取角色列表
        getRoleList() {
            this.$axios({
                method: 'get',
                url: 'sccg/role/listAll',
            })
                .then(res => {
                    this.roleList = res.data;
                })
        },
        // 获取用户的角色列表
        getUserRole(id) {
            this.$axios({
                method: 'get',
                url: `sccg/admin/role/${id}`
            })
                .then(res => {
                    const arr = [];
                    res.data.forEach(item => {
                        arr.push(item.id);
                    })
                    this.user.role = arr;
                })
        },
    },
    props: ['userInfo']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    :deep(.el-tag) {
        background-color: #09152f;
    }

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

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

        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;

            .el-form-item__content {
                width: 400px;

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

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

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

        }
    }
}

.updateUser::v-deep .el-form-item__label {
    color: #4b9bb7;
}

.updateUser::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
}
</style>

 src/views/systemSetting/device/grid/components/password/index.vue

New file
@@ -0,0 +1,145 @@
<template>
    <div class="password">
        <el-form ref="pwd" label-width="140px" autoComplete="on" :model="user" :rules="passrules">
            <!-- 初始密码 -->
            <el-form-item class="optionItem" label="初始密码:" prop="password">
                <el-input v-model="user.password" type="password" placeholder="请填写初始密码"></el-input>
            </el-form-item>
            <!-- 新密码 -->
            <el-form-item class="optionItem" label="新密码:" prop="newPwd">
                <el-input v-model="user.newPwd" type="password" placeholder="请填写新密码"></el-input>
            </el-form-item>
            <!-- 新密码 -->
            <el-form-item class="optionItem" label="确认新密码:" prop="secondPwd">
                <el-input v-model="user.secondPwd" type="password" placeholder="确认您的新密码"></el-input>
            </el-form-item>

        </el-form>
        <div class="pwd-footer">
            <el-button @click="resetForm">取消</el-button>
            <el-button type="primary" @click="handleSubmit">提交</el-button>
        </div>
    </div>
</template>
<script>
export default {
    data() {
        const checkPwd = (rule, value, callback) => {
            if (!value) {
                callback(new Error('初始密码不能为空'))
            } else {
                callback();
            }
        }
        const checkNewPwd = (rule, value, callback) => {
            if (!value) {
                callback(new Error('新密码不能为空'))
            }else if(value === this.user.password){
                callback(new Error('新密码不能和旧密码一样'))
            } else {
                callback();
            }
        }
        const checkSame = (rule, value, callback) => {
            if (!value) {
                callback(new Error('确认密码不能为空'))
            } else if (value !== this.user.newPwd) {
                console.log(111);
                callback(new Error('您输入的两次密码结果不同'));
            } else {

                callback();
            }
        }
        return {
            user: {
                password: '',
                secondPwd: '',
                newPwd: '',
            },
            passrules: {
                password: [
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkPwd
                    },
                ],
                secondPwd: [
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkSame
                    }
                ],
                newPwd: [
                    {
                        required: true,
                        trigger: 'blur',
                        validator: checkNewPwd
                    }
                ]
            }
        }
    },
    props: ['userInfo', 'closeDialog'],
    created() {

    },
    methods: {
        // 提交
        handleSubmit() {
            const { userInfo,user } = this;
            this.$refs.pwd.validate((valid) => {
                if (valid) {
                    this.$axios({
                        method:'post',
                        url:'sccg/admin/updatePassword',
                        data:{
                            newPassword:user.newPwd,
                            oldPassword:user.password,
                            username:userInfo.username
                        }
                    })
                    .then(res=>{
                        if(res.code === 200){
                            this.$emit('closeDialog',{flag:false});
                            this.$message({
                                type:'success',
                                message:'密码修改成功'
                            })
                        }else{
                            this.$message({
                                type:'warning',
                                message:res.message
                            })
                        }
                    })
                } else {
                    return false;
                }
            })
        },
        // 清空表单
        resetForm() {
            this.$refs.pwd.resetFields();
            this.$emit('closeDialog',{flag:false});
        }
    }
}
</script>
<style lang="scss" scoped>
.password {
    padding: 50px 100px;

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

    .pwd-footer {
        display: flex;
        justify-content: center;
    }
}
</style>

 src/views/systemSetting/device/grid/components/updateUser/index.vue

New file
@@ -0,0 +1,291 @@
<template>
    <div class="updateUser">
        <main>
            <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="role" v-if="flag.role">
                        <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-form-item>
                    <!-- 所属部门 -->
                    <el-form-item class="optionItem" label="所属部门:" prop="departmentId" v-else>
                        <el-select v-model="user.departName" placeholder="请选择所属部门" :disabled="!flag.depart">
                            <el-option :value="mylabel">
                                <el-tree ref="tree" :check-strictly="true" :data="departList" :props="defaultProps"
                                    show-checkbox @check-change="handleCheck"
                                    :default-checked-keys="[selectOrg.orgsid[0],]" default-expand-all node-key="id">
                                </el-tree>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <div class="optionBtn">
                            <el-button type="primary" class="btn submit" @click.native.prevent="handleUser">提交
                            </el-button>
                        </div>
                    </el-form-item>
                </el-form>

            </div>
        </main>
    </div>
</template>
<script>
export default {
    data() {
        return {
            user: {
            },
            createUserRules: {
            },
            roleList: [

            ],
            departList: [],
            mylabel: "",
            defaultProps: {
                children: "children",
                label: "departName",
            },
            selectOrg: {
                orgsid: [],
            },
            tempName: '',
            tempRole: []
        }
    },
    created() {
        this.user = JSON.parse(JSON.stringify(this.userInfo));
        this.tempName = this.user.departName;
        this.selectOrg.orgsid.push(this.user.departmentId);
        // 获取所有角色列表
        this.getRoleList();
        // 获取当前用户角色列表
        this.getUserRole(this.user.id)
        // 获取全部部门列表
        this.$axios.get('/sccg/depart/tree').then(res => {
            this.departList = res.data;
        })
    },
    methods: {
        // 修改部门
        changeDepart(data) {
            this.departList.forEach(item => {
                if (item.id === data) {
                    this.user.departName = item.departName;
                }
            })
        },
        // 修改用户信息
        handleUser() {
            const { flag, user, tempName, selectOrg, tempRole, isArraySame } = this;
            let umsDepartManage={userId:user.id,departId:selectOrg.orgsid[0]}
            this.$refs.user.validate((valid) => {
                if (valid) {
                    user.isDy = `${user.isDy}`;
                    if (flag.depart) {
                        if (tempName === user.departName) {
                            this.$message({
                                type: 'warning',
                                message: '您的部门还未更改'
                            })
                        } else {
                            if (user.departName) {
                                this.$axios({
                                    method: 'put',
                                    url: `/sccg/depart/user_update_depart?userId=`+user.id+'&departId='+selectOrg.orgsid[0]
                                })
                                    .then(res => {
                                        this.$message({
                                            type: res.code === 200 ? 'success' : 'warning',
                                            message: res.message,
                                        })
                                        this.getUserList();
                                        this.$emit('closeDialog', { flag: false });
                                    })
                            } else {
                                this.$message({
                                    type: 'warning',
                                    message: '用户部门不能为空'
                                })
                            }
                        }

                    } else {
                        if (user.role.length === 0) {
                            this.$message({
                                type: 'warning',
                                message: '用户角色不能为空',
                            })
                        }
                        else if (isArraySame(tempRole, user.role) && tempRole.length === user.role.length) {
                            this.$message({
                                type: 'warning',
                                message: '您还未更改角色',
                            })
                        }
                        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;
                }
            })
        },
        // 获取角色列表
        getRoleList() {
            this.$axios({
                method: 'get',
                url: 'sccg/role/listAll',
            })
                .then(res => {
                    this.roleList = res.data;
                })
        },
        // 获取用户的角色列表
        getUserRole(id) {
            this.$axios({
                method: 'get',
                url: `sccg/admin/role/${id}`
            })
                .then(res => {
                    const arr = [];
                    res.data.forEach(item => {
                        arr.push(item.id);
                    })
                    this.user.role = arr;
                    this.tempRole = arr;
                })
        },
        // 部门修改
        handleCheck(data, checked) {
            console.log(this.selectOrg.orgsid[0])
            this.user.departName = data.departName;
            // 获取当前选择的id在数组中的索引
            const indexs = this.selectOrg.orgsid.indexOf(data.id);
            // 如果不存在数组中，并且数组中已经有一个id并且checked为true的时候，代表不能再次选择。
            if (indexs < 0 && this.selectOrg.orgsid.length === 1 && checked) {
                this.$message({
                    message: "只能选择一个部门！",
                    type: "warning",
                    showClose: true,
                });
                // 设置已选择的节点为false 很重要
                this.$refs.tree.setChecked(data, false);
            } else if (this.selectOrg.orgsid.length === 0 && checked) {
                // 发现数组为空 并且是已选择
                // 防止数组有值，首先清空，再push
                this.selectOrg.orgsid = [];
                this.selectOrg.orgsid.push(data.id);
            } else if (
                indexs >= 0 &&
                this.selectOrg.orgsid.length === 1 &&
                !checked
            ) {
                // 再次直接进行赋值为空操作
                this.selectOrg.orgsid = [];
                this.user.departName = ''
            }
        },
        // 判断数组是否相等
        isArraySame(arr1, arr2) {
            let flag = true
            arr1.sort((a, b) => a - b)
            arr2.sort((a, b) => a - b)
            arr1.forEach(item => {
                arr2.forEach(child => {
                    if (item !== child) {
                        flag = false
                    }
                })
            })
            return flag
        }
    },
    props: ['userInfo', 'flag', 'closeDialog', 'getUserList']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    :deep(.el-tag) {
        background-color: #09152f;
    }

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

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

        .mainContent {
            display: flex;
            justify-content: center;
            padding-top: 50px;

            .el-form-item__content {
                width: 400px;

                .el-select {
                    width: 100%;
                }
            }

            .optionHandleSp {
                display: flex;

                .areaNumber,
                .moreNumber {
                    flex: 1;
                }

                .telNumber {
                    flex: 2;
                }
            }

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

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

        }
    }
}

.updateUser::v-deep .el-form-item__label {
    color: #4b9bb7;
}

.updateUser::v-deep .el-input__inner {
    background-color: #09152f;
    border: 1px solid #17324c;
}
</style>

 src/views/systemSetting/device/grid/index.vue

@@ -1,5 +1,49 @@
<template>
    <div class="grid">
      222
    <div class="userList">
        <myHeader @setDialog="changeDialog" @getSearch="getSearch"></myHeader>
        <myMain :refresh="isFresh" :keyword="keyword" @resetFresh="resetFresh" />
    </div>
</template>
</template>
<script>
import myHeader from "./components/header"
import myMain from "./components/main"
export default {
    components: {
        myHeader,
        myMain
    },
    data() {
        return {
            isFresh: false,
            keyword: '',
        }
    },
    created(){
        
    },
    methods: {
        // 获取搜索返回结果
        getSearch({ text }) {
            this.keyword = text;
            this.isFresh = true;
        },
        // 获取刷新结果
        changeDialog({ flag }) {
            console.log(flag);
            this.isFresh = flag;
        },
        // 重置isFresh
        resetFresh({ flag }) {
            this.isFresh = flag;
            console.log(this.isFresh);
        },
    }
}
</script>
<style lang="scss" scoped>
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;
}
</style>