rongxing-vue/src/views/modules/sys/language/common-language-base.vue

<template>
  <el-dialog
    width="350px"
    title="语言"
    :close-on-click-modal="false"
    :visible.sync="visible">

    <el-row v-for="(item,index) in dataList"
            :key="item.columnProp"
            :label="item.columnLabel"
            :prop="item.columnProp">
      <el-col :span="4">

      </el-col>
      <el-col :span="24">
        {{ languageList[index].languageCode==item.languageCode?languageList[index].languageName:item.languageCode }}
        <el-input v-model="item.languageValue" controls-position="right" style="display:inline"></el-input>
      </el-col>
    </el-row>

    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="dataFormSubmit()"> {{ buttons.add }}</el-button>
      <el-button @click="visible = false" type="primary">{{ buttons.close }}</el-button>
    </span>
  </el-dialog>
</template>

<script>
import {searchBaseLanguageList, saveBaseObjectLanguageList,searchSysLanguage} from '@/api/sysLanguage.js'

export default {
  data() {
    return {
      visible: false,
      dataList: [],
      languageList: [],
      buttons: {
        add: '确认',
        close: '关闭',
      },
    }
  },
  methods: {
    async  init(val) {
      this.visible = true
      await this.getLanguageList()
      searchBaseLanguageList(val).then(({data}) => {
        this.dataList = data.rows
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = false
    },
    // 表单提交
    dataFormSubmit(val) {
      saveBaseObjectLanguageList(this.dataList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.visible = false
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取多语言列表
    async  getLanguageList() {
      await searchSysLanguage({ languageCode: this.$i18n.locale}).then(({data}) => {
        this.languageList = data.rows
      })
    },
  }
}
</script>

<style lang="scss">

.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item {
  margin-bottom: 5px;
}
</style>