运营管理的基础设置和案件池首页

“dzb”

2022-09-28 15079a363658567a62db46ccfe489f04af79a687

运营管理的基础设置和案件池首页

 src/App.vue

@@ -49,23 +49,24 @@
};
</script>
<style>
  .el-select-dropdown__item{
  height: 100%;

.el-select-dropdown__item{
  height: 100% !important;
}
.el-select-dropdown,.popper-class{
  background-color: #17324c;
  background-color: #17324c !important;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #17324c;
  background-color: #17324c !important;
}
.el-tree{
  background-color: #17324c;
  background-color: #17324c !important;
}
.el-tree-node__content:hover, .el-upload-list__item:hover{
  background-color: #09152f;
  color: #4b9bb7;
  background-color: #09152f !important;
  color: #4b9bb7 !important;
}
.el-tree-node:focus>.el-tree-node__content{
  background-color: #09152f;
  background-color: #09152f !important;
}
</style>

 src/assets/imgs/login/login.png

 src/assets/imgs/login/login_bg.jpg

Binary files differ

 src/components/Upload/index.vue

@@ -38,8 +38,8 @@
            this.$emit('getPicUrl', { obj: res.data, value: this.mykey });
        },
        getToken() {
            const token = localStorage.getItem('token');
            const tokenHead = localStorage.getItem('tokenHead');
            const token = sessionStorage.getItem('token');
            const tokenHead = sessionStorage.getItem('tokenHead');
            if (token && tokenHead) {
                return { Authorization: tokenHead + token }
            }

 src/views/layout/components/Menu/index.vue

@@ -84,10 +84,10 @@
                <span class="secondSpan">事项处理管理</span>
              </template>
              <el-menu-item index="/home/operate/casepool/pool">案件池</el-menu-item>
              <el-menu-item index="/home/operate/casepool/escalation">上报管理</el-menu-item>
              <el-menu-item index="/home/operate/casepool/dispatch">调度管理</el-menu-item>
              <!-- <el-menu-item index="/home/operate/casepool/escalation">上报管理</el-menu-item>
              <el-menu-item index="/home/operate/casepool/dispatch">调度管理</el-menu-item> -->
              <!-- <el-menu-item index="/home/operate/casepool">再学习管理</el-menu-item> -->
              <el-menu-item index="/home/operate/casepool/notDeal">暂不处理</el-menu-item>
              <!-- <el-menu-item index="/home/operate/casepool/notDeal">暂不处理</el-menu-item> -->
            </el-submenu>
            <el-menu-item index="/home/operate/myWait">我的待办</el-menu-item>
            <el-submenu index="/home/operate/rectification" class="secondMenu">

 src/views/login/index.vue

@@ -94,9 +94,16 @@
    };
  },
  created() {
    const pic = JSON.parse(localStorage.getItem('pic'));
    const pic = JSON.parse(sessionStorage.getItem('pic'));
    if(pic){
      this.imgUrl = pic.loginPageIconUrl
    }else{
      this.$axios({
          method: 'get',
          url: 'sccg/system/portal/logo/search',
        }).then(res => {
          this.imgUrl = res.data.loginPageIconUrl
        })
    }
   },
  methods: {
@@ -176,6 +183,7 @@
  .logo>img {
    width: 75px;
    height: 75px;
    border-radius: 4px;
  }

  .text-r {

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

File was deleted

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

File was deleted

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

New file
@@ -0,0 +1,195 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['getUserList']
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

@@ -1,93 +1,216 @@
<template>
    <div class="otherInterface">
    <div class="userList">
        <div class="headerTitle">
            运营管理》基础设置》违建事项设置
        </div>
        <header>
            <div class="headerTitle">运营管理 >> 基础设置 > 违建事项设置</div>
            <div class="headerContent">
                <div class="search">
                    <span>筛选条件:</span>
                    <el-input placeholder="请输入内容" v-model="context"></el-input>
                    <div class="findBtn">
                        <el-button type="primary" @click="getUserList">查询</el-button>
                    </div>
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <!-- <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser :refresh="getUserList" />
                    </el-dialog> -->
                </div>
            </div>
        </header>
        <main>
            <div class="mainHeader">
                <span>筛选条件:</span>
                <el-input placeholder="请输入内容"></el-input>
            </div>
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                <!-- 数据展示 -->
                <el-table ref="multipleTable"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55">
                    :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="编号" prop="applicationName" min-width="10">
                    <el-table-column prop="number" label="编号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="所属类型" min-width="10">
                    <el-table-column prop="typeFirst" label="所属类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="websiteUrl" label="所属类别" min-width="20">
                    <el-table-column prop="type" label="所属类别" min-width="10">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10">
                    <el-table-column prop="operation" label="操作" min-width="10">
                        <template slot-scope="scope">
                            <span @click="handleView(scope.row)">查看</span>
                            <span class="line">|</span>
                            <span @click="handleDelete(scope.row)">删除</span>
                            <div class="operation">
                                <span @click="handleFind(scope.row)">查看</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <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> -->
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '修改违建信息' :'查看违建信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
        <footer>
            <!-- 创建弹窗 -->
            <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate"
                :before-close="handleClose">
                <createInterface />
            </el-dialog>
            <!-- 查看弹窗 -->
            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'修改第三方接口':'查看第三方接口'" width="45%"
                v-if="dialogUpdate" :before-close="handleClose">
                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
            </el-dialog>
        </footer>
    </div>
</template>
<script>
import createInterface from './components/createInterface';
import viewInterface from './components/viewInterface'
import updateUser from "./updateUser"
import createUser from "./createUser"
export default {
    components: {
        createInterface, viewInterface
        updateUser,createUser
    },
    data() {
        return {
            tableData: [],
            search: "",
            context: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            // totalNum: 200,
            // pageSize: 10,
            // currentPage: 1,
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    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;
                }
        // 批量删除
        mulDelete(idArr){
            console.log(idArr);
            this.$axios({
                method:'delete',
                url:'sccg/illegal_building/batch_delete?ids='+idArr,
            }).then(res=>{
                this.getUserList();
                this.$message({
                    message:res.message,
                    type:res.code === 200 ? 'success' : 'warning'
                })
            })
        },
        // 执行下拉框操作
        selectChange(val) {
            let ids = [];
            this.tempList.forEach(item => {
                ids.push(item.number);
            })
            if (ids.length !== 0) {
                if (val === 3) {
                    this.mulDelete(ids);
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        // 监听表格选中状态
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        // 全选
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 删除单条数据
        handleDelete({ number }) {
            console.log(number);
            this.$confirm('确认删除？')
                .then(_ => {
                    console.log(1);
                    this.$axios({
                        method: 'delete',
                        url: `sccg/illegal_building/delete?id=${number}`,
                    })
                        .then(res => {
                            console.log(res);
                            this.$message({
                                type: res.code === 200 ? 'success' : 'warning',
                                message: res.message
                            })

                            this.getUserList();
                        })
                })
                .catch(_ => { console.log(2) });
        },
        // 获取用户列表
        getUserList() {
            const { currentPage, pageSize, context } = this;
            // 获取所有用户信息
            this.$axios({
                method: 'get',
                url: `sccg/illegal_building/query?current=${currentPage}&size=${pageSize}&keyWord=${context}`,
            })
                .then(res => {
                    this.tableData = res.data.records;
                    this.totalNum = res.data.total;
                })
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
@@ -98,149 +221,276 @@
            }
            return '';
        },
        // 打开新增界面
        handleAdd() {
            this.dialogCreate = true;
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = false;
            this.userInfo = rowData;
        },
        // 创建弹窗关闭
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        changeDialog(val) {
            this.dialogUpdate = val.dialogUpdate;
            console.log(val);
        },
        handleClose(done) {
            const that = this;
            this.$confirm('确认关闭？')
                .then(_ => {
                    that.dialogCreate = false;
                    this.dialogCreate = false;
                    this.dialogUpdate = false;
                    done();
                })
                .catch(_ => { });
        },
        // 创建查看弹窗
        handleView(rowData) {
            this.userInfo = rowData;
            this.dialogUpdate = true;
        },
        // 删除第三方接口
        handleDelete({ id }) {
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
                params: {
                    id
                }
            }).then(res => {
                console.log(res);
            })
        }
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 上一页点击事件
        // handlePrev(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 下一页点击事件
        // handleNext(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;

    .headerTitle {
        line-height: 40px;
    }

    header {
        display: flex;
        line-height: 60px;
        justify-content: space-between;
        padding: 0 20px;
        color: #4b9bb7;
        &::v-deep .el-button {
            background-color: #eb5d01;
            border: none;
            color: #fff;
            border-radius: 20px;
        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;
            }
        }
    }

    main {
        padding: 10px 20px;
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;

        .mainHeader {
            padding-left: 20px;
            display: flex;
        .mainTitle {
            line-height: 60px;
            color: #4b9bb7;
            background-color: #09152f;
            .el-input {
                width: 180px;
                height: 35px;
                margin-left: 10px;
        }

                &::v-deep .el-input__inner {
                    background-color: #09152f;
        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

            .funs {
                display: flex;

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
                    }
                }
            }
        }

        .mainContent {
            margin-top: 20px;
            .el-table {
        .el-table {
            color: #4b9bb7;
            font-size: 10px;

            &::v-deep .cell {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            &::v-deep .el-table__empty-block {
                background-color: #09152f;
            }

            &::v-deep .el-table__empty-block {
                color: #4b9bb7;

                &::v-deep .el-table__empty-block {
                    background-color: #06122c;
                }

                &::v-deep .el-table__empty-text {
                    color: #4b9bb7;
                }

                &::v-deep .warning-row {
                    background-color: #06122c;
                }

                &::v-deep .success-row {
                    background-color: #071f39;
                }
            }

            .line {
                padding: 0 5px;
                // margin-top: -10px;
            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
        }

        .el-table::v-deep .warning-row {
            background: #06122c;
        }

        .el-table::v-deep .success-row {
            background: #071f39;
        }

        &::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: 50px !important;
        }
    }

    footer {
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
    }

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }
    &::v-deep .el-dialog__header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        line-height: 60px;
    }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }
    &::v-deep .el-dialog__title {
        color: #4b9bb7;
    }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }
    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    &::v-deep .el-dialog__body {
        padding: 0;
    }
}
</style>

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

New file
@@ -0,0 +1,131 @@
<template>
    <div class="updateUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option> 
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属类别:" prop="type">
                        <el-input type="textarea" v-model="things.type" disabled ></el-input>
                    </el-form-item>
                    <!-- <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
            },
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeFirst();
    },
    methods: {
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

 src/views/operate/baseSetting/threepack/components/createInterface/index.vue

File was deleted

 src/views/operate/baseSetting/threepack/components/viewInterface/index.vue

File was deleted

 src/views/operate/baseSetting/threepack/createUser/index.vue

New file
@@ -0,0 +1,195 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['getUserList']
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

@@ -1,94 +1,252 @@
<template>
    <div class="otherInterface">
    <div class="userList">
        <div class="headerTitle">
            运营管理》基础设置》违规事项设置
        </div>
        <header>
            <div class="headerTitle">运营管理 >> 基础设置 > 门前三包设置</div>
            <div class="headerContent">
                <div class="search">
                    <span>筛选条件:</span>
                    <el-input placeholder="请输入内容" v-model="context"></el-input>
                    <div class="findBtn">
                        <el-button type="primary" @click="getUserList">查询</el-button>
                    </div>
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <!-- <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser :refresh="getUserList" />
                    </el-dialog> -->
                </div>
            </div>
        </header>
        <main>
            <div class="mainHeader">
                <span>筛选条件:</span>
                <el-input placeholder="请输入内容"></el-input>
            </div>
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                <!-- 数据展示 -->
                <el-table ref="multipleTable"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55">
                    :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="编号" prop="applicationName" min-width="10">
                    <el-table-column prop="number" label="违规事项编号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="所属类型" min-width="10">
                    <el-table-column prop="typeThird" label="所属类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="websiteUrl" label="所属类别" min-width="20">
                    <el-table-column prop="typeSecond" label="所属大类" min-width="10">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10">
                    <el-table-column prop="typeFirst" label="所属小类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="案由" min-width="45">
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="10">
                        <template slot-scope="scope">
                            <span @click="handleView(scope.row)">查看</span>
                            <span class="line">|</span>
                            <span @click="handleDelete(scope.row)">删除</span>
                            <div class="operation">
                                <span @click="handleFind(scope.row)">查看</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <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> -->
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
        <footer>
            <!-- 创建弹窗 -->
            <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate"
                :before-close="handleClose">
                <createInterface />
            </el-dialog>
            <!-- 查看弹窗 -->
            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'修改第三方接口':'查看第三方接口'" width="45%"
                v-if="dialogUpdate" :before-close="handleClose">
                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
            </el-dialog>
        </footer>
    </div>
</template>
<script>
import createInterface from './components/createInterface';
import viewInterface from './components/viewInterface'
import updateUser from "./updateUser"
import createUser from "./createUser"
export default {
    components: {
        createInterface, viewInterface
        updateUser,createUser
    },
    data() {
        return {
            tableData: [],
            search: "",
            context: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            // totalNum: 200,
            // pageSize: 10,
            // currentPage: 1,
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    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;
                }
        // 批量删除
        mulDelete(idArr){
            console.log(idArr);
            this.$axios({
                method:'delete',
                url:'sccg/violations/batch_delete?ids='+idArr,
            }).then(res=>{
                this.getUserList();
                this.$message({
                    message:res.message,
                    type:res.code === 200 ? 'success' : 'warning'
                })
            })
        },
        // 执行下拉框操作
        selectChange(val) {
            let ids = [];
            this.tempList.forEach(item => {
                ids.push(item.number);
            })
            if (ids.length !== 0) {
                if (val === 3) {
                    this.mulDelete(ids);
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        // 监听表格选中状态
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        // 全选
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 删除单条数据
        handleDelete({ number }) {
            console.log(number);
            this.$confirm('确认删除？')
                .then(_ => {
                    console.log(1);
                    this.$axios({
                        method: 'delete',
                        url: `sccg/violations/delete?id=${number}`,
                    })
                        .then(res => {
                            console.log(res);
                            this.$message({
                                type: res.code === 200 ? 'success' : 'warning',
                                message: res.message
                            })

                            this.getUserList();
                        })
                })
                .catch(_ => { console.log(2) });
        },
        // 获取用户列表
        getUserList() {
            const { currentPage, pageSize, context } = this;
            // 获取所有用户信息
            this.$axios({
                method: 'get',
                url: `sccg/violations/query?current=${currentPage}&size=${pageSize}&keyWord=${context}`,
            })
                .then(res => {
                    this.tableData = res.data.records;
                    this.totalNum = res.data.total;
                })
        },
        // search() {
        //     const that = this;
        //     const { currentPage, pageSize, context } = this;
        //     // 获取所有用户信息
        //     if (context == '') {
        //         this.$axios.get('sccg/role/list?keyword=' + '&pageNum=' + currentPage + '&pageSize=' + pageSize).then(res => {
        //             if (res.code === 200) {
        //                 console.log(res);
        //                 res.data.list.forEach(item => {
        //                     // item.createTime = helper(item.createTime);
        //                     item.status == 1 ? item.status = true : item.status = false;
        //                 })
        //                 that.tableData = res.data.list;
        //                 this.totalNum = res.data.list.length;
        //             }
        //         })
        //     } else {
        //         this.$axios({
        //             method: 'get',
        //             url: 'sccg/role/list?keyword=' + context + '&pageNum=' + currentPage + '&pageSize=' + pageSize,
        //         }).then(res => {
        //             if (res.code === 200) {
        //                 res.data.list.forEach(item => {
        //                     item.status == 1 ? item.status = true : item.status = false;
        //                 })
        //                 that.tableData = res.data.list
        //                 this.totalNum = res.data.list.length;
        //             }
        //         })
        //     }
        // },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
@@ -98,149 +256,276 @@
            }
            return '';
        },
        // 打开新增界面
        handleAdd() {
            this.dialogCreate = true;
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = false;
            this.userInfo = rowData;
        },
        // 创建弹窗关闭
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        changeDialog(val) {
            this.dialogUpdate = val.dialogUpdate;
            console.log(val);
        },
        handleClose(done) {
            const that = this;
            this.$confirm('确认关闭？')
                .then(_ => {
                    that.dialogCreate = false;
                    this.dialogCreate = false;
                    this.dialogUpdate = false;
                    done();
                })
                .catch(_ => { });
        },
        // 创建查看弹窗
        handleView(rowData) {
            this.userInfo = rowData;
            this.dialogUpdate = true;
        },
        // 删除第三方接口
        handleDelete({ id }) {
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
                params: {
                    id
                }
            }).then(res => {
                console.log(res);
            })
        }
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 上一页点击事件
        // handlePrev(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 下一页点击事件
        // handleNext(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;

    .headerTitle {
        line-height: 40px;
    }

    header {
        display: flex;
        line-height: 60px;
        justify-content: space-between;
        padding: 0 20px;
        color: #4b9bb7;
        &::v-deep .el-button {
            background-color: #eb5d01;
            border: none;
            color: #fff;
            border-radius: 20px;
        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;
            }
        }
    }

    main {
        padding: 10px 20px;
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;

        .mainHeader {
            padding-left: 20px;
            display: flex;
        .mainTitle {
            line-height: 60px;
            color: #4b9bb7;
            background-color: #09152f;
            .el-input {
                width: 180px;
                height: 35px;
                margin-left: 10px;
        }

                &::v-deep .el-input__inner {
                    background-color: #09152f;
        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

            .funs {
                display: flex;

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
                    }
                }
            }
        }

        .mainContent {
            margin-top: 20px;
            .el-table {
        .el-table {
            color: #4b9bb7;
            font-size: 10px;

            &::v-deep .cell {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            &::v-deep .el-table__empty-block {
                background-color: #09152f;
            }

            &::v-deep .el-table__empty-block {
                color: #4b9bb7;

                &::v-deep .el-table__empty-block {
                    background-color: #06122c;
                }

                &::v-deep .el-table__empty-text {
                    color: #4b9bb7;
                }

                &::v-deep .warning-row {
                    background-color: #06122c;
                }

                &::v-deep .success-row {
                    background-color: #071f39;
                }
            }

            .line {
                padding: 0 5px;
                // margin-top: -10px;
            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
        }

        .el-table::v-deep .warning-row {
            background: #06122c;
        }

        .el-table::v-deep .success-row {
            background: #071f39;
        }

        &::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: 50px !important;
        }
    }

    footer {
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
    }

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }
    &::v-deep .el-dialog__header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        line-height: 60px;
    }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }
    &::v-deep .el-dialog__title {
        color: #4b9bb7;
    }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }
    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    &::v-deep .el-dialog__body {
        padding: 0;
    }
}
</style>

 src/views/operate/baseSetting/threepack/updateUser/index.vue

New file
@@ -0,0 +1,195 @@
<template>
    <div class="updateUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <!-- <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

File was deleted

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

File was deleted

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

New file
@@ -0,0 +1,195 @@
<template>
    <div class="createUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" >
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['getUserList']
}
</script>
<style lang="scss" scoped>
.createUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

@@ -1,98 +1,252 @@
<template>
    <div class="otherInterface">
    <div class="userList">
        <div class="headerTitle">
            运营管理》基础设置》违规事项设置
        </div>
        <header>
            <div class="headerTitle">运营管理 >> 基础设置 > 违规事项设置</div>
            <div class="headerContent">
                <div class="search">
                    <span>筛选条件:</span>
                    <el-input placeholder="请输入内容" v-model="context"></el-input>
                    <div class="findBtn">
                        <el-button type="primary" @click="getUserList">查询</el-button>
                    </div>
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <!-- <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser :refresh="getUserList" />
                    </el-dialog> -->
                </div>
            </div>
        </header>
        <main>
            <div class="mainHeader">
                <span>筛选条件:</span>
                <el-input placeholder="请输入内容"></el-input>
            </div>
            <div class="mainContent">
                <!-- @selection-change="handleSelectionChange" -->
                <!-- 数据渲染 -->
                <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
                <!-- 数据展示 -->
                <el-table ref="multipleTable"
                    :header-cell-style="{background:'#06122c','font-size':'12px',color:'#4b9bb7','font-weight':'650','line-height':'45px'}"
                    :row-class-name="tableRowClassName">
                    <el-table-column type="selection" width="55">
                    :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="违规事项编号" prop="applicationName" min-width="10">
                    <el-table-column prop="number" label="违规事项编号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="applicationType" label="所属类型" min-width="10">
                    <el-table-column prop="typeThird" label="所属类型" min-width="10">
                    </el-table-column>
                    <el-table-column prop="websiteUrl" label="所属大类" min-width="10">
                    <el-table-column prop="typeSecond" label="所属大类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="所属小类" min-width="10">
                    <el-table-column prop="typeFirst" label="所属小类" min-width="10">
                    </el-table-column>
                    <el-table-column prop="description" label="描述(案由)" min-width="20">
                    <el-table-column prop="type" label="案由" min-width="45">
                    </el-table-column>
                    <el-table-column label="操作" min-width="10">
                    <el-table-column prop="operation" label="操作" min-width="10">
                        <template slot-scope="scope">
                            <span @click="handleView(scope.row)">查看</span>
                            <span class="line">|</span>
                            <span @click="handleDelete(scope.row)">删除</span>
                            <div class="operation">
                                <span @click="handleFind(scope.row)">查看</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">删除</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页 -->
                <!-- <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> -->
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
        <footer>
            <!-- 创建弹窗 -->
            <el-dialog :visible.sync="dialogCreate" title="新增第三方接口" width="45%" v-if="dialogCreate"
                :before-close="handleClose">
                <createInterface />
            </el-dialog>
            <!-- 查看弹窗 -->
            <el-dialog :visible.sync="dialogUpdate" :title="updateFlag ?'修改第三方接口':'查看第三方接口'" width="45%"
                v-if="dialogUpdate" :before-close="handleClose">
                <viewInterface :updateFlag="updateFlag" :userInfo=userInfo />
            </el-dialog>
        </footer>
    </div>
</template>
<script>
import createInterface from './components/createInterface';
import viewInterface from './components/viewInterface'
import updateUser from "./updateUser"
import createUser from "./createUser"
export default {
    components: {
        createInterface, viewInterface
        updateUser,createUser
    },
    data() {
        return {
            tableData: [],
            search: "",
            context: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            // totalNum: 200,
            // pageSize: 10,
            // currentPage: 1,
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    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;
                }
        // 批量删除
        mulDelete(idArr){
            console.log(idArr);
            this.$axios({
                method:'delete',
                url:'sccg/violations/batch_delete?ids='+idArr,
            }).then(res=>{
                this.getUserList();
                this.$message({
                    message:res.message,
                    type:res.code === 200 ? 'success' : 'warning'
                })
            })
        },
        // 执行下拉框操作
        selectChange(val) {
            let ids = [];
            this.tempList.forEach(item => {
                ids.push(item.number);
            })
            if (ids.length !== 0) {
                if (val === 3) {
                    this.mulDelete(ids);
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        // 监听表格选中状态
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        // 全选
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 删除单条数据
        handleDelete({ number }) {
            console.log(number);
            this.$confirm('确认删除？')
                .then(_ => {
                    console.log(1);
                    this.$axios({
                        method: 'delete',
                        url: `sccg/violations/delete?id=${number}`,
                    })
                        .then(res => {
                            console.log(res);
                            this.$message({
                                type: res.code === 200 ? 'success' : 'warning',
                                message: res.message
                            })

                            this.getUserList();
                        })
                })
                .catch(_ => { console.log(2) });
        },
        // 获取用户列表
        getUserList() {
            const { currentPage, pageSize, context } = this;
            // 获取所有用户信息
            this.$axios({
                method: 'get',
                url: `sccg/violations/query?current=${currentPage}&size=${pageSize}&keyWord=${context}`,
            })
                .then(res => {
                    this.tableData = res.data.records;
                    this.totalNum = res.data.total;
                })
        },
        // search() {
        //     const that = this;
        //     const { currentPage, pageSize, context } = this;
        //     // 获取所有用户信息
        //     if (context == '') {
        //         this.$axios.get('sccg/role/list?keyword=' + '&pageNum=' + currentPage + '&pageSize=' + pageSize).then(res => {
        //             if (res.code === 200) {
        //                 console.log(res);
        //                 res.data.list.forEach(item => {
        //                     // item.createTime = helper(item.createTime);
        //                     item.status == 1 ? item.status = true : item.status = false;
        //                 })
        //                 that.tableData = res.data.list;
        //                 this.totalNum = res.data.list.length;
        //             }
        //         })
        //     } else {
        //         this.$axios({
        //             method: 'get',
        //             url: 'sccg/role/list?keyword=' + context + '&pageNum=' + currentPage + '&pageSize=' + pageSize,
        //         }).then(res => {
        //             if (res.code === 200) {
        //                 res.data.list.forEach(item => {
        //                     item.status == 1 ? item.status = true : item.status = false;
        //                 })
        //                 that.tableData = res.data.list
        //                 this.totalNum = res.data.list.length;
        //             }
        //         })
        //     }
        // },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
@@ -102,149 +256,276 @@
            }
            return '';
        },
        // 打开新增界面
        handleAdd() {
            this.dialogCreate = true;
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = false;
            this.userInfo = rowData;
        },
        // 创建弹窗关闭
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        changeDialog(val) {
            this.dialogUpdate = val.dialogUpdate;
            console.log(val);
        },
        handleClose(done) {
            const that = this;
            this.$confirm('确认关闭？')
                .then(_ => {
                    that.dialogCreate = false;
                    this.dialogCreate = false;
                    this.dialogUpdate = false;
                    done();
                })
                .catch(_ => { });
        },
        // 创建查看弹窗
        handleView(rowData) {
            this.userInfo = rowData;
            this.dialogUpdate = true;
        },
        // 删除第三方接口
        handleDelete({ id }) {
            console.log(id);
            this.$axios.delete('sccg/system/portal/thirdApp/delete', {
                params: {
                    id
                }
            }).then(res => {
                console.log(res);
            })
        }
        // // 当前页改变触发事件
        // changeCurrentPage(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 上一页点击事件
        // handlePrev(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
        // // 下一页点击事件
        // handleNext(page) {
        //     this.currentPage = page;
        //     this.getUserList();
        // },
    }
}
</script>
<!-- sccg/system/portal/thirdApp/search -->
<style lang="scss" scoped>
.otherInterface {
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;

    .headerTitle {
        line-height: 40px;
    }

    header {
        display: flex;
        line-height: 60px;
        justify-content: space-between;
        padding: 0 20px;
        color: #4b9bb7;
        &::v-deep .el-button {
            background-color: #eb5d01;
            border: none;
            color: #fff;
            border-radius: 20px;
        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;
            }
        }
    }

    main {
        padding: 10px 20px;
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;

        .mainHeader {
            padding-left: 20px;
            display: flex;
        .mainTitle {
            line-height: 60px;
            color: #4b9bb7;
            background-color: #09152f;
            .el-input {
                width: 180px;
                height: 35px;
                margin-left: 10px;
        }

                &::v-deep .el-input__inner {
                    background-color: #09152f;
        .tools {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

            .funs {
                display: flex;

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
                    }
                }
            }
        }

        .mainContent {
            margin-top: 20px;
            .el-table {
        .el-table {
            color: #4b9bb7;
            font-size: 10px;

            &::v-deep .cell {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            &::v-deep .el-table__empty-block {
                background-color: #09152f;
            }

            &::v-deep .el-table__empty-block {
                color: #4b9bb7;

                &::v-deep .el-table__empty-block {
                    background-color: #06122c;
                }

                &::v-deep .el-table__empty-text {
                    color: #4b9bb7;
                }

                &::v-deep .warning-row {
                    background-color: #06122c;
                }

                &::v-deep .success-row {
                    background-color: #071f39;
                }
            }

            .line {
                padding: 0 5px;
                // margin-top: -10px;
            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
        }

        .el-table::v-deep .warning-row {
            background: #06122c;
        }

        .el-table::v-deep .success-row {
            background: #071f39;
        }

        &::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: 50px !important;
        }
    }

    footer {
    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
    }

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }
    &::v-deep .el-dialog__header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        line-height: 60px;
    }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
            line-height: 60px;
        }
    &::v-deep .el-dialog__title {
        color: #4b9bb7;
    }

        &::v-deep .el-dialog__title {
            color: #4b9bb7;
        }
    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        }
    &::v-deep .el-dialog__body {
        padding: 0;
    }
}
</style>

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

New file
@@ -0,0 +1,195 @@
<template>
    <div class="updateUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <!-- <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

File was deleted

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

New file
@@ -0,0 +1,3 @@
<template>
    <div>2</div>
</template>

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

New file
@@ -0,0 +1,61 @@
<template>
    <div class="createUser">
        <div class="chooseArea" v-if="flag">
            <el-button type="primary" @click="toShow(0,'违规')">违规登记</el-button>
            <el-button type="primary" @click="toShow(1,'违建')">违建登记</el-button>
        </div>
        <div class="inputArea" v-else>
            <MyIll v-if="index===0" />
            <MyVio v-else />
        </div>
    </div>
</template>
<script>
import MyVio from './vio';
import MyIll from './ill';
export default {
    components: {
        MyIll, MyVio
    },
    data() {
        return {
            flag: true,
            index: 0,//0:违规,1:违建
        }
    },
    created() {

    },
    methods: {
        toShow(idx, lab) {
            this.$confirm('您确定要去上报' + lab + '事件')
                .then(_ => {
                    console.log(1);
                    this.index = idx;
                    this.flag = false;
                })
                .catch(_ => { console.log('err') });
        }
    },
}
</script>
<style lang="scss" scoped>
.chooseArea {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 50px;
    padding-bottom: 80px;

    .el-button {
        width: 120px;
        line-height: 40px;
        padding: 0;
        margin-top: 20px;
    }

    .el-button+.el-button {
        margin-left: 0;
    }
}
</style>

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

New file
@@ -0,0 +1,3 @@
<template>
    <div>1</div>
</template>

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

@@ -1,122 +1,296 @@
<template>
    <div class="casepool">
        <!-- 查询添加 -->
    <div class="userList">
        <header>
            <div class="search">
                <span>来源查询：</span>
                <el-input placeholder="请输入问题来源"></el-input>
            </div>
            <div class="add">
                <el-button type="primary" icon="el-icon-plus" @click="handleOpenDialog">添加</el-button>
            <div class="headerContent">
                <div class="search">
                    <span>来源查询:</span>
                    <el-input placeholder="请输入问题来源" v-model="context"></el-input>
                    <div class="findBtn">
                        <el-button type="primary" @click="getUserList">查询</el-button>
                    </div>
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">添加</el-button>
                    <el-dialog :before-close="handleClose" :visible.sync="dialogCreate" title="请选择上报事件类型" width="45%" v-if="dialogCreate">
                        <createUser />
                    </el-dialog>
                </div>
            </div>
        </header>
        <!-- 主体展示 -->
        <main>
            <div class="mainContent">
                <!-- 导航状态标签 -->
                <div class="nav">
                    <el-tabs type="border-card">
                        <el-tab-pane :label="item.name" v-for="item in tagList" :key="item.name"></el-tab-pane>
                    </el-tabs>
                    <!-- 数据渲染 -->
                    <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">
                        <el-table-column type="selection" min-width="5">
                        </el-table-column>
                        <el-table-column label="事件编号" min-width="6">
                            <template slot-scope="scope">{{ scope.row.id }}</template>
                        </el-table-column>
                        <el-table-column prop="source" label="问题来源" min-width="10">
                        </el-table-column>
                        <el-table-column prop="bigKind" label="大类名称" min-width="6">
                        </el-table-column>
                        <el-table-column prop="samllKind" label="小类名称" min-width="6">
                        </el-table-column>
                        <el-table-column prop="reson" label="案由" min-width="10">
                        </el-table-column>
                        <el-table-column prop="location" label="报警点位" min-width="10">
                        </el-table-column>
                        <el-table-column prop="area" label="所属区域" min-width="10">
                        </el-table-column>
                        <el-table-column prop="appendTime" label="报警时间" min-width="10">
                        </el-table-column>
                        <el-table-column prop="duration" label="持续时间" min-width="6">
                        </el-table-column>
                        <el-table-column prop="operation" label="操作" min-width="15">
                            <template slot-scope="scope">
                                <div class="operation">
                                    <span @click="handleFind(scope.row)">上报</span>
                                    <span class="line">|</span>
                                    <span @click="handleUpdate(scope.row)">调度</span>
                                    <span class="line">|</span>
                                    <span>再学习</span>
                                    <span class="line">|</span>
                                    <span>暂不处理</span>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <div @click="changeNavChecked(index)" :class="[item.checked ? 'is-active':'','nav-item']"
                        v-for="(item,index) in tagList" :key="item.name">{{item.name}}</div>
                </div>
                <div class="type-nav">
                    <div @click="changeTypeChecked(index)" v-for="(item,index) in typeList" :key="item.name"
                        :class="[item.checked ? 'is-active':'','type-item']">{{item.name}}</div>
                </div>
                <!-- 数据展示 -->
                <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 prop="number" label="事件编号" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeThird" label="问题来源" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeSecond" label="大类名称" min-width="10">
                    </el-table-column>
                    <el-table-column prop="typeFirst" label="小类名称" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="案由" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="报警点位" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="所属区域" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="报警时间" min-width="10">
                    </el-table-column>
                    <el-table-column prop="type" label="持续时间" min-width="10">
                    </el-table-column>
                    <el-table-column prop="operation" label="操作" min-width="20">
                        <template slot-scope="scope">
                            <div class="operation">
                                <span @click="handleFind(scope.row)">上报</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">调度</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">在学习</span>
                                <span class="line">|</span>
                                <span @click="handleDelete(scope.row)">暂不处理</span>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
        <!-- 组件区 -->
        <footer>
            <el-dialog v-if="visible" :visible.async="visible" title="问题登记" width="60%" :before-close="handleClose">
                <checkIn></checkIn>
            </el-dialog>
        </footer>
    </div>
</template>
<script>
import checkIn from './compenents/checkIn';
import updateUser from "./updateUser"
import createUser from "./createUser"
export default {
    components: {
        checkIn,
        updateUser, createUser
    },
    data() {
        return {
            tableData: [],
            context: "",
            dialogCreate: false,
            dialogUpdate: false,
            updateFlag: false,
            userInfo: '',
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: [],
            tagList: [
                {
                    name: '待处理',
                    value: 0,
                    value: 7,
                    checked: true
                },
                {
                    name: '已上报',
                    value: 0,
                    value: 1,
                    checked: false
                },
                {
                    name: '已调度',
                    value: 0,
                    value: 3,
                    checked: false
                },
                {
                    name: '在学习',
                    value: 0,
                    value: 4,
                    checked: false
                },
                {
                    name: '暂不处理',
                    value: 0,
                    value: 4,
                    checked: false
                },
            ],
            typeList: [
                {
                    name: '违规',
                    value: 0,
                    value: 1,
                    checked: true
                },
                {
                    name: '违建',
                    value: 0,
                    value: 2,
                    checked: false,
                },
            ],
            tableData: [
                {
                    id: 13413114,
                    source: '人工上报/视频巡查',
                    appendTime: '2022-01-09 14:52'
                }
            ],
            visible: false,
            mystatus:0,
            statusArr:[],
        }
    },
    created() {
        this.tagList.forEach(item => {
            if (item.checked) {
                this.statusArr[0] = item.value;
            }
        })
        this.typeList.forEach(item => {
            if (item.checked) {
                this.statusArr[1] = item.value;
            }
        })
        // this.getUserList();
    },
    methods: {
        // 批量删除
        mulDelete(idArr) {
            console.log(idArr);
            // this.$axios({
            //     method: 'delete',
            //     url: 'sccg/violations/batch_delete?ids=' + idArr,
            // }).then(res => {
            //     this.getUserList();
            //     this.$message({
            //         message: res.message,
            //         type: res.code === 200 ? 'success' : 'warning'
            //     })
            // })
        },
        // 执行下拉框操作
        selectChange(val) {
            let ids = [];
            this.tempList.forEach(item => {
                ids.push(item.number);
            })
            if (ids.length !== 0) {
                if (val === 3) {
                    this.mulDelete(ids);
                }
            } else {
                this.$message({
                    type: 'warning',
                    message: '您还没选中任何数据',
                })
            }
        },
        // 监听表格选中状态
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        // 全选
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();
        },
        // 反选
        disSame(list) {
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        // 删除单条数据
        handleDelete({ number }) {
            console.log(number);
            this.$confirm('确认删除？')
                .then(_ => {
                    console.log(1);
                    // this.$axios({
                    //     method: 'delete',
                    //     url: `sccg/violations/delete?id=${number}`,
                    // })
                    //     .then(res => {
                    //         console.log(res);
                    //         this.$message({
                    //             type: res.code === 200 ? 'success' : 'warning',
                    //             message: res.message
                    //         })

                    //         this.getUserList();
                    //     })
                })
                .catch(_ => { console.log(2) });
        },
        // 获取用户列表
        getUserList() {
            const { currentPage, pageSize, context, statusArr } = this;
            console.log(statusArr);
            this.$axios({
                method: 'get',
                url: `sccg/base-case/query/${statusArr[1]}?status=` + statusArr[0]
            }).then(res => {
                console.log(res);
            })
            // 获取所有用户信息
            // this.$axios({
            //     method: 'get',
            //     url: `sccg/violations/query?current=${currentPage}&size=${pageSize}&keyWord=${context}`,
            // })
            //     .then(res => {
            //         this.tableData = res.data.records;
            //         this.totalNum = res.data.total;
            //     })
        },
        // 设置表格斑马纹
        tableRowClassName({ row, rowIndex }) {
            if ((rowIndex + 1) % 2 == 0) {
@@ -126,141 +300,309 @@
            }
            return '';
        },
        // 打开添加页
        handleOpenDialog() {
            this.visible = true;
        // 查看用户信息(不可修改)
        handleFind(rowData) {
            this.dialogUpdate = true;
            this.updateFlag = false;
            this.userInfo = rowData;
        },
        // 关闭对话框
        // 当前页改变触发事件
        changeCurrentPage(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 上一页点击事件
        handlePrev(page) {
            this.currentPage = page;
            this.getUserList();
        },
        // 下一页点击事件
        handleNext(page) {
            this.currentPage = page;
            this.getUserList();
        },
        changeDialog(val) {
            this.dialogUpdate = val.dialogUpdate;
            console.log(val);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.visible = false;
                    this.dialogCreate = false;
                    this.dialogUpdate = false;
                    done();
                })
                .catch(_ => { });
        }
        },
        // 更改一级标签的选中
        changeNavChecked(idx) {
            this.tagList.forEach((item, index) => {
                if (index === idx) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            })
            this.typeList[0].checked = true;
            this.typeList[1].checked = false;
        },
        // 更改违规/违建
        changeTypeChecked(idx) {
            this.typeList.forEach((item, index) => {
                if (index === idx) {
                    item.checked = true;
                } else {
                    item.checked = false;
                }
            })
        },
    }
}
</script>
<style lang="scss" scoped>
.casepool {
.userList {
    text-align: left;
    margin: 10px 20px;
    color: #4b9bb7;

    header {
        display: flex;
        justify-content: space-between;
        padding: 0 20px;
        line-height: 60px;
        background-color: #09152f;
        border: 1pox solid #fff;

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

            span {
                flex: 2;
            .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;
                    }
                }

            }

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

                &::v-deep .el-input__inner {
                    background-color: #09152f;
                    border: 1px solid #17324c;
                .el-button {
                    padding: 12px 25px;
                    border-radius: 20px;
                }
            }
        }

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

    main {
        .mainContent {
            .nav {
                &::v-deep .el-tabs--border-card {
                    border: none;
                }
        background-color: #09152f;
        margin-top: 20px;
        padding-bottom: 50px;
        border: 1pox solid #fff;

                &::v-deep .el-tabs--border-card>.el-tabs__content {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__nav-scroll {
                    background-color: #09152f;
                }

                &::v-deep .el-tabs__header {
                    line-height: 60px;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item {
                    color: #fff;
                }

                &::v-deep .el-tabs--border-card>.el-tabs__header .el-tabs__item.is-active {
                    color: #4b9bb7;
                    background-color: #071f39;
                    border: none;
                }

                .el-table {
                    font-size: 12px;
                    color: #4b9bb7;

                    .line {
                        padding: 0 5px;
                    }
                }

                &::v-deep .el-table__empty-block {
                    background-color: #09152f;
                    color: #4b9bb7;
                }

                .el-table::v-deep .warning-row {
                    background: #06122c;
                }

                .el-table::v-deep .success-row {
                    background: #071f39;
                }
            }
        }
    }

    footer {

        &::v-deep .el-dialog__header,
        &::v-deep .el-dialog__body {
            background-color: #06122c;
        }

        &::v-deep .el-dialog__header {
            display: flex;
            align-items: center;
            background-color: #fff;
            padding: 20px;
        .mainTitle {
            line-height: 60px;
        }

        &::v-deep .el-dialog__title {
        padding: 10px;

        .nav {
            display: flex;
            line-height: 40px;

            .nav-item {
                width: 80px;
                text-align: center;

                &:hover {
                    cursor: pointer;
                }
            }

            .is-active {
                background-color: #070f22;
                color: #fff;
            }
        }

        .type-nav {
            display: flex;
            line-height: 40px;
            margin-left: 30px;
            margin-top: 2px;

            .type-item {
                width: 80px;
                text-align: center;

                &:hover {
                    cursor: pointer;
                }
            }

            .is-active {
                background-color: #070f22;
                border-radius: 4px;
                color: #fff;
            }
        }

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

            .funs {
                display: flex;

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
            margin-top: 10px;

            &::v-deep .cell {
                text-overflow: ellipsis;
                white-space: nowrap;
                overflow: hidden;
            }

            &::v-deep .el-table__empty-block {
                background-color: #09152f;
            }

            &::v-deep .el-table__empty-block {
                color: #4b9bb7;
            }

            .operation {
                display: flex;

                .line {
                    padding: 0 5px;
                }

                span:hover {
                    cursor: pointer;
                }
            }
        }

        &::v-deep .el-dialog__close {
            width: 20px;
            height: 20px;
            // color: #fff;
        .el-table::v-deep .warning-row {
            background: #06122c;
        }

        &::v-deep .el-dialog__body {
            padding: 0;
        .el-table::v-deep .success-row {
            background: #071f39;
        }
    }

    &::v-deep .el-dialog__header,
    &::v-deep .el-dialog__body {
        background-color: #06122c;
    }

    &::v-deep .el-dialog__header {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 20px;
        line-height: 60px;
    }

    &::v-deep .el-dialog__title {
        color: #4b9bb7;
    }

    &::v-deep .el-dialog__close {
        width: 20px;
        height: 20px;
        // color: #fff;
    }

    &::v-deep .el-dialog__body {
        padding: 0;
    }
}
</style>

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

New file
@@ -0,0 +1,195 @@
<template>
    <div class="updateUser">
        <main>
            <div class="mainContent">
                <el-form ref="user" label-width="140px" autoComplete="on" :model="things" label-position="right">
                    <!-- 违规事项编号 -->
                    <el-form-item class="optionItem" label="违规事项编号:" prop="number">
                        <el-input v-model="things.number" placeholder="请填写违规事项编号" :disabled="!updateFlag"></el-input>
                    </el-form-item>
                    <!-- 所属类型 -->
                    <el-form-item class="optionItems" label="所属类型:" prop="typeThird">
                        <el-select v-model="things.typeThird" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeThirdList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属大类 -->
                    <el-form-item class="optionItem" label="所属大类:" prop="typeSecond">
                        <el-select v-model="things.typeSecond" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeSecondList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 所属小类 -->
                    <el-form-item class="optionItem" label="所属小类:" prop="typeFirst">
                        <el-select v-model="things.typeFirst" placeholder="请选择所属类型" disabled>
                            <el-option v-for="item in typeFirstList" :key="item.id" :label="item.name"
                                :value="item.id">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <!-- 案由 -->
                    <el-form-item class="optionItem" label="案由:" prop="type">
                        <el-input type="textarea" autosize v-model="things.type" placeholder="请输入案由描述内容"
                            :disabled="!updateFlag" disabled></el-input>
                    </el-form-item>
                    <!-- <el-form-item v-if="updateFlag">
                        <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 {
            things: {
                number: 0,
                type: '',
                typeFirst: '',
                typeSecond: '',
                typeThird: '',
            },
            roleList: [],
            typeThirdList:[],
            typeSecondList:[],
            typeFirstList:[],
        }
    },
    created() {
        console.log(this.userInfo);
        this.things = JSON.parse(JSON.stringify(this.userInfo));
        // 获取所属类型列表
        this.getTypeThird();
        this.getTypeSecond();
        this.getTypeFirst();
    },
    methods: {
        // handleUser() {
        //     this.$refs.user.validate((valid) => {
        //         if (valid) {
        //             const { role } = this;
        //             console.log(role);
        //             this.$axios.post('/sccg/role/update/' + role.id, {
        //                 id: role.id,
        //                 status: role.status,
        //                 description: role.description,
        //                 name: role.name,
        //                 sort: 0
        //             }).then(res => {
        //                 this.$emit('changeDialog', { dialogUpdate: false });
        //                 this.getUserList();
        //             })
        //         } else {
        //             return false;
        //         }
        //     })
        // },
        // 查询所属类型
        getTypeThird() {
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_first",
            })
                .then(res => {
                    this.typeThirdList = res.data;
                })
        },
        // 查询所属大类
        getTypeSecond(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_second",
            })
                .then(res => {
                    this.typeSecondList = res.data;
                })
        },
        // 查询所属小类
        getTypeFirst(){
            this.$axios({
                method: 'get',
                url: "sccg/violations/query/type_third",
            })
                .then(res => {
                    this.typeFirstList = res.data;
                })
        }
    },
    props: ['userInfo', 'updateFlag', 'getUserList', 'changeDialog']
}
</script>
<style lang="scss" scoped>
.updateUser {
    border-radius: 1px;
    background-color: #09152f;

    main {
        // border: 1px solid #fff;
        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;
                }
            }

        }
    }

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

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

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

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

@@ -11,8 +11,8 @@
                    <!-- 上级部门 -->
                    <el-form-item class="optionItems" label="上级部门:" prop="parentId">
                        <el-select v-model="depart.parentId" placeholder="请输入上级部门">
                            <el-option v-for="item in departList" :key="item.departName" :label="item.departName" :value="item.id"
                                :disabled="item.disabled">
                            <el-option v-for="item in departList" :key="item.departName" :label="item.departName"
                                :value="item.id" :disabled="item.disabled">
                            </el-option>
                        </el-select>
                    </el-form-item>
@@ -21,13 +21,29 @@
                        <el-input v-model="depart.departType" placeholder="请选择部门类型"></el-input>
                    </el-form-item>
                    <!--添加人员  -->
                    <el-form-item class="optionItem" label="添加人员:">
                    <el-form-item class="optionItem add" label="添加人员:">
                        <ul class="addPerson">
                            <li><i class="el-icon-user-solid"></i></li>
                            <li><i class="el-icon-user-solid"></i></li>
                            <li><i class="el-icon-user-solid"></i></li>
                            <li><i class="el-icon-plus"></i></li>
                            <li><i class="el-icon-plus" @click="openUser = true"></i></li>
                        </ul>
                        <div class="card" v-if="openUser">
                            <el-card class="box-card">
                                <div slot="header" class="myclear">
                                    <span>工作人员</span>
                                    <div @click="addUser">添加</div>
                                </div>
                                <div class="scrollWrap">
                                    <el-checkbox-group :max="3" v-model="checkedUser" @change="handleCheckedUserChange">
                                        <el-checkbox v-for="user in userList" :label="user.username" :key="user.id" :value="user.id">
                                            {{user.username}}
                                        </el-checkbox>
                                    </el-checkbox-group>
                                </div>
                                <div class="hidebar"></div>
                            </el-card>
                        </div>
                    </el-form-item>
                    <!-- 部门描述 -->
                    <el-form-item class="optionItem" label="部门描述:" prop="departDes">
@@ -50,7 +66,7 @@
        const validateNickname = (rule, value, callback) => {
            if (!value) {
                callback(new Error("请填写部门名称"));
            }else{
            } else {
                callback();
            }
        };
@@ -93,18 +109,18 @@
                    { required: false, trigger: "blur" },
                ],
            },
            typeList: [],
            userList: [],
            departList: [],
            checkedUser: [],
            openUser:false,
        }
    },
    created() {
        const that = this;
        // 获取部门树形结构图
        this.getDepartTree();
        // 获取全部部门列表 
        // this.$axios.get('sccg/depart/page').then(res => {
        //     that.departList = res.data.records;
        // })
        // 获取用户列表
        this.getUserList();
    },
    methods: {
        handleUser() {
@@ -112,41 +128,69 @@
                if (valid) {
                    const { depart } = this;
                    console.log(depart);
                    this.$axios.post('/sccg/depart/create', {
                        departName: depart.departName,
                        parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes
                    }).then(res => {
                        if (res.code === 200) {
                            this.$message({
                                message:res.message,
                                type:'success'
                            })
                            this.refresh();
                        }else if(res.code ===2001){
                            this.$message({
                                message:res.message,
                                type:'error'
                            })
                            this.refresh();
                        }
                    })
                }else{
                    // this.$axios.post('/sccg/depart/create', {
                    //     departName: depart.departName,
                    //     parentId: depart.parentId, departType: depart.departType, departDes: depart.departDes
                    // }).then(res => {
                    //     if (res.code === 200) {
                    //         this.$message({
                    //             message:res.message,
                    //             type:'success'
                    //         })
                    //         this.refresh();
                    //     }else if(res.code ===2001){
                    //         this.$message({
                    //             message:res.message,
                    //             type:'error'
                    //         })
                    //         this.refresh();
                    //     }
                    // })
                } else {
                    return false;
                }
            })
        },
        // 获取部门树形结构图
        getDepartTree(){
        getDepartTree() {
            this.$axios({
                method:'get',
                url:'sccg/depart/tree',
                method: 'get',
                url: 'sccg/depart/tree',
            })
            .then(res=>{ 
                res.data.unshift({id:0,departName:'一级菜单栏'})
                this.departList = res.data;
                console.log(res);
                .then(res => {
                    res.data.unshift({ id: 0, departName: '顶级菜单' })
                    this.departList = res.data;
                })
        },
        // 获取所有用户信息
        getUserList() {
            const that = this;
            const { currentPage, pageSize, search } = this;
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            this.$axios.get(`sccg/admin/list`).then(res => {
                if (res.code === 200) {
                    console.log(res)
                    this.userList = res.data.records;
                }
            })
        }
        },
        handleCheckedUserChange(value) {
            // console.log(value);
            if(value.length>3){
                console.log(this.checkedUser);
                this.$message({
                    type:'warning',
                    message:'最多只能添加三个成员'
                })
            }
            // let checkedCount = value.length;
            // this.checkAll = checkedCount === this.cities.length;
            // this.isIndeterminate = checkedCount > 0 && checkedCount < this.cities.length;
        },
        addUser(){
            console.log(this.checkedUser);
            this.openUser = false;
        },
    },
    props: ['refresh']
}
@@ -220,6 +264,60 @@
            }

        }

        .add {
            position: relative;

            .card {
                position: absolute;
                z-index: 2000;
                right: 0;
                .box-card {
                    max-height: 200px;
                    overflow: hidden;
                    background-color: #09152f;
                    position: relative;
                    max-width: 220px;

                    .scrollWrap {
                        overflow: scroll;
                        height: 160px;
                        position: relative;
                        color: #4b9bb7;

                        .el-checkbox-group {
                            display: flex;
                            flex-direction: column;

                            .el-checkbox {
                                line-height: 20px;
                            }
                        }
                    }

                    .myclear {
                        width: 100%;
                        line-height: 20px;
                        color: #4b9bb7;
                        display: flex;
                        justify-content: space-between;
                    }

                    .hidebar {
                        position: absolute;
                        top: 77px;
                        right: 20px;
                        width: 20px;
                        height: 160px;
                        background-color: #09152f;
                    }

                    .item {
                        line-height: 40px;
                    }
                }
            }
        }
    }

    footer {

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

@@ -11,7 +11,8 @@
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新增部门</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增部门信息" width="45%" v-if="dialogCreate">
                    <el-dialog :visible.sync="dialogCreate" title="新增部门信息" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser :refresh="context==='' ? getUserList : search " />
                    </el-dialog>
                </div>
@@ -22,7 +23,8 @@
                <!-- 数据展示 -->
                <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">
                    :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 prop="id" label="部门ID" min-width="5">
@@ -60,16 +62,33 @@
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '修改部门信息' :'查看部门信息'"
                    v-if="dialogUpdate">
                    <updateUser :updateFlag="updateFlag" :userInfo="userInfo" :getUserList="context==='' ? getUserList : search"
                        @changeDialog="changMyDialog" />
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo="userInfo"
                        :getUserList="context==='' ? getUserList : search" @changeDialog="changMyDialog" />
                </el-dialog>
                <!-- 分页 -->
                <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>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
@@ -93,13 +112,62 @@
            totalNum: 200,
            pageSize: 10,
            currentPage: 1,
            context: ''
            context: '',
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        selectChange(list) {
            console.log(list);
            console.log(this.tempList);
        },
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        changeTime({ createTime }) {
            return helper(createTime);
        },
        selectAll() {

            this.$refs.multipleTable.toggleAllSelection();
        },
        disSame(list) {
            // console.log(this.$refs.multipleTable);
            // const row = this.$refs.table.data
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        handleDelete({ id }) {
            this.$confirm('确认删除？')
                .then(_ => {
@@ -113,14 +181,14 @@
                        .then(res => {
                            console.log(res);
                            this.$message({
                                type: res.code===404 ? 'warning':'success',
                                type: res.code === 404 ? 'warning' : 'success',
                                message: res.message
                            })

                            this.getUserList();
                        })
                })
                .catch(_ => {});
                .catch(_ => { });
        },
        // 修改角色
        handleChangeRole(obj) {
@@ -207,6 +275,15 @@
        // 关闭dialog
        changMyDialog(val) {
            this.dialogUpdate = val.dialogFlag;
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogUpdate = false;
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        }
    },
}
@@ -280,17 +357,69 @@
            line-height: 60px;
        }

        .pagination {
            margin-top: 50px;
        .tools {
            display: flex;
            line-height: 50px;
            justify-content: center;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

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

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
                    }
                }
            }
        }


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

@@ -11,7 +11,8 @@
                </div>
                <div class="addUser">
                    <el-button class="addBtn" type="primary" @click="dialogCreate = true">新建角色</el-button>
                    <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate">
                    <el-dialog :visible.sync="dialogCreate" title="新增角色" width="45%" v-if="dialogCreate"
                        :before-close="handleClose">
                        <createUser :refresh="context==='' ? getUserList : search" />
                    </el-dialog>
                </div>
@@ -22,7 +23,8 @@
                <!-- 数据展示 -->
                <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">
                    :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="5">
@@ -62,16 +64,33 @@
                </el-table>
                <!-- 查看修改页面 -->
                <el-dialog :visible.sync="dialogUpdate" width="45%" :title="updateFlag ? '权限设置' :'查看角色信息'"
                    v-if="dialogUpdate">
                    v-if="dialogUpdate" :before-close="handleClose">
                    <updateUser :updateFlag="updateFlag" :userInfo=userInfo
                        :getUserList=" context ? getUserList : getUserList" @changeDialog="changeDialog" />
                </el-dialog>
                <!-- 分页 -->
                <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>
                <!-- tools -->
                <div class="tools">
                    <div class="funs">
                        <div class="funsItem">
                            <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                        </div>
                        <div class="funsItem">
                            <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>
@@ -96,12 +115,61 @@
            totalNum: null,
            pageSize: 10,
            currentPage: 1,
            all: false,
            unsame: false,
            myIdx: 0,
            options: [
                {
                    value: 0,
                    label: '批量操作',
                    disabled: true,
                },
                {
                    value: 1,
                    label: '批量启用',
                },
                {
                    value: 2,
                    label: '批量禁用',
                },
                {
                    value: 3,
                    label: '批量删除',
                }
            ],
            tempList: []
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        selectChange(list) {
            console.log(list);
            console.log(this.tempList);
        },
        tableChange(list) {
            this.tempList = list;
            if (list.length === this.tableData.length) {
                this.all = true;
            } else {
                this.all = false
            }
        },
        changeTime({ createTime }) {
            return helper(createTime);
        },
        selectAll() {

            this.$refs.multipleTable.toggleAllSelection();
        },
        disSame(list) {
            // console.log(this.$refs.multipleTable);
            // const row = this.$refs.table.data
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
            })
        },
        handleDelete({ id }) {
            const that = this;
            let arr = [];
@@ -228,6 +296,15 @@
        changeDialog(val) {
            this.dialogUpdate = val.dialogUpdate;
            console.log(val);
        },
        handleClose(done) {
            this.$confirm('确认关闭？')
                .then(_ => {
                    this.dialogUpdate = false;
                    this.dialogCreate = false;
                    done();
                })
                .catch(_ => { });
        }
    }
}
@@ -301,17 +378,69 @@
            line-height: 60px;
        }

        .pagination {
            margin-top: 50px;
        .tools {
            display: flex;
            line-height: 50px;
            justify-content: center;
            justify-content: space-between;
            align-items: center;
            padding: 0 20px;

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

                .funsItem {
                    line-height: 28px;
                    display: flex;
                    align-items: center;
                    border: 1px solid #17324c;
                    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;
                    }
                }
            }
        }


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

@@ -17,12 +17,12 @@
                        <el-input v-model="user.username" placeholder="请填写用户姓名"></el-input>
                    </el-form-item>
                    <!-- 性别 -->
                    <!-- <el-form-item class="optionItem" label="性别:" prop="gender">
                        <el-radio-group v-model="user.gender">
                    <el-form-item class="optionItem" label="性别:" prop="sex">
                        <el-radio-group v-model="user.sex">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    </el-form-item>
                    <!-- 是否党员 -->
                    <el-form-item class="optionItem" label="是否党员:" prop="isDy">
                        <el-radio-group v-model="user.isDy">
@@ -67,7 +67,7 @@
                    </el-form-item>
                    <!-- 所属部门 -->
                    <el-form-item class="optionItem" label="所属部门:" prop="departmentId">
                        <el-select v-model="user.departmentId" placeholder="请选择所属部门">
                        <el-select v-model="user.departmentId" placeholder="请选择所属部门" @change="getDepartName">
                            <el-option v-for="item in departList" :key="item.name" :label="item.departName"
                                :value="item.id">
                            </el-option>
@@ -198,7 +198,7 @@
                // nickName: '',
                password: '',
                username: '',
                gender: 1,
                sex: 1,
                isDy: 0,
                mobile: '',
                email: '',
@@ -224,7 +224,7 @@
                username: [
                    { required: true, trigger: "blur", validator: validateTruename },
                ],
                gender: [
                sex: [
                    { required: true, trigger: "blur" },
                ],
                isDy: [
@@ -290,16 +290,17 @@
                        jsDy: user.isDy,
                        jobTitle: user.jobTitle,
                        mobile: user.mobile,
                        nickName: user.nickName,
                        // nickName: user.nickName,
                        password: user.password,
                        userType: user.userType,
                        username: user.username,
                        departName:user.departName,
                    }).then(res => {
                        if (res.code === 200) {
                            console.log(1);
                            this.$message({
                                type:'success',
                                message:res.code,
                                message:res.message,
                            })
                            this.$emit('sendDialog', { flag: false });
                        }else if(res.code === 500 && res.message === "操作失败"){
@@ -327,6 +328,14 @@
        // 重置表单
        resetForm(){
            this.$refs['user'].resetFields();
        },
        // 获得部门名称
        getDepartName(data){
            this.departList.forEach(item=>{
                if(item.id === data){
                    this.user.departName = item.departName
                }
            })
        }
    },
    props: ['sendDialog']

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

@@ -3,7 +3,7 @@
        <div class="headerContent">
            <div class="search">
                <span>筛选条件:</span>
                <el-input placeholder="请输入内容" v-model="search"></el-input>
                <el-input placeholder="请输入手机号进行查询" v-model="search"></el-input>
                <div class="findBtn">
                    <el-button type="primary" @click="setSearch">查询</el-button>
                </div>

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

@@ -4,7 +4,7 @@
            <!-- 数据展示 -->
            <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">
                :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="4">
@@ -58,28 +58,29 @@
                    :getUserList="getUserList" />
            </el-dialog>
            <!-- tools -->
            <div class="pagination">
            <div class="tools">
                <div class="funs">
                    <div class="funsItem">
                        <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                    </div>
                    <div class="funsItem">
                        <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 class="tools">
                 <div class="funs">
                    <div class="funsItem" >
                        <el-checkbox v-model="all" @change="selectAll()">全选</el-checkbox>
                    </div>
                    <div class="funsItem" >
                        <el-checkbox v-model="unsame" @change="disSame(tableData)">反选</el-checkbox>
                    </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>
        </div>
    </main>
</template>
@@ -106,23 +107,56 @@
                password: false,
                depart: false,
            },
            all:false,
            unsame:false,
            all: false,
            unsame: false,
            myIdx:0,
            options:[
                {
                    value:0,
                    label:'批量操作',
                    disabled:true,
                },
                {
                    value:1,
                    label:'批量启用',
                },
                {
                    value:2,
                    label:'批量禁用',
                },
                {
                    value:3,
                    label:'批量删除',
                }
            ],
            tempList:[]
        }
    },
    created() {
        this.getUserList();
    },
    methods: {
        changeTime({createTime}){
        selectChange(list){
            console.log(list);
            console.log(this.tempList);
        },
        tableChange(list){
            this.tempList = list;
            if(list.length===this.tableData.length){
                this.all = true;
            }else{
                this.all = false
            }
        },
        changeTime({ createTime }) {
            return helper(createTime);
        },
        selectAll() {
            this.$refs.multipleTable.toggleAllSelection();

        },
        disSame(list){
            console.log(this.$refs.multipleTable);
        disSame(list) {
            // console.log(this.$refs.multipleTable);
            // const row = this.$refs.table.data
            list.forEach(row => {
                this.$refs.multipleTable.toggleRowSelection(row)
@@ -199,10 +233,10 @@
            // 获取所有用户信息、用户查询(暂时支持电话号码)
            this.$axios.get(`sccg/admin/list?mobile=${search}&current=${currentPage}&pageSize=${pageSize}`).then(res => {
                if (res.code === 200) {
                    // res.data.records.forEach(item => {
                    //     item.createTime = helper(item.createTime);
                    //     item.status == 1 ? item.status = true : item.status = false;
                    // })
                    res.data.records.forEach(item => {
                        // item.createTime = helper(item.createTime);
                        item.status == 1 ? item.status = true : item.status = false;
                    })
                    that.totalNum = res.data.pages * pageSize;
                    that.tableData = res.data.records;
                    this.renderFlag = true;
@@ -238,6 +272,7 @@
                    if (this.keyword != '') {
                        this.search = this.keyword;
                    }
                    this.currentPage = 1;
                    this.getUserList();
                    this.$emit('resetFresh', { flag: false })
                }
@@ -261,12 +296,40 @@
    .tools {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 20px;
        .funs {
            display: flex;
            .funsItem {
                line-height: 28px;
                display: flex;
                align-items: center;
                border: 1px solid #17324c;
                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;
                }
            }
            
        }

        // .funs {}

        
    }
    .pagination {
        .pagination {
            margin-top: 50px;
            display: flex;
            line-height: 50px;
@@ -280,8 +343,13 @@
                    background-color: #071f39;
                    color: #4b9bb7;
                }
                &::v-deep .active{
                    background-color: #409eff;
                    color: #fff;
                }
            }
        }
    }

    .el-table {
        color: #4b9bb7;

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

@@ -19,12 +19,12 @@
                        <el-input v-model="user.true_name" placeholder="请填写用户姓名"></el-input>
                    </el-form-item> -->
                    <!-- 性别 -->
                    <!-- <el-form-item class="optionItem" label="性别:" prop="gender">
                        <el-radio-group v-model="user.gender">
                    <el-form-item class="optionItem" label="性别:" prop="sex" >
                        <el-radio-group v-model="user.sex" :disabled="!flag.role">
                            <el-radio :label="1">男</el-radio>
                            <el-radio :label="2">女</el-radio>
                            <el-radio :label="0">女</el-radio>
                        </el-radio-group>
                    </el-form-item> -->
                    </el-form-item>
                    <!-- 是否党员 -->
                    <el-form-item class="optionItem" label="是否党员:" prop="isDy">
                        <el-radio-group v-model="user.isDy" disabled>
@@ -206,7 +206,7 @@
                nickName: '',
                password: '',
                username: '',
                // gender: 1,
                sex: 1,
                isDy: 1,
                mobile: '',
                email: '',
@@ -232,9 +232,9 @@
                username: [
                    { required: true, trigger: "blur", validator: validateTruename },
                ],
                // gender: [
                //     { required: true, trigger: "blur" },
                // ],
                sex: [
                    { required: true, trigger: "blur" },
                ],
                isDy: [
                    { required: true, trigger: "blur" },
                ],
@@ -276,6 +276,7 @@
    created() {
        const that = this;
        this.user = JSON.parse(JSON.stringify(that.userInfo));
        console.log(this.user);
        // 获取角色列表
        this.getRoleList();
        // 获取全部部门列表

 src/views/systemSetting/platform/portalSetting/index.vue

@@ -65,7 +65,7 @@

    },
    methods: {
        setPicUrl({obj, value}) {
        setPicUrl({ obj, value }) {
            const { icon } = this;
            const baseUrl = 'http://140.143.152.226:8410/';
            for (let key in icon) {
@@ -77,15 +77,15 @@
        },
        // 更改logo入口
        async changeLogo() {
            const {icon} = this;
            const { icon } = this;
            console.log(icon);
            const preIcon = await this.getIcon();
            if (preIcon.length === 0) {
                this.handleChangeLogo();
                return;
            }
            for(let key in icon){
                if(icon[key]!==''){
            for (let key in icon) {
                if (icon[key] !== '') {
                    preIcon[key] = icon[key];
                }
            }
@@ -121,9 +121,15 @@
                    }).then(res => {
                        console.log(res);
                        if (res.code == 200) {
                            this.$message({
                                message: res.message,
                                type: 'success'
                            this.$axios({
                                method: 'get',
                                url: 'sccg/system/portal/logo/search',
                            }).then(res => {
                                this.$message({
                                    message: res.message,
                                    type: 'success'
                                })
                                sessionStorage.setItem('pic', JSON.stringify(result));
                            })
                        }
                    })
@@ -144,7 +150,7 @@
                })
            }
            localStorage.removeItem('pic');
            window.location.href='';
            window.location.href = '';

        }
    },