irc_web/src/App.vue

<template>
  <div id="app" style="position: relative">
    <router-view />
    <div @click="openI18n" style="position: fixed;bottom: 100px;right: 50px;z-index: 100000;width: 50px;height: 50px;background: #409eff88;line-height: 50px;text-align: center;color:#fff;border-radius: 50%;cursor: pointer">
      i18n
    </div>
    <el-drawer
      title="国际化"
      :visible.sync="drawer"
      direction="rtl"
      size="80%">
      <el-table
        :data="tableData"
        v-adaptive="{bottomOffset:50}"
        height="100"
        style="width: 100%">
        <el-table-column
          prop="Code"
          label="标签"
          width="300">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="Description"-->
<!--          label="路由"-->
<!--          show-overflow-tooltip-->
<!--          width="180">-->
<!--          <template slot-scope="scope">-->
<!--            {{scope.row.Description}}-->
<!--          </template>-->
<!--        </el-table-column>-->
        <el-table-column
          prop="Value"
          label="英文">
          <template slot-scope="scope">
            <el-input v-model="scope.row.Value" @input="(e) => {$set(scope.row, 'Value', e)}" size="mini"></el-input>
          </template>
        </el-table-column>
        <el-table-column
          prop="ValueCN"
          label="中文">
          <template slot-scope="scope">
            <el-input v-model="scope.row.ValueCN" @input="(e) => {$set(scope.row, 'ValueCN', e)}" size="mini"></el-input>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right;padding-top: 10px;padding-right: 10px;">
        <el-button size="mini" @click="drawer = false">取消
        </el-button>
        <el-button size="mini" type="primary" @click="handleSave">保存</el-button>
      </div>
    </el-drawer>
  </div>
</template>

<script>
import { batchAddOrUpdateFrontInternationalization } from '@/api/dictionary/dictionary'
import Vue from "vue";
import i18n from "./lang";
export default {
  name: 'App',
  data () {
    return {
      drawer: false,
      tableData: []
    }
  },
  mounted() {
  },
  methods: {
    changeValue(target, attr, e) {
      this.$set(target, attr, e)
    },
    handleSave() {
      this.$confirm('确定修改当前页面国际化内容？').then(() => {
        batchAddOrUpdateFrontInternationalization(this.tableData).then(res => {
          var zhMessages = {}, enMessages = {}
          this.tableData.forEach(v => {
            // zhMessages[v.Description + '_' + v.Code] = v.ValueCN
            // enMessages[v.Description + '_' + v.Code] = v.Value
            zhMessages[v.Code] = v.ValueCN
            enMessages[v.Code] = v.Value
          })
          i18n.mergeLocaleMessage('zh', zhMessages)
          i18n.mergeLocaleMessage('en', enMessages)
          this.drawer = false
          this.$message.success('国际化修改成功')
        })
      })
    },
    openI18n() {
      this.tableData = []
      this.drawer = true
      let arr = []
      let tableData = this.$tl.map(v => {
        let a = {...v}
        // if (!a.Description) {
        //   a.Description = this.$route.path
        // }
        return a
      })
      tableData = tableData.filter(v => {
        // return  ~this.$path.indexOf(v.Description + '_' + v.Code)
        return  ~this.$path.indexOf(v.Code)
      })
      this.$path.forEach(v => {
        let o = tableData.find(a => {
          return a.Code === v
        })
        if (o) {
          arr.push(o)
        } else {
          arr.push({
            Code: v,
            Description: null,
            Value: null,
            ValueCN: null
          })
        }
      })
      this.tableData = Object.assign([], arr)
      console.log(JSON.stringify(this.$path))
      console.log(JSON.stringify(this.tableData))
    }
  }
}
</script>

<style lang="scss">
.el-tooltip__popper{
  max-width: 400px;
}
.my_multiple{
  .el-input--medium .el-input__inner{
    height: 36px!important;
  }
  .el-select__tags{
    flex-wrap: nowrap;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: block;
  }
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}

input[type="number"] {
  -moz-appearance: textfield !important;
}

.viewer-fixed.viewer-container{
  z-index: 10000;
}
textarea{
  white-space: break-spaces;
  word-break: normal;
}

*{
  word-break: normal!important;
}
.box-body .el-button.is-circle:not(.is-disabled) i:before{
  color: #428bca;
}
.box-body .el-button.is-circle i.el-icon-question:before{
  color: #fff;
}
</style>