NEZ-1158 feat: 国际化列表 页面& 编辑页面

nezha-fronted/src/components/common/rightBox/administration/userBox.vue

@@ -60,7 +60,7 @@
                        clearable
                        collapse-tags
                        placeholder=""
-                       popper-class="right-box-select-top  prevent-clickoutside"
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
                        size="small">
               <template v-for="item in languageList">
                 <el-option :key="item.value" :label="item.label" :value="item.value"></el-option>

nezha-fronted/src/components/common/rightBox/setting/globalizationBox.vue

@@ -0,0 +1,167 @@
+<template>
+  <div class="right-box right-box-dc" v-clickoutside="{obj:editGlobalization,func:clickOutside}">
+    <!-- begin--标题-->
+    <div class="right-box__header">
+      <div class="header__title">{{editGlobalization.id ? ($t("i18n.editI18n")) : $t("i18n.createI18n")}}</div>
+      <div class="header__operation">
+        <span v-cancel="{obj: editGlobalization, func: esc}"><i class="nz-icon nz-icon-close"></i></span>
+      </div>
+    </div>
+    <!-- begin--表单-->
+    <div class="right-box__container">
+      <div class="container__form">
+        <el-form label-width="120px" size="small" :model="editGlobalization" label-position = "top" ref="globalizationForm">
+          <el-form-item :label='$t("i18n.name")' prop="name">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editGlobalization.name" size="small" id="dc-box-input-name"></el-input>
+          </el-form-item>
+          <el-form-item :label='$t("i18n.code")' prop="code">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editGlobalization.code" size="small" id="dc-box-input-code"></el-input>
+          </el-form-item>
+          <el-form-item :label="$t('i18n.lang')" prop="lang">
+            <el-select id="account-input-language"
+                       class="right-box__select"
+                       v-model="editGlobalization.lang"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-top right-public-box-dropdown-top prevent-clickoutside"
+                       size="small">
+              <template v-for="item in languageList">
+                <el-option :key="item.id" :label="item.name" :value="item.value"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+          <el-form-item :label='$t("i18n.value")' prop="value">
+            <el-input placeholder="" maxlength="64" show-word-limit v-model="editGlobalization.value" size="small" id="dc-box-input-value"></el-input>
+          </el-form-item>
+<!--          <el-form-item :label='$t("i18n.remark")' prop="remark">-->
+<!--            <el-input placeholder="" maxlength="64" show-word-limit v-model="editGlobalization.value" size="small" id="dc-box-input-value"></el-input>-->
+<!--          </el-form-item>-->
+        </el-form>
+      </div>
+    </div>
+    <!--底部按钮-->
+    <div class="right-box__footer">
+      <button v-cancel="{obj:editGlobalization,func:esc}" id="dc-box-esc" class="footer__btn footer__btn--light">
+        <span>{{$t('overall.cancel')}}</span>
+      </button>
+      <button :class="{'nz-btn-disabled':prevent_opt.save}" :disabled="prevent_opt.save" @click="save" class="footer__btn" id="dc-box-save">
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+
+  </div>
+</template>
+
+<script>
+import editRigthBox from '@/components/common/mixin/editRigthBox'
+export default {
+  name: 'globalizationBox',
+  props: {
+    obj: {
+      type: Object
+    },
+    globalizationData: Array
+  },
+  mixins: [editRigthBox],
+  data () {
+    return {
+      editGlobalization: {},
+      areaData: [],
+      coordinateFlag: false,
+      languageList: []
+    }
+  },
+  methods: {
+    /* 关闭弹框 */
+    esc (refresh) {
+      this.prevent_opt.save = false
+      this.$emit('close', refresh)
+    },
+    clickOutside () {
+      this.esc(false)
+    },
+    /* 保存 */
+    save () {
+      if (this.prevent_opt.save) {
+        return
+      };
+      this.prevent_opt.save = true
+      this.$refs.globalizationForm.validate((valid) => {
+        if (valid) {
+          if (this.editGlobalization.id) {
+            const param = { ...this.editGlobalization }
+            this.$put('/sys/i18n', param).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          } else {
+            const param = { ...this.editGlobalization }
+            this.$post('/sys/i18n', param).then(response => {
+              this.prevent_opt.save = false
+              if (response.code === 200) {
+                this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
+                this.esc(true)
+              } else {
+                this.$message.error(response.msg)
+              }
+            })
+          }
+        } else {
+          this.prevent_opt.save = false
+          return false
+        }
+      })
+    },
+    /* 删除 */
+    del () {
+      if (this.prevent_opt.save) { return } ;
+      this.prevent_opt.save = true
+      this.$confirm(this.$t('tip.confirmDelete'), {
+        confirmButtonText: this.$t('tip.yes'),
+        cancelButtonText: this.$t('tip.no'),
+        type: 'warning'
+      }).then(() => {
+        this.$delete('/sys/i18n' + this.editGlobalization.id).then(response => {
+          this.prevent_opt.save = false
+          if (response.code === 200) {
+            this.$message({ duration: 1000, type: 'success', message: this.$t('tip.deleteSuccess') })
+            this.esc(true)
+          } else {
+            this.$message.error(response.msg)
+          }
+        })
+      }).catch(() => {
+        this.prevent_opt.save = false
+      })
+    },
+    langDataList () {
+      this.$get('/sys/dict/all', { type: 'lang' }).then(response => {
+        if (response.code === 200) {
+          this.languageList = response.data
+        } else {
+          this.$message.error(response.msg)
+        }
+      })
+    }
+  },
+  mounted () {
+    this.langDataList()
+  },
+  watch: {
+    obj: {
+      immediate: true,
+      deep: true,
+      handler (n, o) {
+        this.isEdit = true
+        this.editGlobalization = JSON.parse(JSON.stringify(n))
+      }
+    }
+  }
+}
+</script>

nezha-fronted/src/components/common/table/settings/globalizationTable.vue

@@ -0,0 +1,124 @@
+<template>
+  <el-table
+    id="dcTable"
+    ref="dataTable"
+    :data="tableData"
+    :height="height"
+    border
+    @header-dragend="dragend"
+    @sort-change="tableDataSort"
+    @selection-change="selectionChange"
+  >
+    <el-table-column
+      :resizable="false"
+      align="center"
+      type="selection"
+      width="55">
+    </el-table-column>
+    <el-table-column
+      v-for="(item, index) in customTableTitle"
+      v-if="item.show"
+      :key="`col-${index}`"
+      :fixed="item.fixed"
+      :label="item.label"
+      :min-width="`${item.minWidth}`"
+      :prop="item.prop"
+      :resizable="true"
+      :sort-orders="['ascending', 'descending']"
+      :sortable="item.sortable"
+      :width="`${item.width}`"
+      class="data-column"
+    >
+      <template slot="header">
+        <span class="data-column__span">{{item.label}}</span>
+        <div class="col-resize-area"></div>
+      </template>
+      <template slot-scope="scope" :column="item">
+        <template v-if="item.prop === 'lang'">
+          <span v-if="scope.row[item.prop] === 'en'">English</span>
+          <span v-else-if="scope.row[item.prop] === 'zh'">简体中文</span>
+        </template>
+        <template v-else-if="scope.row[item.prop]">{{scope.row[item.prop]}}</template>
+        <template v-else>-</template>
+      </template>
+    </el-table-column>
+    <el-table-column
+      :resizable="false"
+      :width="operationWidth"
+      fixed="right">
+      <div slot="header" class="table-operation-title">{{$t('overall.option')}}</div>
+      <div slot-scope="scope" class="table-operation-items">
+        <button class="table-operation-item" v-has="'i18n_edit'" @click="tableOperation(['edit', scope.row])"><i class="nz-icon nz-icon-edit"></i></button>
+        <el-dropdown size="medium" v-has="['i18n_delete', 'i18n_edit']" trigger="click" @command="tableOperation">
+          <div class="table-operation-item table-operation-item--more">
+            <i class="nz-icon nz-icon-more3"></i>
+          </div>
+          <el-dropdown-menu slot="dropdown" class="right-box-select-top right-public-box-dropdown-top">
+            <el-dropdown-item v-has="'i18n_delete'" :command="['delete', scope.row]"><i class="nz-icon nz-icon-delete"></i><span class="operation-dropdown-text">{{$t('overall.delete')}}</span></el-dropdown-item>
+          </el-dropdown-menu>
+        </el-dropdown>
+      </div>
+    </el-table-column>
+    <template  slot="empty">
+      <div v-if="!loading" class="table-no-data">
+        <svg class="icon" aria-hidden="true">
+          <use xlink:href="#nz-icon-no-data-list"></use>
+        </svg>
+        <div class="table-no-data__title">No results found</div>
+      </div>
+      <div v-else>&nbsp;</div>
+    </template>
+  </el-table>
+</template>
+
+<script>
+import table from '@/components/common/mixin/table'
+export default {
+  name: 'globalizationTable',
+  mixins: [table],
+  props: {
+    loading: Boolean
+  },
+  data () {
+    return {
+      tableTitle: [
+        {
+          label: 'ID',
+          prop: 'id',
+          show: true,
+          width: 80,
+          sortable: 'custom'
+        }, {
+          label: this.$t('i18n.name'),
+          prop: 'name',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('i18n.code'),
+          prop: 'code',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('i18n.lang'),
+          prop: 'lang',
+          show: true,
+          sortable: 'custom'
+        }, {
+          label: this.$t('i18n.value'),
+          prop: 'value',
+          show: true
+        }
+        // , {
+        //   label: this.$t('i18n.remark'),
+        //   prop: 'remark',
+        //   show: true,
+        //   sortable: 'custom'
+        // }
+      ]
+    }
+  }
+}
+</script>
+<style scoped>
+
+</style>

nezha-fronted/src/components/page/config/dc.vue

@@ -127,7 +127,6 @@
           @orderBy="tableDataSort"
           @reload="getTableData"
           @selectionChange="selectionChange"
-          @statusChange='statusChange'
           @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></dc-table>
       </template>
       <!-- 分页组件 -->
@@ -230,17 +229,6 @@ export default {
     }
   },
   methods: {
-    statusChange (dc) {
-      this.$put(this.url, dc).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.getTableData()
-      })
-    },
     getUserData () {
       return new Promise(resolve => {
         this.$get('sys/user', { pageSize: -1, pageNo: 1 }).then(response => {

nezha-fronted/src/components/page/config/globalization.vue

@@ -0,0 +1,155 @@
+<template>
+  <div>
+    <nz-data-list
+      ref="dataList"
+      :api="url"
+      :layout="['searchInput', 'elementSet', 'pagination']"
+      :custom-table-title.sync="tools.customTableTitle"
+      :from="fromRoute.dc"
+      :search-msg="searchMsg"
+      @search="search"
+      @getTableData="getTableData"
+    >
+      <template v-slot:top-tool-right>
+        <button id="dc-add" v-has="'dc_add'" :title="$t('overall.createDatacenter')" class="top-tool-btn margin-r-10"
+                type="button" @click="add">
+          <i class="nz-icon-create-square nz-icon"></i>
+        </button>
+      </template>
+      <template v-slot:default="slotProps">
+        <globalization-table
+          ref="dataTable"
+          v-loading="tools.loading"
+          :loading="tools.loading"
+          :api="url"
+          :custom-table-title="tools.customTableTitle"
+          :height="mainTableHeight"
+          :table-data="tableData"
+          @del="del"
+          @edit="edit"
+          @copy="copy"
+          @orderBy="tableDataSort"
+          @reload="getTableData"
+          @selectionChange="selectionChange"
+          @showBottomBox="(targetTab, object) => { $refs.dataList.showBottomBox(targetTab, object) }"></globalization-table>
+      </template>
+      <!-- 分页组件 -->
+      <template v-slot:pagination>
+        <Pagination ref="Pagination" :pageObj="pageObj" :tableId="tableId" @pageNo='pageNo' @pageSize='pageSize'></Pagination>
+      </template>
+    </nz-data-list>
+    <transition name="right-box">
+      <i18n-box v-if="rightBox.show" :obj="object" :globalization-data="globalizationData" @close="closeRightBox" @reload="getTableData"></i18n-box>
+    </transition>
+  </div>
+</template>
+<script>
+import nzDataList from '@/components/common/table/nzDataList'
+import dataListMixin from '@/components/common/mixin/dataList'
+import i18nBox from '@/components/common/rightBox/setting/globalizationBox'
+import globalizationTable from '@/components/common/table/settings/globalizationTable'
+
+export default {
+  name: 'i18n',
+  components: {
+    nzDataList,
+    i18nBox,
+    globalizationTable
+  },
+  mixins: [dataListMixin],
+  data () {
+    return {
+      url: 'sys/i18n',
+      tableId: 'dcTable', // 需要分页的table的id，用于记录每页数量
+      blankObject: {
+        ids: '',
+        name: '',
+        code: '',
+        lang: 'English',
+        value: ''
+      },
+      searchMsg: { // 给搜索框子组件传递的信息
+        zheze_none: true,
+        searchLabelList: [
+          {
+            name: 'ID',
+            type: 'input',
+            label: 'ids',
+            disabled: false
+          },
+          {
+            name: this.$t('i18n.code'),
+            type: 'input',
+            label: 'code',
+            disabled: false
+          },
+          {
+            name: this.$t('i18n.lang'),
+            type: 'input',
+            label: 'lang',
+            disabled: false
+          },
+          {
+            name: this.$t('i18n.value'),
+            type: 'input',
+            label: 'value',
+            disabled: false
+          }
+        ]
+      },
+      globalizationData: [],
+      cabinetBoxShow: false
+    }
+  },
+  methods: {
+    getUserData () {
+      return new Promise(resolve => {
+        this.$get('/sys/i18n', { pageSize: -1, pageNo: 1 }).then(response => {
+          if (response.code === 200) {
+            this.globalizationData = response.data.list
+          } else {
+            this.$message.error(response.msg)
+          }
+          resolve()
+        })
+      })
+    },
+    addCabinet () {
+      this.cabinetBoxShow = true
+    },
+    closeRightBox (refresh) {
+      this.rightBox.show = false
+      this.cabinetBoxShow = false
+      if (refresh) {
+        this.delFlag = true
+        this.getTableData()
+      }
+    }
+  },
+  mounted () {
+    this.getUserData()
+  }
+  // watch: {
+  //   $route: {
+  //     immediate: true,
+  //     handler () {
+  //       // 是否弹出侧滑
+  //       const add = this.$route.query.add
+  //       if (add) {
+  //         if (add === 'dc') {
+  //           this.add()
+  //         }
+  //         if (add === 'cabinet') {
+  //           this.addCabinet()
+  //         }
+  //       }
+  //     }
+  //   }
+  // }
+}
+</script>
+<style scoped>
+/deep/ td .nz-icon-gear:before{
+  color: #606266;
+}
+</style>

nezha-fronted/src/components/page/config/user.vue

@@ -154,20 +154,6 @@ export default {
     }
   },
   methods: {
-    statusChange (user) {
-      if (user.roles) {
-        user.roleIds = user.roles.map(t => t.id)
-      }
-      this.$put('sys/user', user).then(response => {
-        if (response.code === 200) {
-          this.rightBox.show = false
-          this.$message({ duration: 1000, type: 'success', message: this.$t('tip.saveSuccess') })
-        } else {
-          this.$message.error(response.msg)
-        }
-        this.getTableData()
-      })
-    },
     edit (u, copyFlag) {
       this.$get(`${this.url}/${u.id}`).then(response => {
         const user = response.user

nezha-fronted/src/router/index.js

@@ -114,6 +114,10 @@ export default new Router({
           path: '/system',
           component: resolve => require(['../components/page/config/system.vue'], resolve)
         },
+        {
+          path: '/i18n',
+          component: resolve => require(['@/components/page/config/globalization.vue'], resolve)
+        },
         {
           path: '/alertMessage',
           component: resolve => require(['../components/page/alert/alertMessage.vue'], resolve)