backSide.vue

<template>
    <div>
        <el-row class="manage-head-wrapper">
            <el-col :span="24" :sm="24">
                <span class="condition-item-text">关键词：</span>
                <div class="manage-select-box">
                    <el-input v-model="keyWord" class="search-inp" placeholder="请输入要查询的关键词" clearable />
                </div>
                <el-button type="primary" class="search-btn" plain size="mini" @click="searchData()">
                    {{ $t('button.search') }}</el-button>
                <!-- <el-button type="primary" style="float:right" class="search-btn" plain size="mini" @click="exportData()">
                    导出<i class="el-icon-download el-icon--right"></i></el-button> -->
                <el-button type="primary" style="float:right" class="search-btn" plain size="mini" @click="saveData()">
                    提交配置</el-button>
            </el-col>
        </el-row>
        <el-row class="manage-content">
            <el-col :span="24">
                <el-table id="languageTable" :data="tableData" border :max-height="tableHeight" v-loading="loading" style="width: 100%"
                     header-row-class-name="manage-tab-head">
                    <el-table-column label="Key" align="center" prop="key">
                        <template #default="{ row }">
                            {{ row.key }}
                        </template>
                    </el-table-column>
                    <el-table-column label="中文" align="center" prop="zh">
                        <template #default="{ row }">
                            <el-input class="nborder" v-model="row.zh" />
                        </template>
                    </el-table-column>
                    <el-table-column label="英文" align="center" prop="en">
                        <template #default="{ row }">
                            <el-input class="nborder" v-model="row.en" />
                        </template>
                    </el-table-column>
                    <el-table-column label="繁体" align="center" prop="tw">
                        <template #default="{ row }">
                            <el-input class="nborder" v-model="row.tw" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-col>
        </el-row>
    </div>
</template>
<script>
var tempTableData = [];
import _ from 'underscore';
export default {
    data() {
        return {
            keyWord: '',
            dloading: false,
            loading: true,
            tableData: []
        }
    },
    components: {
        
    },
    computed: {
        tableHeight() {
            const windowInnerHeight = window.innerHeight
            return windowInnerHeight - 200
        },
    },
    mounted() {

    },
    created() {
        this.getLangData();
        window.language = this;
    },
    methods: {
        exportData(){
            this.dealExport('languageTable','国际化文件');
        },
        async searchData(isAdd) {
            this.loading = true;
            await this.timeWait(100);
            if (!this.keyWord) {
                this.tableData = tempTableData;
                this.loading = false;
                return;
            }
            this.tableData = _.filter(tempTableData, item => {
                return [item.zh, (item.en || '').toLowerCase(), item.tw].join('#').includes(this.keyWord.toLowerCase());
            })
            this.$nextTick(() => {
                setTimeout(() => {
                    this.loading = false;
                }, 1500);
            })
        },
        timeWait(time) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve();
                }, time);
            })
        },
        // 新搜索条件 end
        async getLangData() {
            this.loadLang().then(res=>{
                let {zh_CN,en_US,zh_TW} = res.data.data;
                this.setTableData({
                    en: en_US,
                    tw: zh_TW,
                    zh: zh_CN
                });
            })
        },
        loadLang(lang) {
            return this.$api.management.getBackLanguage();
        },
        setLang(params) {
            //let formData = new FormData();
            //formData.append('content', content);
            return this.$api.management.setBackLanguage(params);
        },
        setTableData(data) {
            let keys = _.keys(data.zh);
            tempTableData = [];
            _.each(keys, key => {
                tempTableData.push({
                    key: key,
                    en: data.en[key],
                    tw: data.tw[key],
                    zh: data.zh[key],
                });
            });
            this.tableData = tempTableData;
            this.$nextTick(() => {
                this.loading = false;
            })
        },
        async saveData() {
            this.loading = true;
            let enObj = {}, twObj = {}, zhObj = {};
             _.each(tempTableData, item => {
                let key = item.key;
                enObj[key] = item.en;
                twObj[key] = item.tw;
                zhObj[key] = item.zh;
            })
            let res = this.setLang({
                zh_CN:zhObj,
                en_US:enObj,
                zh_TW:twObj
            });
            this.loading = false;
            this.$message({
                message: '保存成功',
                type: 'success'
            });
        },
    }
}
</script>

<style scoped>
.manage-input-box {
    margin-right: 10px;
}

.condition-item-text {
    float: left;
    position: relative;
    top: 6px;
}

.btn-box:after,
.btn-box:before {
    content: '';
    display: table;
}

.btn-box:after {
    clear: both;
}

.fl-btn+.fl-btn {
    margin-right: 20px;
}

.online-column {
    color: #67c23a;
}

.offline-column {
    color: #f56c6c;
}

.iplink-column {
    text-decoration: underline;
}

.manage-content {
    padding-bottom: 0;
}

.manage-content /deep/ .nborder .el-input__inner {
    border: none;
    height: 30px !important;
    background-color: transparent;
}

.manage-content /deep/ .cell {
    padding: 0;
}
</style>