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文件中的機構名稱的寬度
