feat: i18n与jetcache

This commit is contained in:
2023-11-16 10:04:27 +08:00
parent d366daeccc
commit ac856ed2f6
24 changed files with 476 additions and 114 deletions

View File

@@ -4,30 +4,46 @@
<h3 class="title">
{{ title }}</h3>
<el-form-item prop="username">
<el-input v-model="loginForm.username" type="text" auto-complete="off" placeholder="账号">
<el-input v-model="loginForm.username" type="text" auto-complete="off" :placeholder="$t('common.account')">
<svg-icon slot="prefix" icon-class="user" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="password">
<el-input v-model="loginForm.password" type="password" auto-complete="off" placeholder="密码" @keyup.enter.native="handleLogin">
<el-input v-model="loginForm.password" type="password" auto-complete="off" :placeholder="$t('common.password')" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="password" class="el-input__icon input-icon" />
</el-input>
</el-form-item>
<el-form-item prop="code">
<el-input v-model="loginForm.code" auto-complete="off" placeholder="验证码" style="width: 63%" @keyup.enter.native="handleLogin">
<el-input v-model="loginForm.code" auto-complete="off" :placeholder="$t('common.verification_code')" style="width: 63%" @keyup.enter.native="handleLogin">
<svg-icon slot="prefix" icon-class="validCode" class="el-input__icon input-icon" />
</el-input>
<div class="login-code">
<img :src="codeUrl" @click="getCode">
</div>
</el-form-item>
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
记住我
</el-checkbox>
<el-row :gutter="20">
<el-col :span="12">
<el-checkbox v-model="loginForm.rememberMe" style="margin:0 0 25px 0;">
{{ $t('common.login_rm') }}
</el-checkbox>
</el-col>
<el-col :span="12">
<el-dropdown style="display: flex; justify-content: right; color: #409EFF;" trigger="click" @command="langChange">
<span class="el-dropdown-link">
{{ language }}
</span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item divided command="zh">简体中文</el-dropdown-item>
<el-dropdown-item divided command="en">English</el-dropdown-item>
<el-dropdown-item divided command="in">Indonesian</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</el-col>
</el-row>
<el-form-item style="width:100%;">
<el-button :loading="loading" size="medium" type="primary" style="width:100%;" @click.native.prevent="handleLogin">
<span v-if="!loading"> </span>
<span v-else> 中...</span>
<span v-if="!loading">{{ $t('common.login') }}</span>
<span v-else>{{ $t('common.login_ing') }}</span>
</el-button>
</el-form-item>
</el-form>
@@ -50,6 +66,7 @@ export default {
name: 'Login',
data() {
return {
language: '简体中文',
title: '诺力开发平台',
title_param: 'platform',
Background: Background,
@@ -80,6 +97,7 @@ export default {
}
},
created() {
this.setLang(localStorage.getItem('lang'))
this.getValueByCode(this.title_param).then(res => {
this.title = res.value
})
@@ -91,6 +109,22 @@ export default {
this.point()
},
methods: {
// 中英文切换
langChange(command) {
this.$i18n.locale = command
localStorage.setItem('lang', command)
this.setLang(command)
location.reload()
},
setLang(command) {
if (command === 'en') {
this.language = 'English'
} else if (command === 'zh') {
this.language = '简体中文'
} else if (command === 'in') {
this.language = 'Indonesian'
}
},
getCode() {
getCodeImg().then(res => {
this.codeUrl = res.img

View File

@@ -1,28 +1,28 @@
<template>
<div v-loading="!show" element-loading-text="数据加载中..." :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container">
<div v-loading="!show" :element-loading-text="$t('common.loading')" :style="!show ? 'height: 500px' : 'height: 100%'" class="app-container">
<div v-if="show">
<el-card class="box-card">
<div style="color: #666;font-size: 13px;">
<svg-icon icon-class="system" style="margin-right: 5px" />
<span>
系统{{ data.sys.os }}
{{ $t('monitor.sys') }}{{ data.sys.os }}
</span>
<span>
IP{{ data.sys.ip }}
</span>
<span>
项目已不间断运行{{ data.sys.day }}
{{ $t('monitor.day') }}{{ data.sys.day }}
</span>
<i class="el-icon-refresh" style="margin-left: 40px" @click="init" />
</div>
</el-card>
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-weight: bold;color: #666;font-size: 15px">状态</span>
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.status') }}</span>
</div>
<div>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
<div class="title">CPU使用率</div>
<div class="title">{{ $t('monitor.cpu') }}</div>
<el-tooltip placement="top-end">
<div slot="content" style="font-size: 12px;">
<div style="padding: 3px;">
@@ -42,20 +42,20 @@
<el-progress type="dashboard" :percentage="parseFloat(data.cpu.used)" />
</div>
</el-tooltip>
<div class="footer">{{ data.cpu.coreNumber }} 核心</div>
<div class="footer">{{ data.cpu.coreNumber }} {{ $t('monitor.core') }}</div>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
<div class="title">内存使用率</div>
<div class="title">{{ $t('monitor.memory') }}</div>
<el-tooltip placement="top-end">
<div slot="content" style="font-size: 12px;">
<div style="padding: 3px;">
总量{{ data.memory.total }}
{{ $t('monitor.tality') }}{{ data.memory.total }}
</div>
<div style="padding: 3px">
已使用{{ data.memory.used }}
{{ $t('monitor.used') }}{{ data.memory.used }}
</div>
<div style="padding: 3px">
空闲{{ data.memory.available }}
{{ $t('monitor.leisure') }}{{ data.memory.available }}
</div>
</div>
<div class="content">
@@ -65,17 +65,17 @@
<div class="footer">{{ data.memory.used }} / {{ data.memory.total }}</div>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
<div class="title">交换区使用率</div>
<div class="title">{{ $t('monitor.exchange') }}</div>
<el-tooltip placement="top-end">
<div slot="content" style="font-size: 12px;">
<div style="padding: 3px;">
总量{{ data.swap.total }}
{{ $t('monitor.tality') }}{{ data.swap.total }}
</div>
<div style="padding: 3px">
已使用{{ data.swap.used }}
{{ $t('monitor.used') }}{{ data.swap.used }}
</div>
<div style="padding: 3px">
空闲{{ data.swap.available }}
{{ $t('monitor.leisure') }}{{ data.swap.available }}
</div>
</div>
<div class="content">
@@ -85,15 +85,15 @@
<div class="footer">{{ data.swap.used }} / {{ data.swap.total }}</div>
</el-col>
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="6" style="margin-bottom: 10px">
<div class="title">磁盘使用率</div>
<div class="title">{{ $t('monitor.disk') }}</div>
<div class="content">
<el-tooltip placement="top-end">
<div slot="content" style="font-size: 12px;">
<div style="padding: 3px">
总量{{ data.disk.total }}
{{ $t('monitor.tality') }}{{ data.disk.total }}
</div>
<div style="padding: 3px">
空闲{{ data.disk.available }}
{{ $t('monitor.leisure') }}{{ data.disk.available }}
</div>
</div>
<div class="content">
@@ -111,7 +111,7 @@
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-weight: bold;color: #666;font-size: 15px">CPU使用率监控</span>
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.cpu_monitoring') }}</span>
</div>
<div>
<v-chart :options="cpuInfo" />
@@ -121,7 +121,7 @@
<el-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12" style="margin-bottom: 10px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="font-weight: bold;color: #666;font-size: 15px">内存使用率监控</span>
<span style="font-weight: bold;color: #666;font-size: 15px">{{ $t('monitor.memory_monitoring') }}</span>
</div>
<div>
<v-chart :options="memoryInfo" />

View File

@@ -13,22 +13,22 @@
width="500px"
>
<el-form ref="form" :model="form" :rules="rules" size="mini" label-width="80px">
<el-form-item label="编码" prop="code">
<el-form-item :label="$t('SysParam.table.code')" prop="code">
<el-input v-model="form.code" style="width: 370px;" />
</el-form-item>
<el-form-item label="名字" prop="name">
<el-form-item :label="$t('SysParam.table.name')" prop="name">
<el-input v-model="form.name" style="width: 370px;" />
</el-form-item>
<el-form-item label="" prop="value">
<el-form-item :label="$t('SysParam.table.values')" prop="value">
<el-input v-model="form.value" style="width: 370px;" />
</el-form-item>
<el-form-item label="备注" prop="description">
<el-form-item :label="$t('SysParam.table.description')" prop="description">
<el-input v-model="form.remark" style="width: 380px;" rows="5" type="textarea" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
<el-button type="text" @click="crud.cancelCU">{{ $t('common.Cancel') }}</el-button>
<el-button :loading="crud.cu === 2" type="primary" @click="crud.submitCU">{{ $t('common.Confirm') }}</el-button>
</div>
</el-dialog>
<!--表格渲染-->
@@ -42,11 +42,11 @@
>
<el-table-column type="selection" width="55" />
<el-table-column v-if="false" prop="id" label="id" />
<el-table-column prop="code" label="编码" min-width="130" show-overflow-tooltip />
<el-table-column prop="name" label="名称" min-width="120" show-overflow-tooltip />
<el-table-column prop="value" label="" min-width="270" show-overflow-tooltip />
<el-table-column prop="remark" label="备注" />
<el-table-column v-permission="['admin','param:edit','param:del']" label="操作" width="150px" align="center">
<el-table-column prop="code" :label="$t('SysParam.table.code')" min-width="130" show-overflow-tooltip />
<el-table-column :prop="$langPre.computedProp('name')" :label="$t('SysParam.table.name')" min-width="120" show-overflow-tooltip />
<el-table-column prop="value" :label="$t('SysParam.table.values')" min-width="270" show-overflow-tooltip />
<el-table-column prop="remark" :label="$t('SysParam.table.description')" />
<el-table-column v-permission="['admin','param:edit','param:del']" :label="$t('common.Operate')" width="150px" align="center">
<template slot-scope="scope">
<udOperation
:data="scope.row"
@@ -82,7 +82,7 @@ export default {
components: { pagination, crudOperation, rrOperation, udOperation },
mixins: [presenter(), header(), form(defaultForm), crud()],
cruds() {
return CRUD({ title: '系统参数', url: 'api/param', idField: 'id', sort: 'id,desc', crudMethod: { ...crudParam },
return CRUD({ title: 'menu.SystemParam', url: 'api/param', idField: 'id', sort: 'id,desc', crudMethod: { ...crudParam },
optShow: {
add: true,
edit: true,
@@ -102,23 +102,27 @@ export default {
rules: {
id: [
{ required: true, message: '不能为空', trigger: 'blur' }
{ required: true, message: this.$t('SysParam.rules.NotNull'), trigger: 'blur' }
],
code: [
{ required: true, message: '不能为空', trigger: 'blur' }
{ required: true, message: this.$t('SysParam.rules.NotNull'), trigger: 'blur' }
],
name: [
{ required: true, message: '不能为空', trigger: 'blur' }
{ required: true, message: this.$t('SysParam.rules.NotNull'), trigger: 'blur' }
],
value: [
{ required: true, message: '不能为空', trigger: 'blur' }
],
create_time: [
{ required: true, message: '不能为空', trigger: 'blur' }
{ required: true, message: this.$t('SysParam.rules.NotNull'), trigger: 'blur' }
]
}
}
},
// computed: {
// computedProp() {
// // 在计算属性中拼接属性名
// console.log(localStorage.getItem('lang'))
// return localStorage.getItem('lang') + '_name'
// }
// },
created() {
// this.webSocket()
},

View File

@@ -4,7 +4,7 @@
<el-col :xs="24" :sm="24" :md="8" :lg="6" :xl="5" style="margin-bottom: 10px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>个人信息</span>
<span>{{ $t('common.Personal_information') }}</span>
</div>
<div>
<div style="text-align: center">
@@ -19,15 +19,15 @@
</div>
</div>
<ul class="user-info">
<li><div style="height: 100%"><svg-icon icon-class="login" /> 登录账号<div class="user-right">{{ user.username }}</div></div></li>
<li><svg-icon icon-class="user1" /> 用户姓名 <div class="user-right">{{ user.person_name }}</div></li>
<li><div style="height: 100%"><svg-icon icon-class="login" /> {{ $t('common.account') }}<div class="user-right">{{ user.username }}</div></div></li>
<li><svg-icon icon-class="user1" /> {{ $t('common.username') }} <div class="user-right">{{ user.person_name }}</div></li>
<!-- <li><svg-icon icon-class="dept" /> 所属部门 <div class="user-right"> {{ user.dept.name }}</div></li>-->
<li><svg-icon icon-class="phone" /> 手机号码 <div class="user-right">{{ user.phone }}</div></li>
<li><svg-icon icon-class="email" /> 用户邮箱 <div class="user-right">{{ user.email }}</div></li>
<li><svg-icon icon-class="phone" /> {{ $t('common.phone') }} <div class="user-right">{{ user.phone }}</div></li>
<li><svg-icon icon-class="email" /> {{ $t('common.email') }} <div class="user-right">{{ user.email }}</div></li>
<li>
<svg-icon icon-class="anq" /> 安全设置
<svg-icon icon-class="anq" /> {{ $t('common.Security_settings') }}
<div class="user-right">
<a @click="$refs.pass.dialog = true">修改密码</a>
<a @click="$refs.pass.dialog = true">{{ $t('common.Change_password') }}</a>
<!-- <a @click="$refs.email.dialog = true">修改邮箱</a>-->
</div>
</li>
@@ -39,17 +39,17 @@
<!-- 用户资料 -->
<el-card class="box-card">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane label="用户资料" name="first">
<el-tab-pane :label="$t('common.User_information')" name="first">
<el-form ref="form" :model="form" :rules="rules" style="margin-top: 10px;" size="mini" label-width="65px">
<el-form-item label="姓名" prop="person_name">
<el-form-item :label="$t('common.name')" prop="person_name">
<el-input v-model="form.person_name" style="width: 35%" />
<span style="color: #C0C0C0;margin-left: 10px;">用户姓名不作为登录使用</span>
<span style="color: #C0C0C0;margin-left: 10px;">{{ $t('common.Tip3') }}</span>
</el-form-item>
<el-form-item label="手机号" prop="phone">
<el-form-item :label="$t('common.phone2')" prop="phone">
<el-input v-model="form.phone" style="width: 35%;" />
<span style="color: #C0C0C0;margin-left: 10px;">手机号码不能重复</span>
<span style="color: #C0C0C0;margin-left: 10px;">{{ $t('common.Tip4') }}</span>
</el-form-item>
<el-form-item label="性别">
<el-form-item :label="$t('common.sex')">
<el-radio-group v-model="form.gender" style="width: 178px">
<el-radio label="男"></el-radio>
<el-radio label="女"></el-radio>

View File

@@ -8,14 +8,13 @@
:inline="true"
class="demo-form-inline"
label-position="right"
label-width="80px"
label-suffix=":"
>
<el-form-item label="工单编号">
<el-form-item :label="$t('WorkOrder.form.WorkOrderCode')">
<el-input
v-model="query.workorder_code"
clearable
placeholder="工单编号"
:placeholder="$t('WorkOrder.placeholder.WorkOrderCode')"
class="filter-item"
@keyup.enter.native="crud.toQuery"
/>