Ffast-FE vue iview 백그라운드 관리 시스템 기반 프런트엔드 빠른 솔루션 개발
Ffast-FE
vue iview 백엔드 관리 시스템 기반 전단 빠른 개발 솔루션
설치하다.
# install dependencies
npm install or yarn
# serve with hot reload at localhost:8000
npm run dev
# build for production with minification
npm run build
간단한 소개
Ffast-FE는 vue iview 백엔드 관리 시스템을 기반으로 하는 전단 빠른 개발 솔루션으로 대량의 상용 구성 요소 레이아웃을 봉인했다.기본적인 시스템 관리 페이지가 구현되었습니다. 구성 요소로 웹 페이지를 신속하게 개발할 수 있습니다.이미 실현된 페이지(전체 레이아웃 인터페이스, 사용자 관리, 역할 관리, 사전 관리, 권한 메뉴, 인터페이스 테스트, 시스템 로그) 개발 중인 페이지(코드 생성) 프레젠테이션 주소http://demo.ffast.cn/대체 주소http://39.107.104.190/ffast
간단한 첨삭 수정 표 페이지
/**
*
*/
const tableEditOptions = {
// ， false
editPage: true,
//
width: 600,
//
labelWidth: 70,
//
dynamic: [
[
{name: 'id', hidden: true},
{
name: 'name',
type: 'text',
span: 12,
label: ' ',
rules: {required: true}
},
{name: 'parentId', type: 'treeSelect', dataFromTree: true, span: 12, label: ' '}
],
[
{name: 'url', type: 'text', span: 24, label: ' Url'}
],
[
{name: 'identity', type: 'text', span: 12, label: ' '},
{name: 'icon', type: 'text', span: 12, label: ' '}
],
[
{name: 'weight', type: 'text', span: 12, label: ' '}
],
[
{
name: 'status',
openText: ' ',
closeText: ' ',
type: 'switch',
span: 12,
label: ' ',
value: 1,
trueValue: 1,
falseValue: 0
},
{
name: 'resType',
type: 'radio',
span: 12,
label: ' ',
value: 1,
data: [{label: ' ', value: 1}, {label: ' ', value: 2}],
rules: {required: true, type: 'number'}
}
],
[
{
name: 'addBaseCrud',
type: 'switch',
openText: ' ',
closeText: ' ',
span: 12,
label: ' ',
value: false
}
]
]
}
/**
*
*/
const treeOptions = {
title: ' ',
//
dataUrl: '/sys/res/list',
//
createUrl: '/sys/res/create',
//
deleteUrl: '/sys/res/delete',
//
updateUrl: '/sys/res/update',
//
showToolbar: true,
editOptions: tableEditOptions
}
/**
*
*/
const tableOptions = {
editOptions: tableEditOptions,
selection: [],
pageSize: 20,
//
title: ' ',
//
permsPrefix: 'res',
//
dataUrl: '/sys/res/list',
//
createUrl: '/sys/res/create',
//
deleteUrl: '/sys/res/delete',
//
updateUrl: '/sys/res/update',
//
param: {},
//
columns: [
{type: 'selection', width: 60, align: 'center'},
{key: 'name', title: ' ', minWidth: 160, maxWidth: 280},
{
key: 'resType',
width: 80,
title: ' ',
// （ （id） value）
enum: [{value: ' ', id: 1, el: 'strong'}, {value: ' ', id: 2}]
},
{key: 'identity', title: ' ', width: 200},
{key: 'url', title: ' Url', minWidth: 200, maxWidth: 400},
{key: 'parentId', title: ' ', width: 160, dataFromTree: true},
{
key: 'icon',
width: 100,
title: ' ',
render: (h, params) => {
const row = params.row
return h('Icon', {
props: {
type: row.icon
}
})
}
},
{key: 'weight', title: ' ', width: 80},
{
key: 'status',
width: 80,
title: ' ',
enum: [' ', ' ']
}
],
//
searchDynamic: [
[
{name: 'name', label: ' ', span: 4, type: 'text'},
{name: 'identity', label: ' ', span: 4, type: 'text'},
{name: 'url', label: 'Url', span: 4, type: 'text'},
{name: 'status', label: ' ', span: 3, type: 'text'},
{
name: 'resType',
type: 'select',
data: [{label: ' ', value: 1}, {label: ' ', value: 2}],
span: 3,
label: ' '
}
]
]
}
import CrudView from 'components/views/CrudView'
export default {
data() {
return {
tableOptions,
treeOptions
}
},
computed: {},
methods: {},
mounted() {
},
components: {CrudView}
}
유연하고 풍부한 동적 양식 구성 요소(FormDynamic)
10가지 폼 구성 요소 지원: 1.input text (단일 입력 상자) 2.input textarea 3.선택 상자 아래로 4.라디오checkbox (다중 선택 상자) 6.트리 선택 7.숫자 입력 상자 8.날짜 선택 9.날짜 시간 선택날짜 시간대 선택이미지 업로드 양식 구성 요소 12.editor(vue-quill-editor 풍부한 텍스트 기반) 13.팝업 선택
코드 예제
import {FormDynamic, PopupEdit, PopupSelect} from 'components/';
let self = null;
const dynamic1 = [
[
{type: 'title', span: 24, text: 'Input'}
],
[
{
name: 'numberData',
type: 'number',
span: 6,
//
min:1,
//
max:80010
label: 'Number'
},
{
name: 'textData',
type: 'text',
span: 6,
label: 'text',
value: 'DefaultValue',
rules: {required: true, type: 'string'}
},
{
name: 'passwordData',
type: 'text',
span: 6,
password: true,
label: 'PasswordText',
rules: {required: true, type: 'string', message: ' '}
},
{
name: 'textarea',
type: 'text',
placeholder: ' ',
span: 6,
label: 'TextareaLabel',
textarea: {minRows: 1, maxRows: 6}
}
], [
{type: 'title', span: 24, text: 'date'}
], [
{name: 'date1', type: 'date', span: 6, label: 'DateLabel'},
{name: 'date2', type: 'datetime', span: 6, label: 'DateTimeLabel'},
{name: 'date3', type: 'datetimerange', span: 6, label: 'Datetimerange'}
],
[
{type: 'title', span: 24, text: 'DataSelect'}
],
[
{
name: 'selectData',
type: 'select',
span: 8,
value: 0,
label: 'SelectLabel',
data: [
{label: ' 1', value: 0}, {label: ' 2', value: 1},
{label: ' 3', value: 2}, {label: ' 4', value: 3}
],
onChange: (val, from, data) => {
alert('onChange');
}
},
{
name: 'selectData2',
type: 'select',
span: 6,
value: 0,
label: 'URLSelectLabel',
// value
valField: 'id',
// label
textField: 'name',
// url
dataUrl: '/sys/dict/get?type=job',
onChange: (val, from, data) => {
alert('onChange');
}
},
{
name: 'selectData3',
type: 'select',
span: 6,
value: 0,
label: 'DictSelectLabel',
//
dict: 'job',
onChange: (val, from, data) => {
alert('onChange');
}
}
], [
{type: 'title', span: 24, text: 'Title'}
], [
{
name: 'radioData',
type: 'radio',
span: 6,
value: 0,
label: 'RadioLabel',
data: [
{label: ' 1', value: 0}, {label: ' 2', value: 1},
{label: ' 3', value: 2}, {label: ' 4', value: 3}
],
onChange: (val, from, data) => {
alert('onChange');
}
},
{
name: 'checkboxData',
type: 'checkbox',
span: 8,
label: 'CheckboxLabel',
data: [
{label: ' 1', value: 0}, {label: ' 2', value: 1},
{label: ' 3', value: 2}, {label: ' 4', value: 3}
],
enableCheckAll: true,
checkAllLabel: ' ',
checkAll: true,
onChange: (val, from, data) => {
alert('onChange');
}
},
{
name: 'deviceTypeId',
type: 'treeSelect',
span: 8,
label: 'TreeSelectLabel',
// CrudView ，select
dataFromTree: true,
textField: 'name',
valField: 'id',
dataUrl: '/sys/res/list',
onChange: (val, from, data) => {
alert('onChange');
}
},
{
name: 'popSelectId',
span:
8,
label:
'PopupSelectLabel',
type:
'popText',
textField:
'popSelectName',
onClick(fromData) {
self.$refs['popSelect'].open((selection) => {
console.log(selection[0].id);
self.$set(fromData, 'popSelectId', selection[0].id);
self.$set(fromData, 'popSelectName', selection[0].username);
})
}
}
],
[
{
name: 'imgData',
// 2
max: 2,
type: 'imgUpload',
span: 24,
label: 'ImgUploadLabel'
},
{name: 'editor', type: 'editor', span: 24, label: 'EditorLabel', placeholder: ' '}
],
[
{
name: 'button', type: 'buttons',
span: 24,
data: [
{
label: 'SetData',
onClick() {
//
self.$refs.dynamic1.setFormData({numberData: 10001, textData: 'SetData'})
}
},
{
label: 'GetFormData',
onClick() {
self.$refs.dynamic1.submit((param) => {
console.log(param);
alert(JSON.stringify(param))
}, (res) => {
//
});
}
},
{
//
label: 'PopupWindow',
onClick() {
self.$refs.popupEdit.open({
title: 'PopupEditWindow',
// url
postUrl: null
}, self.fromData);
}
},
{
label: 'GotoEditPage',
onClick() {
self.editOptions.editSuccess = self.editSuccess;
let action = {
//
title: 'title',
// url
postUrl: ''
}
self.$router.push({
path: self.$router.currentRoute.path + '/edit',
query: {options: self.editOptions, action: action, data: self.fromData}
})
}
}
]
}
]
];
/**
*
*/
const editOptions = {
width: 1200,
labelWidth: 120,
dynamic: dynamic1
};
export default {
data() {
return {
editOptions,
dynamic1,
fromData: {}
}
},
computed: {
//
userPage() {
return import('pages/sys/user');
}
},
methods: {
//
editSuccess(res) {
console.log(res);
}
},
mounted() {
self = this;
},
components: {
FormDynamic, PopupEdit, PopupSelect
}
}
행렬 규칙
[
[{}...],//
[], //
[], //
]
span：24
양식 유효성 검사
rules: {
required: true, //
type: 'number', //
message: ' '//
}
구체적으로 보십시오https://github.com/yiminghe/a...
동적 폼 구성 요소를 기반으로 개발한 다른 구성 요소도 사용할 수 있습니다
1. 팝업 편집 양식(PopupEdit) 2.양식 편집 건너뛰기(edit.vue)
또 뭐 있어요?
트리 편집 레이아웃
PhotoViewer(사진 미리 보기 구성 요소)
DataTree(데이터 트리)
DataSelect(사전 ID를 직접 입력할 수 있는 데이터 드롭다운 상자)
DataTable(데이터 테이블)
CrudTree
CrudTable(첨삭 테이블)
PermsValid(권한 검증)
...
참조 관계
CrudView -> CrudTable -> DataTable -> IView Table
-> PopupEdit -> FormDynamic
-> Edit -> FormDynamic
-> CrudTree -> DataTree -> IView Tree
-> PopupEdit -> FormDynamic
-> Edit -> FormDynamic
백엔드 솔루션
https://github.com/ZhiYiDai/F...(Ffast java) 문서 정리 중...
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[백견불여일타/Vue.js] 4장 - 입력 폼 데이터 가져오기v-model 데이터 입력 select 지난 장에서는 v-bind를 이용해서 HTML 태그 속성 값을 Vue로 다루는 법을 배웠습니다. 이번에는 사용자가 입력한 데이터를 Vue로 가져오는 법에 대해 다룹니다. 웹 페...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
