ccl_plm-vue/src/views/modules/sys/menu-language.vue

<template>
  <el-dialog
    width="255px"
    :title="buttons.language"
    :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="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 {searchMenuLanguageById, saveMenuLanguage,} from '@/api/sysLanguageMenu.js'
import {searchSysLanguage} from '@/api/sysLanguage.js'
import {
  searchFunctionButtonList,
} from "@/api/sysLanguage.js"

export default {
  data() {
    return {
      visible: false,
      dataList: [],
      languageList: [],
      buttons: {
        add: '确认',
        close: '关闭',
        language: '语言'
      },
    }
  },
  methods: {
    // 获取button的词典
    getFunctionButtonList() {
      let queryButton = {
        functionId: this.$route.meta.menuId,
        tableId: '*',
        languageCode: this.$i18n.locale,
        objectType: 'button'
      }
      searchFunctionButtonList(queryButton).then(({data}) => {
        if (data.code == 0 && data.data) {
          this.buttons = data.data
        }
      })
    },
    async init(id) {
      this.visible = true
      await this.getLanguageList()
      let menu = {
        menuId: id
      }
      searchMenuLanguageById(menu).then(({data}) => {
        this.dataList = data.menuLanguageList
      })
    },
    // 获取数据列表
    getDataList() {
      this.dataListLoading = false
    },
    // 表单提交
    dataFormSubmit(val) {

      saveMenuLanguage(this.dataList).then(({data}) => {
        if (data.code == 0) {
          this.$message.success(data.msg)
          this.$emit('refreshDataList')
          this.visible = false
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    // 获取多语言列表
    async getLanguageList() {
      await searchSysLanguage({languageCode: this.$i18n.locale}).then(({data}) => {
        this.languageList = data.rows
      })
    },
  },
  created() {
    this.getFunctionButtonList()
  },
}
</script>

<style lang="scss">

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