frontSide.vue

<template>
    <div class="manage-container deviceStatus-wrapper">
        <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" class="search-btn" plain size="mini" @click="addData()">{{ '添加' }}</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%"
                    :span-method="tabSpanMethod" header-row-class-name="manage-tab-head">
                    <el-table-column label="模块" align="center">
                        <template #default="{ row }">
                            {{ row.key1 }}
                        </template>
                    </el-table-column>
                    <el-table-column label="Key" align="center">
                        <template #default="{ row }">
                            {{ row.key2 }}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="Mall中文" align="center" prop="mall">
                        <template #default="{ row }">
                            <el-input class="nborder" v-model="row.mall" />
                        </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>
        <add-dialog ref="addModel" @submit="addField" :loading="dloading" :module-list="moduleList"></add-dialog>
    </div>
</template>
<script>
var tempTableData = [];
import _ from 'underscore';
import addDialog from "./add";
export default {
    data() {
        let that = this;
        return {
            keyWord: '',
            dloading: false,
            loading: true,
            moduleList: [],
            tableData: []
        }
    },
    components: {
        "add-dialog": addDialog
    },
    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.$nextTick(() => {
                    setTimeout(() => {
                        this.loading = false;
                        if (isAdd) {
                            this.$message({
                                message: '添加成功，编辑完点击右上角提交',
                                type: 'success'
                            });
                        }
                    }, 1500);
                })
                return;
            }
            let list = _.filter(tempTableData, item => {
                return [item.zh, (item.en || '').toLowerCase(), item.tw].join('#').includes(this.keyWord.toLowerCase());
            })
            this.tableData = this.colSpanList(list);
            this.$nextTick(() => {
                setTimeout(() => {
                    this.loading = false;
                }, 1500);
            })

        },
        timeWait(time) {
            return new Promise((resolve, reject) => {
                setTimeout(() => {
                    resolve();
                }, time);
            })
        },
        colSpanList(list) {
            let klist = [];
            let keys = _.uniq(_.pluck(list, 'key1'));
            _.each(list, item => {
                if (klist.includes(item.key1)) {
                    item.rspan = 0;
                } else {
                    klist.push(item.key1);
                    item.rspan = _.where(list, { key1: item.key1 }).length
                }
            })
            return list;
        },
        async addField(data) {
            if (!/^[a-z]|[A-Z]/.test(data.key2)) {
                this.$refs.addModel.hideLoading();
                return this.$message({
                    showClose: true,
                    type: "error",
                    message: 'Key首字母必须以英文开头'
                });
            }
            let item = _.findWhere(tempTableData, { key1: data.key1, key2: data.key2 });
            if (item) {
                this.$refs.addModel.hideLoading();
                return this.$message({
                    showClose: true,
                    type: "error",
                    message: data.key1 + '模块下该Key值已存在'
                });
            }
            let index = _.findIndex(tempTableData, { key1: data.key1 });
            let rspan = tempTableData[index].rspan;
            tempTableData[index].rspan = rspan + 1;
            tempTableData.splice(index + rspan, 0, {
                ...data,
                rspan: 0
            });
            this.searchData(true);
            this.$refs.addModel.closeDialog();
        },
        // 新搜索条件 end
        async getLangData() {
            Promise.all([this.loadLang('en_US'),this.loadLang('zh_TW'),this.loadLang('zh_CN')]).then(res=>{
                this.setTableData({
                    en: res[0].data,
                    tw: res[1].data,
                    zh: res[2].data
                });
            });
            
        },
        loadLang(lang) {
            return this.$api.management.getLanguage({ lang });
        },
        setLang(lang, content) {
            let formData = new FormData();
            formData.append('content', content);
            return this.$api.management.setLanguage(lang, formData, {
                headers: {
                    'Content-type': 'application/x-www-form-urlencoded;charset=utf-8'
                }
            });
        },
        setTableData(data) {
            let key1s = _.keys(data.zh);
            this.moduleList = key1s;
            tempTableData = [];
            _.each(key1s, key1 => {
                let key2s = _.keys(data.zh[key1]);
                let length = key2s.length;
                _.each(key2s, key2 => {
                    tempTableData.push({
                        rspan: length,
                        key1: key1,
                        key2: key2,
                        en: data.en[key1][key2],
                        tw: data.tw[key1][key2],
                        zh: data.zh[key1][key2],
                    });
                    length = 0;
                })
            });
            this.tableData = tempTableData;
            this.$nextTick(() => {
                this.loading = false;
                console.timeEnd()
            })
        },
        tabSpanMethod({ row, column, rowIndex, columnIndex }) {
            if (columnIndex == 0) {
                if (row.rspan > 0) {
                    return {
                        rowspan: row.rspan,
                        colspan: 1
                    };
                } else {
                    return {
                        rowspan: 0,
                        colspan: 0
                    };
                }
            }
        },
        async saveData() {
            this.loading = true;
            let enObj = {}, twObj = {}, zhObj = {};
            _.each(_.uniq(_.pluck(tempTableData, 'key1')), key1 => {
                enObj[key1] = {};
                twObj[key1] = {};
                zhObj[key1] = {};
                let list = _.where(tempTableData, { key1 });
                _.each(list, item => {
                    enObj[key1][item.key2] = item.en;
                    twObj[key1][item.key2] = item.tw;
                    zhObj[key1][item.key2] = item.zh;
                })
            });
            let res1 = this.setLang('en_US', JSON.stringify(enObj));
            let res2 = this.setLang('zh_TW', JSON.stringify(twObj));
            let res3 = this.setLang('zh_CN', JSON.stringify(zhObj));
            this.loading = false;
            this.$message({
                message: '保存成功',
                type: 'success'
            });
        },
        addData() {
            this.$refs.addModel.dialogInit();
        }
    }
}
</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>