1、树与数组转换对应的目录如下图所示：
1、树与数组转换
/*
* @Author: zhr
*/
import Vue from 'vue';
function DataTransfer (data) {
if (!(this instanceof DataTransfer)) {
return new DataTransfer(data, null, null);
}
};
DataTransfer.treeToArray = function (data, parent, level, expandedAll) {
let tmp = [];
Array.from(data).forEach(function (record) {
if (record._expanded === undefined) {
Vue.set(record, '_expanded', expandedAll);
}
if (parent) {
Vue.set(record, '_parent', parent);
}
let _level = 0;
if (level !== undefined && level !== null) {
_level = level + 1;
}
Vue.set(record, '_level', _level);
tmp.push(record);
if (record.children && record.children.length > 0) {
let children = DataTransfer.treeToArray(record.children, record, _level, expandedAll);
tmp = tmp.concat(children);
}
});
return tmp;
};
export default DataTransfer;
代码截图：
2、构造Tree-Table的页面
对应的代码：
import Utils from './utils/index.js';
export default {
name: 'tree-grid',
props: {
// 该属性是确认父组件传过来的数据是否已经是树形结构了，如果是，则不需要进行树形格式化
treeStructure: {
type: Boolean,
default: function() {
return false;
}
},
// 这是相应的字段展示
columns: {
type: Array,
default: function() {
return [];
}
},
// 这是数据源
dataSource: {
type: Array,
default: function() {
return [];
}
},
// 这个作用是根据自己需求来的，比如在操作中涉及相关按钮编辑，删除等，需要向服务端发送请求，则可以把url传过来
requestUrl: {
type: String,
default: function() {
return '';
}
},
// 这个是是否展示操作列
treeType: {
type: String,
default: function() {
return 'unnormal';
}
},
// 是否默认展开所有树
defaultExpandAll: {
type: Boolean,
default: function() {
return true;
}
},
// 默认被点击时的样式处理
defaultRowHightLine: {
type: String,
default: function() {
return '';
}
}
},
data() {
return {
rowDefalut: '' // 防止被上次点击颜色渲染标志位
};
},
computed: {
// 格式化数据源
data: function() {
let me = this;
if (me.treeStructure) {
let data = Utils.MSDataTransfer.treeToArray(me.dataSource, null, null, me.defaultExpandAll);
data.forEach(e => {
if (this.defaultRowHightLine !== '') {
e = this.$options.methods.hindChild(e, this.defaultRowHightLine);
}
});
return data;
}
return me.dataSource;
}
},
methods: {
// 显示行
showTr: function({row, rowIndex}) {
let show = (row._parent ? (row._parent._expanded && row._parent._show) : true);
row._show = show;
// 编辑时只展开该行对应的机构以及上层机构
if (this.defaultRowHightLine !== '' && this.defaultRowHightLine === row.id + '') {
return show;
}
return show ? '' : 'display:none;';
},
adjustCol({row, column, rowIndex, columnIndex}) {
if (column.label === this.$i18n.t('treeTable.commonName')) {
console.log('21212111');
return 'width-row';
}
},
// 将没有选择的节点隐藏
hindChild(row, lid) {
let id = row.id + '';
if (id !== lid && row.children && row.children.length > 0) {
this.hindChild(row.children);
row._expanded = false; // 若不是已选择的节点，则设为不展开
}
if (id === lid && row._parent) {
this.showParent(row._parent);
}
return row;
},
showParent(row) {
row._expanded = true;
if (row._parent) {
this.showParent(row._parent);
}
},
// 点击某一行
clickRow(row, event, column) {
if (this.treeType === 'unnormal') {
this.$emit('setInstitution', row);
}
this.rowDefalut = row.id + '';
},
// 列表中行样式处理
tableRowClassName({row, rowIndex}) {
let id = row.id;
if (typeof id === 'number') {
id = id + '';
}
// 某一行编辑时默认样式处理
if (this.defaultRowHightLine !== '' && this.defaultRowHightLine === id) {
this.rowDefalut = '';
return 'info-row';
} else if (this.rowDefalut === id) { // 机构发生改变时，点击时颜色发生发生变动
return 'info-row';
} else {
return '';
}
},
// 展开下级
toggle: function(trIndex) {
let me = this;
let record = me.data[trIndex];
record._expanded = !record._expanded;
},
// 显示层级关系的空格和图标
spaceIconShow(index) {
let me = this;
if (me.treeStructure && index === 0) {
return true;
}
return false;
},
// 点击展开和关闭的时候，图标的切换
toggleIconShow(index, record) {
let me = this;
if (me.treeStructure && index === 0 && record.children && record.children.length > 0) {
return true;
}
return false;
},
handleEdit(row) { // 编辑
this.$emit('editRow', row);
},
handleAdd(id) { // 添加
this.$emit('addChild', id);
},
handleDelete(row) { // 删除
this.$emit('delete', row);
}
}
};.ms-tree-space {
position: relative;
top: 1px;
display: inline-block;
font-family: 'Glyphicons Halflings';
font-style: normal;
font-weight: 400;
line-height: 1;
width: 18px;
height: 14px;
}
.ms-tree-space::before {
content: ""
}
table td {
line-height: 26px;
}
.el-table__expand-icon--expanded {
-ms-transform: rotate(90deg);
transform: rotate(90deg);
}
/**
* 颜色标红提醒
*/
.el-table .info-row {
background: #FFFACD;
}
.el-table .width-row {
width: 300px;
}
该部分代码较多，所以没有截图。
3、在页面引用
import TreeGrid from '@/components/TreeGrid';
import backTop from '@/components/back-top';
import {
checkCode
}
from '@/common/js/validate';
import {
IS_ADD
}
from '@/common/js/dict';
import {
findTree, createTree, updateTree, deleteTree
}
from '@/common/api/system/organization/organization';
export default {
components: {
'tree-grid': TreeGrid,
'back-top': backTop
},
data() {
return {
normal: 'normal', // 控制操作按钮是否显示
filters: {
commonName: ''
},
orgForm: {
id: '',
commonName: '',
shortName: '',
enName: '',
parentId: '',
type: '',
isAdd: '',
remarks: ''
},
orgFormVisible: false,
dataSource: [{
id: '1',
commonName: '外交外事相关机构',
enName: '1111',
shortName: '222222',
nodeLevel: '0',
parentId: '0',
remarks: '2222222',
isAdd: 0,
children: [{
id: '4',
commonName: '外交部中心',
enName: '22222',
shortName: '33333',
nodeLevel: '1',
parentId: '1',
remarks: '22222',
isAdd: 0,
children: [{
id: '9',
commonName: '领事司',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '4',
remarks: '22222',
isAdd: 1,
children: [{
id: '39',
commonName: '亚非领事处',
enName: '22222',
shortName: '33333',
nodeLevel: '3',
parentId: '9',
remarks: '22222',
isAdd: 1,
children: [{
id: '79',
commonName: 'ddddd12',
enName: '22222',
shortName: '33333',
nodeLevel: '4',
parentId: '39',
remarks: '22222',
isAdd: 1
}, {
id: '80',
commonName: 'sssss12',
enName: '22222',
shortName: '33333',
nodeLevel: '4',
parentId: '39',
remarks: '22222',
isAdd: 1
}]
}, {
id: '40',
commonName: '欧美大领事处',
enName: '22222',
shortName: '33333',
nodeLevel: '3',
parentId: '9',
remarks: '22222',
isAdd: 1
}]
}, {
id: '10',
commonName: 'xxxxx',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '4',
remarks: '22222',
isAdd: 1
}]
}, {
id: '2',
commonName: '其他单位',
enName: '22222',
shortName: '33333',
nodeLevel: '1',
remarks: '22222',
parentId: '1',
isAdd: 1,
children: [{
id: '11',
commonName: '领事司',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '2',
remarks: '22222',
isAdd: 1
}, {
id: '12',
commonName: 'xxxxx',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '2',
remarks: '22222',
isAdd: 1
}]
}, {
id: '3',
commonName: '地方外办',
enName: '22222',
shortName: '33333',
nodeLevel: '1',
parentId: '1',
remarks: '22222',
isAdd: 1,
children: [{
id: '8',
commonName: '领事司',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '3',
remarks: '22222',
isAdd: 1
}, {
id: '13',
commonName: 'xxxxx',
enName: '22222',
shortName: '33333',
nodeLevel: '2',
parentId: '3',
remarks: '22222',
isAdd: 1
}]
}]
}]
};
},
created() {
this.loadData();
},
computed: {
columns() {
return [{ // 列表索引
text: this.$i18n.tp('table.commonName'),
dataIndex: 'commonName'
}, {
text: this.$i18n.tp('table.shortName'),
dataIndex: 'shortName'
}, {
text: this.$i18n.tp('table.id'),
dataIndex: 'id'
}, {
text: this.$i18n.tp('table.nodeLevel'),
dataIndex: 'nodeLevel'
}, {
text: this.$i18n.tp('table.isAdd'),
dataIndex: 'isAdd'
}, {
text: this.$i18n.tp('table.remarks'),
dataIndex: 'remarks'
}];
},
ruler() {
return {
commonName: [{
required: true,
message: this.$i18n.t('validate.checkNull.nempty')
}],
id: [{
required: true,
messages: {
error1: this.$i18n.t('validate.checkNum.digital'),
error2: this.$i18n.t('validate.checkNum.nzero'),
error3: this.$i18n.t('validate.checkNum.limitParLength')
},
validator: checkCode
}],
enName: [{
required: true,
message: this.$i18n.t('validate.checkNull.nempty')
}],
shortName: [{
required: true,
message: this.$i18n.t('validate.checkNull.nempty')
}]
};
}
},
methods: {
search() {
this.loadData();
},
loadData() { // 加载数据
let param = Object.assign({}, this.filters);
findTree(param).then(resp => {
// console.log('1111', resp.data);
this.treeData = resp.data;
}).catch(error => {
this.$message({
// message: this.$i18n.tp('treeMsg.selectFail'),
message: error.data,
type: 'error'
});
// console.log('22222', JSON.stringify(error));
return error;
});
},
handleCurrentAddChild(id) { // 新增子节点
this.$refs.orgForm.resetFields();
this.orgFormVisible = true;
this.orgForm.parentId = id;
this.orgForm.id = '';
this.orgForm = Object.assign(this.orgForm, this.currentDict);
this.$nextTick(() => { // 页面渲染之后处理
document.getElementById('tree-table').scrollTop = this.$refs.orgForm.$el.offsetTop; //
});
},
handleCurrentEdit(row) { // 编辑列表中某一行
this.$refs.orgForm.resetFields();
this.orgFormVisible = true;
if (row._parent !== undefined) {
this.orgForm.parentId = row._parent.id;
}
this.orgForm = Object.assign(this.orgForm, row);
this.orgForm.isAdd = this.commonDict(row.isAdd, IS_ADD);
this.$nextTick(() => { // 页面渲染之后处理
// orgForm 设为锚点
document.getElementById('tree-table').scrollTop = this.$refs.orgForm.$el.offsetTop; //
});
},
handleCurrentDelete(row) { // 注销列表中某一行
if (row._level === 0 || row._level === 1) {
this.$message({
message: this.$i18n.tp('treeMsg.noallow'),
type: 'danger'
});
return;
}
this.$refs.orgForm.resetFields();
this.orgFormVisible = false;
this.$confirm(this.$i18n.tp('message.del'), this.$i18n.tp('message.prompt'), {
confirmButtonText: this.$i18n.tp('message.sure'),
cancelButtonText: this.$i18n.tp('message.cancel'),
confirmButtonClass: 'confirmButtonClass',
type: 'warning'
}).then(() => {
let params = {
id: row.id
};
deleteTree(params).then(data => {
if (data.status === 0) {
this.$message({
message: this.$i18n.tp('treeMsg.delSucc'),
type: 'success'
});
this.orgFormVisible = false;
// console.log('1111', row._parent.id);
this.loadData();
}
}).catch(error => {
this.$message({
message: error.data,
type: 'error'
});
return error;
});
}).catch(() => {
this.$message({
type: 'info',
message: this.$i18n.tp('message.canceldel'),
duration: 1000
});
});
},
submitForm() { // 保存
this.$refs.orgForm.validate((valid) => {
if (valid) {
let params = Object.assign({}, this.orgForm);
params.isAdd = this.commonDictCover(params.isAdd, IS_ADD);
delete params.children;
var response = {};
if (params.id !== null && params.id !== undefined && params.id.length > 0) {
response = updateTree(params); // 更新
} else {
response = createTree(params); // 创建节点
}
response.then(data => {
this.$message({
message: this.$i18n.tp('treeMsg.saveSucc'),
type: 'success'
});
this.orgFormVisible = false;
this.resetForm();
this.loadData();
}).catch(error => {
this.$message({
message: this.$i18n.tp('treeMsg.saveFail'),
type: 'error',
showClose: true,
duration: 3000
});
return error;
});
}
});
},
resetForm() { // 取消 按钮的事件
this.$refs.orgForm.resetFields(); // 表单中填写的数据的重置方法
this.orgFormVisible = false;
},
commonDict(type, Obj) { // 字典处理
let obj = Object.assign({}, Obj);
for (var variable in obj) {
if (typeof type === 'number') {
variable = parseInt(variable);
}
if (variable === type) {
obj[variable] = this.$i18n.t(obj[variable]);
return obj[variable];
}
}
},
commonDictCover(str, Obj) { // 字典反解Key处理
if (parseInt(str) === 1 || parseInt(str) === 0) {
return str;
}
let obj = Object.assign({}, Obj);
for (var variable in obj) {
if (this.$i18n.t(obj[variable]) === str) {
return parseInt(variable);
}
}
}
}
};.main-backTop {
height: calc(100vh - 9.35rem);
overflow: auto;
}
一键置顶操作
export default {
name: 'BackTop',
props: {
scrollmyself: {
type: Boolean, // 这是选择滚动对象的props值，如果滚动的对象是当前组件的父元素，就设置scrollObj为true.如果没有设置就默认为window对象
default: false
}
},
data () {
return {
isShow: false,
target: ''
};
},
methods: {
addhoverClass (e) {
if (e.type === 'mouseover') {
this.$el.classList.add('hover');
} else if (e.type === 'mouseout') {
this.$el.classList.remove('hover');
}
},
showIcon () {
if (this.target.scrollTop > 100) {
this.isShow = true;
this.$el.addEventListener('mouseover', this.addhoverClass);
this.$el.addEventListener('mouseout', this.addhoverClass);
} else if (this.target.scrollTop < 100) {
this.isShow = false;
}
},
getTop () {
this.$emit('shutdownForm'); // 关闭表单
let timer = setInterval(() => {
let top = this.target.scrollTop;
let speed = Math.ceil(top / 5);
this.target.scrollTop = top - speed;
if (top === 0) {
clearInterval(timer);
}
}, 20);
}
},
mounted () {
// 通过这个target来判断当前的滚动监听对象是谁
if (this.scrollmyself) {
this.target = this.$el.parentNode;
} else {
this.target = document.body;
}
console.log(this.target);
this.target.addEventListener('scroll', this.showIcon);
},
beforeDestroy () {
this.target.removeEventListener('scroll', this.showIcon);
}
}; .slide-fade-enter-active {
transition: all .1s ease;
}
.slide-fade-leave-active {
transition: all .1s cubic-bezier(1.0, 0.3, 0.8, 1.0);
opacity: 0;
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active 在低于 2.1.8 版本中 */ {
// transform: translateY(-20px);
opacity: 0;
}
.page-component-up {
background-color: #4eb1fb;
position: fixed;
right: 5rem;
bottom: 5rem;
width: 50px;
height: 50px;
border-radius: 25px;
cursor: pointer;
opacity: .4;
transition: .3s;
text-align: center;
z-index: 999;
}
.tri {
width: 0;
height: 0;
border: 12px solid transparent;
border-bottom-color: #dfe6ec;
text-align: center;
}
.hover {
background-color: red;
}
校验文件
/** 数据字典校验位数限制 */
const checkCode = (ruls, value, callback) => {
console.log('222222', ruls.messages, value);
setTimeout(() => {
if (value.length > 18) {
callback(new Error(ruls.messages.error3));
}
if (!/^\+?[0-9][0-9]*$/.test(value)) {
callback(new Error(ruls.messages.error1));
} else {
if (parseInt(value) < 0) {
callback(new Error(ruls.messages.error2));
} else {
callback();
}
}
}, 500);
};
/** 账户ID限制 */
const checkAccount = (ruls, value, callback) => {
console.log('222222', ruls.messages, /^[\dA-Za-z.]{1,20}$/ig.test(value));
setTimeout(() => {
if (!value) {
callback(new Error(ruls.messages.error1));
}
if (!/^[\dA-Za-z.]{1,20}$/ig.test(value)) {
callback(new Error(ruls.messages.error2));
} else {
callback();
}
}, 500);
};
/** 判断密码 */
const checkPwd = (ruls, value, callback) => {
setTimeout(() => {
if (!value) {
callback(new Error(ruls.messages.error1));
}
if (!/^[\dA-Za-z]{6,18}$/ig.test(value)) {
callback(new Error(ruls.messages.error2));
} else {
callback();
}
}, 500);
};
/** 确认密码 */
const checkConfirmPwd = (ruls, value, callback) => {
setTimeout(() => {
if (!value) {
callback(new Error(ruls.messages.error1));
}
if (value !== ruls.confirm()) {
callback(new Error(ruls.messages.error2));
} else {
callback();
}
}, 500);
};
/** 数量校验 空白卡管理模块-生产工人归还/查验人归还-公共 */
const checkNum = (ruls, value, callback) => {
console.log('222222', ruls.messages, value);
setTimeout(() => {
if (!/^\+?[0-9][0-9]*$/.test(value)) {
callback(new Error(ruls.messages.error1()));
} else {
if (parseInt(value) < 0) {
callback(new Error(ruls.messages.error2()));
} else {
callback();
}
}
}, 500);
};
/** 内容不为空提示 */
const checkNull = (ruls, value, callback) => {
console.log('1112222211', ruls.messages, value);
setTimeout(() => {
if (!value) {
callback(new Error(ruls.messages.error1()));
} else {
callback();
}
}, 500);
};
/** 手机号校验 */
const checkPhone = (rule, value, callback) => {
let reg = /^((\d{3}-\d{8}|\d{4}-\d{7,8})|(1[3|5|7|8][0-9]{9}))$/;
setTimeout(() => {
if (!reg.test(value)) {
callback(new Error(rule.messages.illegal()));
} else {
callback();
}
}, 1000);
};
/** 采集点邮寄天数配置 时间验证 */
const validDay = (ruls, value, callback) => {
setTimeout(() => {
if (!Number.isInteger(value * 1)) {
callback(new Error(ruls.messages.err01()));
} else if (value < 0) {
callback(new Error(ruls.messages.err02()));
} else if (value === '' || value.toString().trim() === '') {
callback(new Error(ruls.messages.err03()));
} else {
callback();
}
});
};
export {
checkCode,
checkAccount,
checkPhone,
validDay,
checkNull,
checkPwd,
checkConfirmPwd,
checkNum
};
字典文件
// 常量
/**
* 团组进度状态
*/
export const GROUP_STATUS = {
'1': '已受理',
'0': '已结束'
};
// 查询状态
export const QUERY_STATUS = {
'1': '查询成功',
'0': '查询中',
'-1': '查询失败'
};
// 是否有效
export const IS_EFFECT = {
1: 'dict.isEffect.effect',
0: 'dict.isEffect.invalid'
};
// 是否可以编辑
export const IS_EDIT = {
1: 'dict.isEdit.yes',
0: 'dict.isEdit.no'
};
// 是否可以添加管理员
export const IS_ADD = {
1: 'dict.isAdd.yes',
0: 'dict.isAdd.no'
};
// 角色类型
export const ROLE_TYPE = {
1: 'dict.roleType.bussineAdmin',
2: 'dict.roleType.inspectAdmin',
3: 'dict.roleType.sysAdmin'
};
// 角色数据源
export const ROLE_SOURCE = [
{
value: '1',
label: 'dict.roleType.bussineAdmin'
}, {
value: '2',
label: 'dict.roleType.inspectAdmin'
}, {
value: '3',
label: 'dict.roleType.sysAdmin'
}
];
// 角色类型
export const ACCOUNT_STATUS_TYPE = {
0: 'dict.accountType.normal',
1: 'dict.accountType.locked',
2: 'dict.accountType.invalid',
3: 'dict.accountType.expired',
4: 'dict.accountType.logged'
};
// 账户资源
export const ACCOUNT_STATUS_SOURCE = [
{
value: '0',
label: 'dict.accountType.normal'
}, {
value: '1',
label: 'dict.accountType.locked'
}, {
value: '2',
label: 'dict.accountType.invalid'
}, {
value: '3',
label: 'dict.accountType.expired'
}, {
value: '3',
label: 'dict.accountType.logged'
}
];
后台API
import { post } from '@/common/js/axios';
// 获取用户列表 //
/** 查询用户 */
export const accountFind = params => { return post(`/sysdict/account/find`, params); };
/** 添加用户 */
export const accountAdd = params => { return post(`/sysdict/account/create`, params); };
/** 编辑用户 */
export const accountUpdate = params => { return post(`/sysdict/account/update`, params); };
/** 删除用户 */
export const accountDelete = params => { return post(`/sysdict/account/delete`, params); };
/** 查询机构信息 */
export const findTree = params => post(`/sysdict/tree/find.json`, params);
国际化：
英文：
{
"filtres": {
"search":"Search",
"addUser": "Add Account",
"uid":"User ID",
"commonName":"User name",
"status":"Account Status",
"roles":"Role",
"fkOuIdName":"Institution Name",
"fkOuId":"Institution Code",
"lockStatus": "Lock/Unlock",
"lock": "Lock",
"unlock": "Unlock",
"operator":"Operator",
"edit":"Edit",
"usersDel":"Log off users",
"operateRecord": "Operate Record",
"confirmPwd": "Confirm Password",
"password":"Password",
"save":"Save",
"cancel":"Cancel",
"selectRole": "please select",
"rec": "Record"
},
"record": {
"operat":"Operator",
"type":"Operate Type",
"time":"Operate Time"
},
"message": {
"save":"Save",
"cancel":"Cancel",
"cannot":"Account ID cannot be empty!",
"empty":"User name cannot be empty!",
"rolesNo": "Role type cannot be empty!",
"fkOuIdName": "Institution Name cann be empty",
"fkId": "Institution Code cann be empty",
"passwordCannot":"Password cannot be empty!",
"saveSuccess":"Save success",
"updateSuccess":"Update success",
"deleteSuccess":"Delete success",
"conDel": "Confirm log off this account ?",
"selectFail": "This Institution do not allow add User !",
"tip": "Prompt !",
"sure": "Sure"
}
}
中文：
{
"filtres": {
"search":"查询",
"addUser": "新增账户",
"uid":"用户Id",
"commonName":"用户名称",
"status":"账户状态",
"roles":"角色",
"fkOuIdName":"机构名称",
"fkOuId":"机构代码",
"lockStatus": "锁定/解锁",
"lock": "锁定",
"unlock": "解锁",
"operator":"操作",
"edit":"编辑",
"usersDel":"注销用户",
"operateRecord": "操作记录",
"confirmPwd": "确认密码",
"password":"密码",
"save":"保存",
"cancel":"取消",
"selectRole": "请选择",
"rec": "记录"
},
"record": {
"operat":"操作人",
"type":"操作类型",
"time":"操作时间"
},
"message": {
"save":"保存",
"cancel":"取消",
"cannot":"账户ID不能为空 !",
"empty":"用户名不能为空 !",
"rolesNo": "角色类型不能为空 !",
"fkOuIdName": "机构名称不能为空 !",
"fkId": "机构代码不能为空 !",
"passwordCannot":"密码不能为空 !",
"saveSuccess":"保存成功",
"updateSuccess":"更新成功",
"deleteSuccess":"删除成功",
"conDel": "确认注销该用户?",
"selectFail": "此机构不允许添加用户 !",
"tip": "提示 !",
"sure": "确定"
}
}
公共部分国际化
{
"el": {
"colorpicker": {
"confirm": "OK",
"clear": "Clear"
},
"datepicker": {
"now": "Now",
"today": "Today",
"cancel": "Cancel",
"clear": "Clear",
"confirm": "OK",
"exit":"Exit Login",
"confirmExit":"Confirm exit?",
"prompted":"Prompted",
"selectDate": "Select date",
"selectTime": "Select time",
"startDate": "Start Date",
"startTime": "Start Time",
"endDate": "End Date",
"endTime": "End Time",
"prevYear": "Previous Year",
"nextYear": "Next Year",
"prevMonth": "Previous Month",
"nextMonth": "Next Month",
"year": "",
"month1": "January",
"month2": "February",
"month3": "March",
"month4": "April",
"month5": "May",
"month6": "June",
"month7": "July",
"month8": "August",
"month9": "September",
"month10": "October",
"month11": "November",
"month12": "December",
"weeks": {
"sun": "Sun",
"mon": "Mon",
"tue": "Tue",
"wed": "Wed",
"thu": "Thu",
"fri": "Fri",
"sat": "Sat"
},
"months": {
"jan": "Jan",
"feb": "Feb",
"mar": "Mar",
"apr": "Apr",
"may": "May",
"jun": "Jun",
"jul": "Jul",
"aug": "Aug",
"sep": "Sep",
"oct": "Oct",
"nov": "Nov",
"dec": "Dec"
}
},
"select": {
"loading": "Loading",
"noMatch": "No matching data",
"noData": "No data",
"placeholder": "Select"
},
"cascader": {
"noMatch": "No matching data",
"loading": "Loading",
"placeholder": "Select"
},
"pagination": {
"goto": "Go to",
"pagesize": "/page",
"total": "Total {total}",
"pageClassifier": ""
},
"messagebox": {
"title": "Message",
"confirm": "OK",
"cancel": "Cancel",
"error": "Illegal input"
},
"upload": {
"deleteTip": "press delete to remove",
"delete": "Delete",
"preview": "Preview",
"continue": "Continue"
},
"table": {
"emptyText": "No Data",
"confirmFilter": "Confirm",
"resetFilter": "Reset",
"clearFilter": "All",
"sumText": "Sum"
},
"tree": {
"emptyText": "No Data"
},
"transfer": {
"noMatch": "No matching data",
"noData": "No data",
"titles": ["List 1", "List 2"],
"filterPlaceholder": "Enter keyword",
"noCheckedFormat": "{total} items",
"hasCheckedFormat": "{checked}/{total} checked"
}
},
"menu": {
"sys":"System configure",
"org":"Organization Manage",
"account": "Account Manage",
"user": "User Manage"
},
"utilFilters": {
"yes": "Yes",
"no": "No"
},
"validate": {
"checkBoxNum": {
"emptyBox": "The number of outbound boxes cannot be empty",
"numlimitBox": "The outbound quantity must be less than the current system inventory",
"positiveInt": "Please enter a positive integer",
"boxnumLimit": "The number of outbound boxes must not exceed 50 boxes"
},
"checkNum": {
"digital": "Positive digital is necessary",
"nzero": "Digital must be greater than 0",
"limitParLength": "The input length should be 18 ",
"limitLength": "The input length should be 6 "
},
"checkNull": {
"nempty": "Name is necessary, the length is limited to 1-32"
},
"telPhone": {
"illegal": "Mobile phone number is illegal"
},
"validDay": {
"dayInt": "The number of days sent must be an integer",
"daygthan": "Mail days cannot be negative",
"dayEmpty": "Mail days cannot be empty"
},
"checkPwd": {
"empty": "The password cannot be empty",
"LimitType": "Please input 6-18 digital or letter password",
"twoDiff": "Input twice password is different, please input again"
}
},
"treeTable": {
"operate": "Operate",
"edit": "Edit",
"delete": "Delete",
"addInstitute": "Add subordinate agencies",
"commonName": "Institution Name",
"enName": "Institution English Name",
"shortName": "Institution Abbreviation",
"id": "Institution Code",
"nodeLevel": "Node level",
"remarks": "Remark",
"isAdd": "Whether can add administrator",
"type": "Institution Type",
"parent": "Parent Code"
},
"dict": {
"groupStatus": {
"accepted": "Accepted",
"end": "End"
},
"queryStatus": {
"sucQuery": "Query success",
"query": "Querying",
"failQuery":"Query fail"
},
"editOpertion": {
"yedit":"Editable",
"nedit": "Not Editable"
},
"sex": {
"man": "Man",
"woman":"Female"
},
"isEffect":{
"effect": "Visible",
"invalid": "Invisible"
},
"isEdit":{
"yes": "Yes",
"no": "No"
},
"isAdd":{
"yes": "Yes",
"no": "No"
},
"roleType":{
"bussineAdmin": "Bussiness administrator",
"inspectAdmin": "Inspect administrator",
"sysAdmin": "System administrator"
},
"accountType":{
"normal": "Normal",
"locked": "Lock",
"invalid": "Invalid",
"expired": "Expired",
"logged": "Logged out"
}
}
}
中文：
{
"el": {
"colorpicker": {
"confirm": "确定",
"clear": "清空"
},
"datepicker": {
"now": "此刻",
"today": "今天",
"cancel": "取消",
"clear": "清空",
"confirm": "确定",
"exit":"退出登录",
"prompted":"提示",
"confirmExit":"确认退出?",
"selectDate": "选择日期",
"selectTime": "选择时间",
"startDate": "开始日期",
"startTime": "开始时间",
"endDate": "结束日期",
"endTime": "结束时间",
"prevYear": "前一年",
"nextYear": "后一年",
"prevMonth": "上个月",
"nextMonth": "下个月",
"year": "年",
"month1": "1 月",
"month2": "2 月",
"month3": "3 月",
"month4": "4 月",
"month5": "5 月",
"month6": "6 月",
"month7": "7 月",
"month8": "8 月",
"month9": "9 月",
"month10": "10 月",
"month11": "11 月",
"month12": "12 月",
"weeks": {
"sun": "日",
"mon": "一",
"tue": "二",
"wed": "三",
"thu": "四",
"fri": "五",
"sat": "六"
},
"months": {
"jan": "一月",
"feb": "二月",
"mar": "三月",
"apr": "四月",
"may": "五月",
"jun": "六月",
"jul": "七月",
"aug": "八月",
"sep": "九月",
"oct": "十月",
"nov": "十一月",
"dec": "十二月"
}
},
"select": {
"loading": "加载中",
"noMatch": "无匹配数据",
"noData": "无数据",
"placeholder": "请选择"
},
"cascader": {
"noMatch": "无匹配数据",
"loading": "加载中",
"placeholder": "请选择"
},
"pagination": {
"goto": "前往",
"pagesize": "条/页",
"total": "共 {total} 条",
"pageClassifier": "页"
},
"messagebox": {
"title": "提示",
"confirm": "确定",
"cancel": "取消",
"error": "输入的数据不合法!"
},
"upload": {
"deleteTip": "按 delete 键可删除",
"delete": "删除",
"preview": "查看图片",
"continue": "继续上传"
},
"table": {
"emptyText": "暂无数据",
"confirmFilter": "筛选",
"resetFilter": "重置",
"clearFilter": "全部",
"sumText": "合计"
},
"tree": {
"emptyText": "暂无数据"
},
"transfer": {
"noMatch": "无匹配数据",
"noData": "无数据",
"titles": ["列表 1", "列表 2"],
"filterPlaceholder": "请输入搜索内容",
"noCheckedFormat": "共 {total} 项",
"hasCheckedFormat": "已选 {checked}/{total} 项"
}
},
"menu": {
"sys":"系统管理",
"org":"机构管理",
"account": "账号管理",
"user": "用户管理"
},
"utilFilters": {
"yes": "是",
"no": "否"
},
"validate": {
"checkBoxNum": {
"emptyBox": "出库盒数不能为空",
"numlimitBox": "出库数量不得大于当前系统库存量",
"positiveInt": "请输入一个正整数",
"boxnumLimit": "出库盒数不得大于50盒"
},
"checkNull": {
"nempty": "名字不能为空, 请输入1-32位的名称"
},
"checkNum": {
"digital": "请输入一个正整数",
"nzero": "请输入大于0整数",
"limitParLength": "请输入一个长度为18位编码 ",
"limitLength": "请输入一个长度为6位编码 "
},
"telPhone": {
"illegal": "输入手机号不合法"
},
"validDay": {
"dayInt": "寄送天数必须是整数!",
"daygthan": "寄送天数不能为负数!",
"dayEmpty": "寄送天数不能为空!"
},
"checkAccount": {
"LimitType": "请输入1-20位数字，字母或者.的账户ID"
},
"checkPwd": {
"empty": "密码不能为空",
"LimitType": "请输入6-18的数字或者字母的密码",
"twoDiff": "两次输入密码不一致，请重新输入"
}
},
"treeTable": {
"operate": "操作",
"edit": "编辑",
"delete": "删除",
"addInstitute": "添加下级机构",
"commonName": "机构名称",
"enName": "机构英文名称",
"shortName": "机构简称",
"id": "机构代码",
"nodeLevel": "节点级别",
"remarks": "备注",
"isAdd": "是否可以添加管理员",
"parentId": "上级机构代码",
"type": "机构类型"
},
"dict": {
"groupStatus": {
"accepted": "已受理",
"end": "已结束"
},
"queryStatus": {
"sucQuery": "查询成功",
"query": "查询中",
"failQuery":"查询失败"
},
"editOpertion": {
"yedit":"可编辑",
"nedit": "不可编辑"
},
"sex": {
"man": "男",
"woman":"女"
},
"isEffect":{
"effect": "可见",
"invalid": "不可见"
},
"isEdit":{
"yes": "是",
"no": "否"
},
"isAdd":{
"yes": "是",
"no": "否"
},
"roleType":{
"bussineAdmin": "业务管理员",
"inspectAdmin": "审核管理员",
"sysAdmin": "系统管理员"
},
"accountType":{
"normal": "正常",
"locked": "已锁定",
"invalid": "无效用户",
"expired": "过期用户",
"logged": "已注销"
}
}
}
路由：
let menus = [
{ // 首页
path: '/index',
name: '欢迎页面',
hidden: true,
src: 'views/main/index.vue',
children: [
{ // hello
path: '/index/hello',
src: 'views/hello.vue'
}
]
}, {
path: '/system',
name: 'menu.sys',
iconCls: 'el-icon-my-icon',
src: 'views/main/index.vue',
rpath: '/system',
// onlyPage: true,
children: [
{
path: 'organization',
name: 'menu.org',
iconCls: 'el-icon-my-icon',
rpath: '/organization',
meta: {i18n: 'system/organization'},
src: 'views/system/organization.vue'
},
{
path: 'administrator',
name: 'menu.account',
iconCls: 'el-icon-my-icon',
rpath: '/administrator',
meta: {i18n: 'system/administrator'},
src: 'views/system/administrator.vue'
},
{
path: 'userManager',
name: 'menu.user',
iconCls: 'el-icon-my-icon',
rpath: '/usermanager',
meta: {i18n: 'system/userManager'},
src: 'views/system/userManager.vue'
}
]
}, { // login
path: '/login',
hidden: true,
src: 'views/login/index.vue'
}, { // login
path: '/treeGrid',
hidden: true,
src: 'components/TreeGrid.vue'
}
];
export {menus};
最后实现的效果：
修改TreeGrid.vue文件中的机构名称的宽度
