eta_front/src/views/dataSource_manage/accountList.vue

<template>
    <div class="account-list-page">

        <el-button 
            type="primary" 
            @click="showEditAccount=true;activeTermId=0;initData={}"
            v-permission="permissionBtn.dataSourcePermission.dataSource_account_add"
        >{{$t('SystemManage.DataSourceAccount.add_btn')}}</el-button>
        <el-table
            style="margin-top:30px"
            :data="tableData"
            border
        >
            <el-table-column
                v-for="col in tableColOpts"
                :key="col.key"
                :label="col.name"
                :prop="col.key"
                :sortable="col.sortable"
                align="center"
            >
                <template slot-scope="scope">
                    <span 
                        v-if="col.key==='Status'"
                        :style="{color:scope.row.Status===1?'':'#FF0000'}"
                    >{{scope.row.Status===1?$t('Common.enable'):$t('Common.disable')}}</span>
                    <span v-else>{{scope.row[col.key]}}</span>
                </template>
            </el-table-column>
            <el-table-column :label="$t('Table.column_operations')" align="center" width="100">
                <template slot-scope="scope">
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleEditAccount(scope.row)"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_edit"
                    >{{$t('Table.edit_btn')}}</span>
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleSetAccountStatus(scope.row,2)" 
                        v-if="scope.row.Status===1"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_enable"
                    >{{$t('Common.disable')}}</span>
                    <span 
                        style="color:#409EFF;cursor: pointer;" 
                        @click="handleSetAccountStatus(scope.row,1)" 
                        v-if="scope.row.Status===2"
                        v-permission="permissionBtn.dataSourcePermission.dataSource_account_enable"
                    >{{$t('Common.enable')}}</span>
                </template>
            </el-table-column>
            <div slot="empty">
                <tableNoData :text="$t('Table.prompt_slogan')"/>
            </div>
        </el-table>

        <!-- 新增/编辑终端账号 -->
        <EditAccount 
            v-model="showEditAccount" 
            :TerminalId="activeTermId" 
            :initData="initData"
            @change="getAccountList"
        />
    </div>
</template>

<script>
import EditAccount from './components/EditAccount.vue'
import {apiDataSource} from '@/api/modules/dataSource.js'
export default {
    components:{EditAccount},
    computed:{
        tableColOpts(){
            return [
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col01'),
                    key:'TerminalCode',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col02'),
                    key:'Name',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col03'),
                    key:'DirPath',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col04'),
                    key:'ServerUrl',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col05'),
                    key:'Value',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col06'),
                    key:'Source',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col07'),
                    key:'Status',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col08'),
                    key:'Num',
                },
                {
                    name:this.$t('SystemManage.DataSourceAccount.table_col09'),
                    key:'ModifyTime',
                    sortable:true
                },
            ]
        }
    },
    data() {
        return {
            tableData:[],

            showEditAccount:false,
            activeTermId:0,
            initData:{},
        }
    },
    created() {
        this.getAccountList()
    },
    methods: {
        async getAccountList(){
            const res=await apiDataSource.accountList({})
            if(res.Ret===200){
                const arr=res.Data.List||[]
                this.tableData=arr
            }
        },

        // 点击编辑账号
        handleEditAccount(e){
            this.activeTermId=e.TerminalId
            this.initData=e
            this.showEditAccount=true
        },

        // 启用/禁用账号
        handleSetAccountStatus(e,status){
            apiDataSource.accountSet({
                TerminalId:e.TerminalId,
                Status:status
            }).then(res=>{
                if(res.Ret===200){
                    this.$message.success(/* '操作成功' */this.$t('MsgPrompt.operate_success_msg'))
                    this.getAccountList()
                }
            })
        }
    },
}
</script>

<style lang="scss" scoped>
.account-list-page{
    padding: 30px;
    border-radius: 4px;
    border: 1px solid #DCDFE6; 
    background-color: #fff;
    min-height: calc(100vh - 260px);
}
</style>