simulation-front/src/views/systemManagement/accountManagement.vue

<template>
    <div>
        <search-layout :needBox="true">
            <template slot="searchItem1">
                <span class="label">账户名称</span>
                <el-input
                    v-model="searchParams.username"
                    size="small"
                    clearable
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem3">
                <span class="label">账户类型</span>
                <el-select v-model="searchParams.roleCode">
                    <el-option
                        v-for="item in roleCodeList"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchItem2">
                <span class="label">所属公司</span>
                <el-input
                    v-model="searchParams.company"
                    size="small"
                    clearable
                    placeholder="请输入"
                >
                </el-input>
            </template>
            <template slot="searchItem4">
                <span class="label">状态</span>
                <el-select v-model="searchParams.visible">
                    <el-option
                        v-for="item in list"
                        :label="item.caption"
                        :value="item.code"
                        :key="item.code"
                    ></el-option>
                </el-select>
            </template>
            <template slot="searchBtn1">
                <el-button type="primary" @click="search">查询</el-button>
            </template>
            <template slot="searchBtn2">
                <el-button type="primary" @click="reset">重置</el-button>
            </template>
        </search-layout>

        <div class="btnsPanel">
            <!--<el-button type="primary" plain icon="el-icon-video-pause"
                >批量停用</el-button
            >
            <el-button type="primary" plain icon="el-icon-video-play"
                >批量启用</el-button
            >-->
            <el-button
                type="primary"
                icon="el-icon-circle-plus-outline"
                @click="addAccount"
                >创建账户</el-button
            >
        </div>

        <tableList
            ref="table"
            style="border-top: none; margin: 0 30px"
            :columns="columns"
            :getDataWay="getDataWay"
            :pagination="pagination"
            index
        >
            <el-table-column label="停/启用" slot="visible" align="center">
                <template v-slot="scope">
                    <el-switch
                        v-model="scope.row.visible"
                        active-value="1"
                        inactive-value="0"
                        active-color="#3397ff"
                        inactive-color="#ff4949"
                        @change="$event=>{switchVisible($event, scope.row)}"
                    ></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" slot="cgInfos" align="center">
                <template v-slot="scope">
                    <i
                        @click="editAccount(scope.row)"
                        class="el-icon-edit-outline elIcon"
                        title="编辑"
                    ></i>
                </template>
            </el-table-column>
        </tableList>
    </div>
</template>

<script>
import searchLayout from "@/components/grid/searchLayout";
import tableList from "@/components/grid/TableList";

export default {
    name: "accountManagement", // 账户管理
    components: { searchLayout, tableList },
    data() {
        return {
            searchParams: {
                //搜索参数
                username: "", //账户名
                company:"",  //所属公司
                roleCode:"",  //账户类型
                visible:""  //启用状态
            },
            roleCodeList:[],
            list: [
                {
                    code:'1',
                    caption:'启用'
                },
                {
                    code:'0',
                    caption:'停用'
                }
            ],
            columns: [
                //表格列
                {
                    label: "账户名称",
                    prop: "username",
                },
                {
                    label: "账户类型",
                    prop: "roleCode",
                },
                {
                    label: "所属公司",
                    prop: "company",
                },
                {
                    label: "联系人",
                    prop: "nickname",
                },
                {
                    label: "联系方式",
                    prop: "phone",
                },
                {
                    label: "停/启用",
                    prop: "visible",
                    template: true
                },
                {
                    label: "创建人",
                    prop: "createUserName",
                },
                {
                    label: "创建时间",
                    prop: "createTime",
                    formatter: (data) => {
                        return this.$timeFormatter(data.createTime)
                    }
                },
                {
                    label: "操作",
                    prop: "cgInfos",
                    template: true,
                },
            ],
            pagination: {
                //分页使用
                currentPage: 1,
                pageSize: 10,
                position: "right",
                pageSizes: [10, 30, 50, 100, 200],
                layout: "sizes, total, prev, pager, next, jumper",
            },
            getDataWay: {
                //加载表格数据
                dataType: "url",
                type: "post",
                // firstRequest: false,
                data: this.$api.systemManagement.getUserPageList,
                param: {},
            },
        };
    },
    async mounted() {
        await this.$dicsListsInit({
            roleCodeList: "roleCode",
        });
    },
    methods: {
        addAccount() {
            this.$router.push({ path: "/addAccount" });
        },
        editAccount(row) {
            let query = {...row}
            console.log(row)
            this.$router.push({
                path: "/editAccount",
                query
            })
        },
        search(){
            let searchParam = {
                    username: this.searchParams.username,
                    company: this.searchParams.company,
                    roleCode: this.searchParams.roleCode,
                    visible: this.searchParams.visible
            }
            this.refreshList(searchParam)
        },
        reset(){
            this.searchParams={
                username: '',
                company: '',
                roleCode: '',
                visible: ''
            }
            this.search()
        },
        refreshList(param) {
            param
                ? this.$refs["table"].loadData(param)
                : this.$refs["table"].loadData();
        },
        switchVisible(value, row){  //停用启用账户
            if(value == '0'){
                row.visible = '1'
                this.$confirm("确认停用该账户？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(()=>{
                    this.$axios({
                        method:'POST',
                        url: this.$api.systemManagement.saveVisible,
                        data:{
                            id: row.id,
                            visible: '0'
                        }
                    }).then(res=>{
                        if(res.code == '200'){
                            row.visible = '0'
                        }else{
                            this.$message.error(res.message || "停用失败");
                        }
                    })
                }).catch(()=>{})
            }else{
                row.visible = '0'
                this.$confirm("确认启用该账户？", "提示", {
                    confirmButtonText: "确定",
                    cancelButtonText: "取消",
                    type: "warning",
                }).then(()=>{this.$axios({
                        method:'POST',
                        url: this.$api.systemManagement.saveVisible,
                        data:{
                            id: row.id,
                            visible: '1'
                        }
                    }).then(res=>{
                        if(res.code == '200'){
                            row.visible = '1'
                        }else{
                            this.$message.error(res.message || "启用失败");
                        }
                    })
                }).catch(()=>{})
            }
            
        }
    },
};
</script>

<style scoped lang="less">
.btnsPanel {
    margin: 45px 40px 15px;
    text-align: right;
}
</style>