初始

README.md

@@ -1,3 +1,6 @@
# custom-components
vue自定义组件，基于elementui
vue自定义组件，基于elementui
安装方法
npm i git+http://192.168.1.220:10080/lincl/custom-components.git#master

index.js

@@ -1,9 +1,46 @@
import CustomTable from './src/components/TablePage'
import Tools from './src/utils/tool'
import _Vue from 'vue'
export default function install(Vue){
const components = [
    CustomTable
]
const install = function(Vue){
    if (!Vue) {
        window.Vue = Vue = _Vue
    }
    Vue.component(CustomTable.name, CustomTable)
}
    components.forEach(component => {
        Vue.component(component.name, component);
    });
}
const setDictLoader = function(dictLoad){
    Tools.dictLoad = dictLoad
}
const setUploadUrl = function(url){
    Tools.upload_stream_url = url
}
const setFormatImgUrl = function(func){
    Tools.formatImgUrl = func
}
const setOptions = function(options){
    for(var k in options){
        Tools[k] = options[k]
    }
}
export default {
    version: '1.0.0',
    CustomTable,
    
    install,
    setDictLoader,
    setUploadUrl,
    setFormatImgUrl,
    setOptions
} 

package.json

@@ -12,7 +12,9 @@
  },
  "dependencies": {
    "element-ui": "^2.15.1",
    "vue": "^2.5.11"
    "js-cookie": "^2.2.1",
    "vue": "^2.5.11",
    "vue-i18n": "^8.23.0"
  },
  "browserslist": [
    "> 1%",

src/App.vue

@@ -1,15 +1,17 @@
<template>
  <div id="app">
    <TablePage></TablePage>
    <Form></Form>
  </div>
</template>
<script>
import TablePage from './components/TablePage/example/list1'
import Form from './components/Form/example/index'
export default {
  name: 'app',
  components:{
    TablePage
    TablePage,
    Form
  },
  data () {
    return {

src/components/Dialog/index.vue

@@ -0,0 +1,108 @@
<template>
	<div class="dialog-com">
		<el-dialog 
			v-on="$listeners"
			v-bind="$attrs"
			:close-on-click-modal="closeOnClickModal"
			custom-class="dialog-com-el-dialog">
			<!-- <div > -->
				<el-scrollbar v-loading="loading" :style="oriHeight? ('height:'+ oriHeight) : ''">
					<div class="pr10 pb1"><slot></slot></div>
				</el-scrollbar>
				<div v-if="hasFooter" class="dialog-com-dialog-footer pt10 pr10" >
						<div slot="footer" v-if="!$scopedSlots['footer']">
							<el-button @click="$emit('update:visible', false);">{{cancelButtonText}}</el-button>
							<el-button @click="$emit('onSubmit');" type="primary">{{confirmButtonText}}</el-button>
						</div>
					<div slot="footer" v-else>
						<slot name="footer"></slot>
					</div>
				</div>
			<!-- </div> -->
		</el-dialog>
		
	</div>
</template>
<script>
export default {
	name: 'DialogCom',
	props: {
		'height':{},
		'close-on-click-modal':{
			default: false
		},
		'showConfirmButton': {
			default: true
		},
		'showCancelButton': {
			default: true
		},
		'confirmButtonText': {
			default: '确 定'
		},
		'cancelButtonText': {
			default: '取 消'
		},
		loading: {
			default: false
		}
	},
	computed:{
		hasFooter(){
			return this.showConfirmButton||this.showCancelButton||this.$scopedSlots['footer']
		}
	},
	data(){
		return {
			oriHeight: ''
		}
	},
	created(){
		if(this.height){
			if(typeof this.height == 'number'){
				this.oriHeight = this.height+ 'px'
			} else {
				this.oriHeight = this.height
			}
		}
	},
	mounted() {
		
	},
	methods: {
		
	}
}
</script>
<style lang="scss">
.dialog-com-el-dialog{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%) translateY(-50%);
	margin-top: 0!important;
	// height: calc(100vh - 100px);
	.el-dialog__body{
		padding: 10px 10px 10px 15px;
		// >div{
			// height: calc(100% - 54px);
			>.el-scrollbar{
				// height: calc(100% - 56px);
				.el-scrollbar__wrap{
					overflow-x: hidden;
				}
			}
		// }
	}
	.el-dialog__header{
		padding: 15px;
		padding-bottom: 10px;
	}
	.dialog-com-dialog-footer{
		text-align: right;
		border-top: 1px solid #ccc;
	}
}
</style>

src/components/Form/Upload.vue

@@ -0,0 +1,162 @@
<template>
	<div class="form-com-upload">
		<el-upload
			:file-list="fileList"
			v-bind="configs"
			:action="imgUploadUrl"
			:show-file-list="configs.multiple||false"
			:on-success="afterUploadPic"
			:on-remove="removePic"
			:on-error="onError"
			:on-preview="handlePictureCardPreview"
			:before-upload="beforeUploadPic">
			<div class="avatar-uploader" v-if="!configs.multiple" :class="configs.round? 'avatar-uploader-round' : ''">
				<img v-if="imgList&&imgList.length" :src="setImgUrl(imgList[0])" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</div>
			<i v-else class="el-icon-plus"></i>
		</el-upload>
		<el-dialog :visible.sync="dialogVisible">
			<img width="100%" :src="dialogImageUrl" alt="">
		</el-dialog>
	</div>
</template>
<script>
import {imgCompress} from '@/utils/imgCompress.js'
import Tools from '@/utils/tool'
export default {
	name: 'FormComUpload',
	props: {
		'configs':{},
		value:{},
	},
	
	components:{
		
	},
	computed:{
		
	},
	watch:{
		value:{
			handler(n){
				if(this.isUploaded){
					return
				}
				
				if(!n){
					this.imgList = []
					this.fileList = []
					return
				}
				
				var list = []
				if(typeof n == 'string'){
					this.imgList = [n]
					list.push({
							name: '', url: this.setImgUrl(n)
						})
				} else {
					this.imgList = n
					this.imgList.forEach(v=>{
						list.push({
							name: '', url: this.setImgUrl(v)
						})
					})
				}
				this.fileList = list
			},
			immediate: true,
			deep: true
		}
	},
	data(){
		return {
			imgUploadUrl: Tools.upload_stream_url, // 图片服务器地址
			loading: "",
			imgList: [],
			dialogImageUrl: "",
			dialogVisible: false,
			fileList: [],
			isUploaded: false
		}
	},
	created(){
		
	},
	mounted() {
		
	},
	methods: {
		handlePictureCardPreview(file) {
			if(this.configs.multiple){
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			}
		},
		beforeUploadPic(file) {
            if (file.size / 1024 / 1024 > 20) {
                this.$alert('上传图片不能超过20m', '提示')
                return false
            }
            this.loading = this.$loading({
                background: 'rgba(0, 0, 0, 0)',
                text: '上传中'
            })
            return imgCompress(file, this.loading)
		},
		afterUploadPic(response, file, fileList) {
            if (this.loading) {
                this.loading.close()
			}
			if(this.configs.multiple){
				this.imgList.push(response.obj.fullUri)
				this.$emit('input', this.imgList)
			} else {
				this.imgList = [response.obj.fullUri]
				this.$emit('input', this.imgList[0])
			}
			this.isUploaded = true
		},
		onError(){
			if (this.loading) {
                this.loading.close()
			}
			this.$message.error("上传失败")
		},
		removePic(file, fileList){
			var i = this.imgList.indexOf(file.response.obj.fullUri)
			this.imgList.splice(i, 1)
			console.log(this.imgList)
		},
		setImgUrl(url){
			return (Tools.formatImgUrl&&Tools.formatImgUrl(url)) || url
		}
	}
}
</script>
<style lang="scss">
.form-com-upload{
	line-height: 0;
	.avatar-uploader{
		width: 120px;
		height: 120px;
		display: -webkit-box;
		-webkit-box-align: center;
		-webkit-box-pack: center;
		overflow: hidden;
		border: 1px solid #ccc;
		img{
			width: 100%;
			height: 100%;
			display: block;
		}
		&.avatar-uploader-round{
			border-radius: 50%;
		}
	}
}
</style>

src/components/Form/example/configs.js

@@ -0,0 +1,91 @@
var config = {
    labelWidth: '100px',
    columnNum: 1,//一行几列
    fields: [
        {
            groupTitle: "基本信息",//分组标题
            children: [
                {
                    label: "姓名",
                    id: "name",
                    type: 'text',
                    required: true,
                    regIdcard: true,
                    // readonly: true
                },
                {
                    label: "描述",
                    id: "des",
                    type: 'textarea',
                    rows: 5,
                    placeholder: "ddd",
                    clearable: true
                },
                {
                    label: "出生日期",
                    id: "birthday",
                    type: 'date',
                    clearable: false,
                    rules: [{required: true,trigger: 'blur',message: '该项必填'}, { min: 10, message: `病情描述说明字数不得少于10个字！`, trigger: 'blur' }]
                },
                //待实现
                // {
                //     label: "当前时间",
                //     id: "birthday1",
                //     type: 'datetime',
                // },
                {
                    label: "工作时间",
                    id: "worktime",
                    type: 'daterange',
                },
                {
                    label: "性别",
                    id: "sex",
                    type: 'select',
                    optionList: []
                    // optionList: [
                    //     {label:"男", value: 1},
                    //     {label:"女", value: 2}
                    // ]
                },
                {
                    label: "头像",
                    id: "photo",
                    type: 'photo',
                    // required: true,
                },
                {
                    label: "图片墙",
                    id: "imgList",
                    type: 'photo',
                    // required: true,
                    multiple: true,
                    'list-type':"picture-card"
                }
            ],
        },
        {
            groupTitle: "基本信息2",//分组标题
            children: [{
                label: "姓名2",
                id: "name2",
                type: 'text',
            }],
        },
        // {
        //     label: "姓名",
        //     id: "name",
        //     type: 'text',
        //     placeholder: "aa"
        // },
        // {
        //     label: "手机号码",
        //     id: "mobile",
        //     type: 'text',
        //     placeholder: "aa"
        // }
    ],
}
export {config}

src/components/Form/example/index.vue

@@ -0,0 +1,65 @@
<template>
	<div class="plr50 pt30">
		<Form ref="form" :configs='config'>
			<!-- <div slot="name" slot-scope="scope">gfdgfg</div> -->
			<div slot="footer" class="">
				<el-button >取消</el-button>
				<el-button type="primary" @click="submit()">保存</el-button>
			</div>
		</Form>
	</div>
</template>
<script>
import Form from '../index'
import {config} from './configs'
export default {
	components: {
		Form
	},
	computed:{
		
	},
	data(){
		return {
			activeNames: [],
			form: "",
			config
		}
	},
	created(){
		
	},
	mounted() {
		this.$nextTick(()=>{
			this.$refs.form.setValues({
				name: "aaa",
				sex: 1
			})
		})
		console.log(this.config)
		setTimeout(()=>{
			this.config.fields[0].children[4].optionList = [
				{label:"男", value: 1},
				{label:"女", value: 2}
			]
		}, 1000)
	},
	methods: {
		submit(){
			this.$refs.form.submit().then((valid)=>{
				console.log(valid)
			})
		}
	}
}
</script>
<style scoped lang="scss">
.form-com{
	
}
</style>
<style lang="scss">
</style>

src/components/Form/form.vue

@@ -0,0 +1,145 @@
<template>
	<div>
		<el-row v-for="(v, i) in rows" :gutter="40" :key="i">
			<el-col :span="(item.span||1)/columnNum * 24" v-for="(item, k) in v" :key="k">
				<el-form-item  :label="item.label" :prop="item.id">
					<slot v-if="$scopedSlots[item.id]" :name="item.id" :config="item" />
					<template v-else>
						<el-input v-bind="item" v-if="item.type=='text'||item.type=='number'||item.type=='digit'" v-model="form[item.id]" :placeholder="item.placeholder" clearable/>
						<el-input
							v-bind="item"
							v-if="item.type=='textarea'"
							v-model="form[item.id]">
						</el-input>
						<el-date-picker
							:key="i"
							v-else-if="item.type=='daterange'||item.type=='monthrange'"
							v-model="form[item.id]"
							:start-placeholder="item.label+ '起'"
							:end-placeholder="item.label+ '至'"
							align="right"
							unlink-panels
							:value-format="item.format||(item.type=='monthrange'? 'yyyy-MM' : 'yyyy-MM-dd' )"
							range-separator="至"
							:picker-options="item.pickerOptions || pickerOptions"
							v-bind="item"
							>
						</el-date-picker>
						<el-date-picker
							v-bind="item"
							clearable
							:key="i"
							v-else-if="item.type=='date'||item.type=='year'||item.type=='month'||item.type=='week'||item.type=='dates'"
							v-model="form[item.id]"
							:value-format="item.format||(item.type=='year'? 'yyyy' : item.type=='month'? 'yyyy-MM' : 'yyyy-MM-dd' )"
							>
						</el-date-picker>
						<!-- <el-date-picker
							clearable
							v-else-if="type=='datetime'"
							:key="i"
							v-model="form[item.id]"
							type="datetime"
							:placeholder="item.placeholder">
						</el-date-picker> -->
						<el-select 
							v-else-if="item.type=='select'"
							:key="i"
							v-model="form[item.id]"
							clearable 
							v-bind="item"
							>
							<el-option
								v-for="opt in item.optionList"
								:key="opt.value"
								:label="opt.label"
								:value="opt.value">
							</el-option>
						</el-select>
						<Upload
							:configs="item"
							v-else-if="item.type=='photo'"
							v-model="form[item.id]">
						</Upload>
						<template v-else-if="item.type=='radio'">
							<el-radio 
								v-for="opt in item.optionList" 
								:key="opt.value" 
								v-model="form[item.id]" 
								:label="opt.value">{{opt.label}}</el-radio>
						</template>
						<el-input-number v-else-if="item.type=='inputNumber'" v-model="form[item.id]" :controls-position="item.controlsPosition||''" :placeholder="item.placeholder" :min="item.min||''" :max="item.max"></el-input-number>
					</template>
				</el-form-item>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import Upload from './Upload'
import {pickerOptions} from '../js/common'
import Tools from '@/utils/tool'
export default {
	props: {
		fields: {},
		columnNum: {},
		form: {},
	},
	components:{
		Upload
	},
	computed:{
		
	},
	data(){
		return {
			rows: "",
			pickerOptions,
		}
	},
	created(){
		var rows = [], count = 0, temp = []
		this.fields.forEach((v, i) => {
			count += (v.span || 1)
			if(count > this.columnNum){
				rows.push(temp)
				temp = [v]
				count = v.span
			} else {
				temp.push(v)
			}
			this.loadDict(v)
		});
		rows.push(temp)
		this.rows = rows
	},
	mounted() {
		
	},
	methods: {
		loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
			})
		},
	}
}
</script>
<style scoped lang="scss">
.form-com{
	.el-form-item{
		width: auto;
		/deep/ .el-form-item__content{
			text-align: left;
		}
	}
}
</style>

src/components/Form/index.vue

@@ -0,0 +1,186 @@
<template>
	<div class="form-com">
		<el-form ref="form" :rules="rules" :model="form" :label-width="configs.labelWidth||'80px'" :label-position="configs.labelPosition||'right'">
			<el-collapse v-if="isGroup" v-model="activeNames">
				<el-collapse-item v-for="(item, i) in configs.fields" :key="i" :title="item.groupTitle" :name="i">
					<Form :form.sync="form" :fields.sync="item.children" :columnNum="configs.columnNum">
						<template v-for="(item, i) in $scopedSlots" :slot="i" slot-scope="scope">
							<!-- <template v-if="hasSlot(item.children, i)" > -->
							<slot :name="i" :scope="scope"/>
							<!-- </template> -->
						</template>
					</Form>
				</el-collapse-item>
			</el-collapse>
			<template v-else>
				<Form :form.sync="form" :fields.sync="configs.fields" :columnNum="configs.columnNum">
					<template v-for="(item, i) in $scopedSlots" :slot="i" slot-scope="scope">
						<!-- <template v-if="hasSlot(item.children, i)" > -->
						<slot :name="i" :scope="scope"/>
						<!-- </template> -->
					</template>
				</Form>
			</template>
		</el-form>
		<div class="pt50 tc">
			<slot name="footer"></slot>
		</div>
		<!-- <div class="tc pt50">
			<el-button >取消</el-button>
        	<el-button type="primary" @click="submit()">保存</el-button>
		</div> -->
	</div>
</template>
<script>
import Form from './form'
import {isIdcard} from '@/utils/validate'
import validateForm from '@/utils/validateForm'
var validateMobile = (rule, value, callback) => {
    if(!(/^1[3456789]\d{9}$/.test(value))){
        return callback(new Error('号码有误，请重填'));
    } 
    return callback()
};
var validateIdCard = (rule, value, callback) => {
	if(!value){
		return callback();
	}
	var idcard = value
	var idcardLen = idcard.length,
		xchar = idcard.charAt(idcardLen-1);
	if (xchar === 'x') {
		idcard = idcard.substr(0, idcardLen-1) + 'X';
	}
	if(!isIdcard(idcard)){
		return callback(new Error('号码有误，请重填'));
	}
	return callback() 
};
export default {
	name: 'FormCom',
	props: {
		'configs':{},
	},
	components:{
		Form
	},
	computed:{
		isGroup(){
			return !!this.configs.fields[0].groupTitle
		}
	},
	data(){
		return {
			activeNames: [],
			form: "",
			rules: ""
		}
	},
	created(){
		if(this.isGroup){
			var activeNames = []
			this.configs.fields.forEach((v, i) => {
				activeNames.push(i)
			});
			this.activeNames = activeNames
		}
		var form = {}
		var rules = {}
		this.configs.fields.forEach((v, i) => {
			if(v.groupTitle){
				v.children.forEach((m, n)=>{
					form[m.id] = m.value||m.value===0||m.value===false? m.value : ""
					rules[m.id] = this.setRule(m)
				})
			} else {
				form[v.id] = v.value||v.value===0||v.value===false? v.value : ""
				rules[v.id] = this.setRule(v)
			}
		});
		this.form = form
		this.rules = rules
		console.log(this.rules)
	},
	mounted() {
		
	},
	methods: {
		setRule(item){
			if(item.rules){
				return item.rules
			}
			var r = []
			if(item.required){
				r.push({
					required: true,
					message: "该项必填",
					trigger: "blur"
				})
			}
			if(item.regTel){
				//手机号码
				r.push({
					validator: validateMobile, 
					trigger: 'blur'
				})
			}
			if(item.regIdcard){
				//身份证
				r.push({
					validator: validateIdCard, 
					trigger: 'blur'
				})
			}
			if(item.type == 'digit'){
				r.push({
					validator: validateForm['digit'], 
					trigger: 'blur'
				})
			}
			if(item.regularType && validateForm[item.regularType]){
				r.push({
					validator: validateForm[item.regularType], 
					trigger: 'blur'
				})
			}
			return r
		},
		submit() {
			var vm = this;
			return new Promise((resolve, reject)=>{
				this.$refs['form'].validate(valid => {
					if(valid){
						resolve(this.form)
					} else {
						resolve(valid)
					}
				});
			})
		},
		setValues(model){
			for(var k in this.form){
				this.form[k] = model[k]
			}
		},
		hasSlot(list, key){
			for(var i=0; i<list.length; i++){
				if(list[i].id == key){
					return true
				}
			}
			return false
		}
	}
}
</script>
<style lang="scss">
.form-com{
	.el-collapse-item__content{
		padding-bottom: 0;
		padding-top: 10px;
	}
}
</style>

src/components/TablePage/index.vue

@@ -109,7 +109,7 @@
</template>
<script>
// import dictLoad from '../js/dictLoader'
import Tools from '@/utils/tool'
export default {
	name: 'CustomTable',
	props: ['totalCount', 'configs', 'loading'],
@@ -166,7 +166,10 @@ export default {
			if(!item.optionListLoadConfig){
				return
			}
			dictLoad(item.optionListLoadConfig).then(res=>{
			if(!Tools.dictLoad){
				return
			}
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
			})
		},

src/lang/en.js

@@ -0,0 +1,166 @@
export default {
	route: {
		home: "Home",
		dashboard: "Dashboard",
		introduction: "Introduction",
		documentation: "Documentation",
		guide: "Guide",
		permission: "Permission",
		pagePermission: "Page Permission",
		directivePermission: "Directive Permission",
		icons: "Icons",
		components: "Components",
		componentIndex: "Introduction",
		tinymce: "Tinymce",
		markdown: "Markdown",
		jsonEditor: "JSON Editor",
		dndList: "Dnd List",
		splitPane: "SplitPane",
		avatarUpload: "Avatar Upload",
		dropzone: "Dropzone",
		sticky: "Sticky",
		countTo: "CountTo",
		componentMixin: "Mixin",
		backToTop: "BackToTop",
		dragDialog: "Drag Dialog",
		dragKanban: "Drag Kanban",
		charts: "Charts",
		keyboardChart: "Keyboard Chart",
		lineChart: "Line Chart",
		mixChart: "Mix Chart",
		example: "Example",
		nested: "Nested Routes",
		menu1: "Menu 1",
		"menu1-1": "Menu 1-1",
		"menu1-2": "Menu 1-2",
		"menu1-2-1": "Menu 1-2-1",
		"menu1-2-2": "Menu 1-2-2",
		"menu1-3": "Menu 1-3",
		menu2: "Menu 2",
		Table: "Table",
		dynamicTable: "Dynamic Table",
		dragTable: "Drag Table",
		inlineEditTable: "Inline Edit",
		complexTable: "Complex Table",
		treeTable: "Tree Table",
		customTreeTable: "Custom TreeTable",
		tab: "Tab",
		form: "Form",
		createArticle: "Create Article",
		editArticle: "Edit Article",
		articleList: "Article List",
		errorPages: "Error Pages",
		page401: "401",
		page404: "404",
		errorLog: "Error Log",
		excel: "Excel",
		exportExcel: "Export Excel",
		selectExcel: "Export Selected",
		uploadExcel: "Upload Excel",
		zip: "Zip",
		exportZip: "Export Zip",
		theme: "Theme",
		clipboardDemo: "Clipboard",
		i18n: "I18n",
		externalLink: "External Link"
	},
	navbar: {
		logOut: "Log Out",
		dashboard: "Dashboard",
		github: "Github",
		screenfull: "Screenfull",
		theme: "Theme",
		size: "Global Size"
	},
	login: {
		title: "Login Form",
		logIn: "Log in",
		username: "Username",
		password: "Password",
		any: "any",
		thirdparty: "Or connect with",
		thirdpartyTips:
			"Can not be simulated on local, so please combine you own business simulation! ! !"
	},
	documentation: {
		documentation: "Documentation",
		github: "Github Repository"
	},
	permission: {
		roles: "Your roles",
		switchRoles: "Switch roles"
	},
	guide: {
		description:
			"The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ",
		button: "Show Guide"
	},
	components: {
		documentation: "Documentation",
		tinymceTips:
			"Rich text editor is a core part of management system, but at the same time is a place with lots of problems. In the process of selecting rich texts, I also walked a lot of detours. The common rich text editors in the market are basically used, and the finally chose Tinymce. See documentation for more detailed rich text editor comparisons and introductions.",
		dropzoneTips:
			"Because my business has special needs, and has to upload images to qiniu, so instead of a third party, I chose encapsulate it by myself. It is very simple, you can see the detail code in @/components/Dropzone.",
		stickyTips:
			"when the page is scrolled to the preset position will be sticky on the top.",
		backToTopTips1:
			"When the page is scrolled to the specified position, the Back to Top button appears in the lower right corner",
		backToTopTips2:
			"You can customize the style of the button, show / hide, height of appearance, height of the return. If you need a text prompt, you can use element-ui el-tooltip elements externally",
		imageUploadTips:
			"Since I was using only the vue@1 version, and it is not compatible with mockjs at the moment, I modified it myself, and if you are going to use it, it is better to use official version."
	},
	table: {
		dynamicTips1: "Fixed header, sorted by header order",
		dynamicTips2: "Not fixed header, sorted by click order",
		dragTips1: "The default order",
		dragTips2: "The after dragging order",
		title: "Title",
		importance: "Imp",
		type: "Type",
		remark: "Remark",
		search: "Search",
		add: "Add",
		export: "Export",
		reviewer: "reviewer",
		id: "ID",
		date: "Date",
		author: "Author",
		readings: "Readings",
		status: "Status",
		actions: "Actions",
		edit: "Edit",
		publish: "Publish",
		draft: "Draft",
		delete: "Delete",
		cancel: "Cancel",
		confirm: "Confirm"
	},
	errorLog: {
		tips: "Please click the bug icon in the upper right corner",
		description:
			"Now the management system are basically the form of the spa, it enhances the user experience, but it also increases the possibility of page problems, a small negligence may lead to the entire page deadlock. Fortunately Vue provides a way to catch handling exceptions, where you can handle errors or report exceptions.",
		documentation: "Document introduction"
	},
	excel: {
		export: "Export",
		selectedExport: "Export Selected Items",
		placeholder: "Please enter the file name(default excel-list)"
	},
	zip: {
		export: "Export",
		placeholder: "Please enter the file name(default file)"
	},
	theme: {
		change: "Change Theme",
		documentation: "Theme documentation",
		tips:
			"Tips: It is different from the theme-pick on the navbar is two different skinning methods, each with different application scenarios. Refer to the documentation for details."
	},
	tagsView: {
		refresh: "Refresh",
		close: "Close",
		closeOthers: "Close Others",
		closeAll: "Close All"
	}
};

src/lang/index.js

@@ -0,0 +1,30 @@
import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import elementEnLocale from "element-ui/lib/locale/lang/en"; // element-ui lang
import elementZhLocale from "element-ui/lib/locale/lang/zh-CN"; // element-ui lang
import enLocale from "./en";
import zhLocale from "./zh";
Vue.use(VueI18n);
const messages = {
	en: {
		...enLocale,
		...elementEnLocale
	},
	zh: {
		...zhLocale,
		...elementZhLocale
	}
};
const i18n = new VueI18n({
	// set locale
	// options: en or zh
	locale: Cookies.get("language") || "en",
	// set locale messages
	messages
});
export default i18n;

src/lang/zh.js

@@ -0,0 +1,186 @@
export default {
	route: {
		home: "首页",
		dashboard: "首页",
		introduction: "简述",
		documentation: "文档",
		guide: "引导页",
		permission: "权限测试页",
		pagePermission: "页面权限",
		directivePermission: "指令权限",
		icons: "图标",
		components: "组件",
		componentIndex: "介绍",
		tinymce: "富文本编辑器",
		markdown: "Markdown",
		jsonEditor: "JSON编辑器",
		dndList: "列表拖拽",
		splitPane: "Splitpane",
		avatarUpload: "头像上传",
		dropzone: "Dropzone",
		sticky: "Sticky",
		countTo: "CountTo",
		componentMixin: "小组件",
		backToTop: "返回顶部",
		dragDialog: "拖拽 Dialog",
		dragKanban: "可拖拽看板",
		charts: "图表",
		keyboardChart: "键盘图表",
		lineChart: "折线图",
		mixChart: "混合图表",
		example: "综合实例",
		nested: "路由嵌套",
		menu1: "菜单1",
		"menu1-1": "菜单1-1",
		"menu1-2": "菜单1-2",
		"menu1-2-1": "菜单1-2-1",
		"menu1-2-2": "菜单1-2-2",
		"menu1-3": "菜单1-3",
		menu2: "菜单2",
		Table: "Table",
		dynamicTable: "动态Table",
		dragTable: "拖拽Table",
		inlineEditTable: "Table内编辑",
		complexTable: "综合Table",
		treeTable: "树形表格",
		customTreeTable: "自定义树表",
		tab: "Tab",
		form: "表单",
		createArticle: "创建文章",
		editArticle: "编辑文章",
		articleList: "文章列表",
		errorPages: "错误页面",
		page401: "401",
		page404: "404",
		errorLog: "错误日志",
		excel: "Excel",
		exportExcel: "Export Excel",
		selectExcel: "Export Selected",
		uploadExcel: "Upload Excel",
		zip: "Zip",
		exportZip: "Export Zip",
		theme: "换肤",
		clipboardDemo: "Clipboard",
		i18n: "国际化",
		externalLink: "外链"
	},
	navbar: {
		logOut: "退出登录",
		dashboard: "首页",
		github: "项目地址",
		screenfull: "全屏",
		theme: "换肤",
		size: "布局大小"
	},
	login: {
		title: "系统登录",
		logIn: "登录",
		username: "请输入手机号码",
		password: "初始密码为手机号后六位",
		any: "随便填",
		thirdparty: "第三方登录",
		thirdpartyTips: "本地不能模拟，请结合自己业务进行模拟！！！",
		loginSuccess: "登录成功",
		loginFail: "登录失败"
	},
	register: {
		tenant: "注册租户"
	},
	documentation: {
		documentation: "文档",
		github: "Github 地址"
	},
	permission: {
		roles: "你的权限",
		switchRoles: "切换权限"
	},
	guide: {
		description:
			"引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于",
		button: "打开引导"
	},
	components: {
		documentation: "文档",
		tinymceTips:
			"富文本是管理后台一个核心的功能，但同时又是一个有很多坑的地方。在选择富文本的过程中我也走了不少的弯路，市面上常见的富文本都基本用过了，最终权衡了一下选择了Tinymce。更详细的富文本比较和介绍见",
		dropzoneTips:
			"由于我司业务有特殊需求，而且要传七牛 所以没用第三方，选择了自己封装。代码非常的简单，具体代码你可以在这里看到 @/components/Dropzone",
		stickyTips: "当页面滚动到预设的位置会吸附在顶部",
		backToTopTips1: "页面滚动到指定位置会在右下角出现返回顶部按钮",
		backToTopTips2:
			"可自定义按钮的样式、show/hide、出现的高度、返回的位置 如需文字提示，可在外部使用Element的el-tooltip元素",
		imageUploadTips:
			"由于我在使用时它只有vue@1版本，而且和mockjs不兼容，所以自己改造了一下，如果大家要使用的话，优先还是使用官方版本。"
	},
	table: {
		dynamicTips1: "固定表头, 按照表头顺序排序",
		dynamicTips2: "不固定表头, 按照点击顺序排序",
		dragTips1: "默认顺序",
		dragTips2: "拖拽后顺序",
		title: "标题",
		importance: "重要性",
		type: "类型",
		remark: "点评",
		search: "搜索",
		add: "添加",
		export: "导出",
		reviewer: "审核人",
		id: "序号",
		date: "时间",
		author: "作者",
		readings: "阅读数",
		status: "状态",
		actions: "操作",
		edit: "编辑",
		publish: "发布",
		draft: "草稿",
		delete: "删除",
		cancel: "取 消",
		confirm: "确 定"
	},
	errorLog: {
		tips: "请点击右上角bug小图标",
		description:
			"现在的管理后台基本都是spa的形式了，它增强了用户体验，但同时也会增加页面出问题的可能性，可能一个小小的疏忽就导致整个页面的死锁。好在 Vue 官网提供了一个方法来捕获处理异常，你可以在其中进行错误处理或者异常上报。",
		documentation: "文档介绍"
	},
	excel: {
		export: "导出",
		selectedExport: "导出已选择项",
		placeholder: "请输入文件名(默认excel-list)"
	},
	zip: {
		export: "导出",
		placeholder: "请输入文件名(默认file)"
	},
	theme: {
		change: "换肤",
		documentation: "换肤文档",
		tips:
			"Tips: 它区别于 navbar 上的 theme-pick, 是两种不同的换肤方法，各自有不同的应用场景，具体请参考文档。"
	},
	tagsView: {
		refresh: "刷新",
		close: "关闭",
		closeOthers: "关闭其它",
		closeAll: "关闭所有"
    },
    btn: {
        
    },
	input: {
		telephone: "手机号",
		password: "密码",
		email: "邮箱地址",
		adminName: "管理员姓名",
		orgCode: "机构代码",
        tenantName: "租户名称",
        idCard: "身份证号"
	},
	valid: {
		inputCorrect: "请输入正确的{0}",
		inputChartsLengthBetween: "请输入{0}~{1}个字符",
		required: "{0}不能为空",
		formatError: "{0}格式不正确"
	}
};

src/utils/imgCompress.js

@@ -0,0 +1,111 @@
import { Message } from 'element-ui';
//将base64码转化为file（Blob）
//此处函数对压缩后的base64经过处理返回{size: "", type: ""} 
function convertBase64UrlToBlob(urlData){
    var arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while(n--){
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], {type:mime});
}
function closeLoading($loading){
    $loading&&$loading.close()
}
export function imgCompress(file, $loading) {
    //判断是否为图片文件
    return new Promise(
        function(resolve, reject){
            if (file.type.indexOf('image') == -1) {
                Message({
                    message: '请选择图片',
                    type: 'warning'
                })
                closeLoading($loading)
                reject("-1")
            } else {
                let reader = new FileReader();
                let image = new Image();
                reader.readAsDataURL(file);
                reader.onload = function () {
                    file.src = this.result;
                    image.onload = function(){
                        let width = image.width;
                        let height = image.height;
                        file.width = width;
                        file.height = height;
                    };
                    image.onerror = function(){
                        Message({
                            message: '图片加载失败',
                            type: 'error'
                        })
                        closeLoading($loading)
                        reject(-2)
                    }
                    image.src= file.src; //页面上显示所选择的图片
                    if(file.size/1024 > 1025){//判断图片的大小，超过1M 进行压缩
                        compress(file, {quality: 0.2})
                        .then(function(v){
                            file = new File([v], file.name)
                            resolve(file)
                        })
                        .catch(function(data){
                            closeLoading($loading)
                            reject(data)
                        })
                    } else {
                        resolve(file)
                    }
                }
            }
        }
    )
}
function compress(path, obj){//path是指上传的图片，obj是压缩的品质，越低越模糊
    return new Promise(function(resolve, reject){
        var img = new Image();
        img.src = path.src;
        img.onload = function(){
            var that = this;  //这里的this 是把img的对象指向改变为that 
            // 默认按比例压缩
            var w = that.width,
                h = that.height,
                scale = w / h;
            w = obj.width || w;
            h = obj.height || (w / scale);
            var quality = 0.7;  // 默认图片质量为0.7
            //生成canvas
            var canvas = document.createElement('canvas');
            var ctx = canvas.getContext('2d');
            // 创建属性节点
            var anw = document.createAttribute("width");
            anw.nodeValue = w;
            var anh = document.createAttribute("height");
            anh.nodeValue = h;
            canvas.setAttributeNode(anw);
            canvas.setAttributeNode(anh);
            ctx.fillStyle = "#fff";
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            ctx.drawImage(that, 0, 0, w, h);
            // 图像质量
            if(obj.quality && obj.quality <= 1 && obj.quality > 0){
                quality = obj.quality;
            }
            // quality值越小，所绘制出的图像越模糊
            var base64 = canvas.toDataURL('image/jpeg', quality);
            // 回调函数返回base64的值
            var urlFile = convertBase64UrlToBlob(base64) //这个地方的处理是为了把压缩的base64转化为对象，获得压缩后图片的大小size，方便对压缩后的图片再次进行判断；
            resolve(urlFile) 
        }
        img.onerror = function(){
            Message({
                message: '图片加载失败',
                type: 'error'
            })
            reject(-2)
        }
    })
}

src/utils/tool.js

@@ -0,0 +1,6 @@
let tools = {
    dictLoad: "",
    upload_stream_url: "",
    formatImgUrl: ""
}
export default tools

src/utils/validate.js

@@ -0,0 +1,132 @@
/**
 * Created by PanJiaChen on 16/11/18.
 */
/**
 * @param {string} path
 * @returns {Boolean}
 */
export function isExternal(path) {
  return /^(https?:|mailto:|tel:)/.test(path)
}
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUsername(str) {
  const valid_map = ['admin', 'editor']
  return valid_map.indexOf(str.trim()) >= 0
}
/**
 * @param {string} url
 * @returns {Boolean}
 */
export function validURL(url) {
  const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
  return reg.test(url)
}
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validLowerCase(str) {
  const reg = /^[a-z]+$/
  return reg.test(str)
}
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validUpperCase(str) {
  const reg = /^[A-Z]+$/
  return reg.test(str)
}
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function validAlphabets(str) {
  const reg = /^[A-Za-z]+$/
  return reg.test(str)
}
/**
 * @param {string} email
 * @returns {Boolean}
 */
export function validEmail(email) {
  const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
  return reg.test(email)
}
/**
 * @param {string} str
 * @returns {Boolean}
 */
export function isString(str) {
  if (typeof str === 'string' || str instanceof String) {
    return true
  }
  return false
}
/**
 * @param {Array} arg
 * @returns {Boolean}
 */
export function isArray(arg) {
  if (typeof Array.isArray === 'undefined') {
    return Object.prototype.toString.call(arg) === '[object Array]'
  }
  return Array.isArray(arg)
}
function isDate(v,dateFormat){
	var MONTH = "MM";
    var DAY = "dd";
    var YEAR = "yyyy";
    var regex = '^'+ dateFormat.replace(YEAR,'\\d{4}').replace(MONTH,'\\d{2}').replace(DAY,'\\d{2}')+'$';
    if(!new RegExp(regex).test(v)) return false;
    var year = v.substr(dateFormat.indexOf(YEAR),4);
    var month = v.substr(dateFormat.indexOf(MONTH),2);
    var day = v.substr(dateFormat.indexOf(DAY),2);
    var d = new Date(format('%s/%s/%s',[year,month,day]));
    return ( parseInt(month, 10) == (1+d.getMonth()) ) &&
        (parseInt(day, 10) == d.getDate()) &&
        (parseInt(year, 10) == d.getFullYear() );
}
function format(str,args) {
  args = args || [];
  var result = str;
  for (var i = 0; i < args.length; i++){
      result = result.replace(/%s/, args[i]);
  }
  return result;
} 
export function isIdcard(v){
  if(!(/^\d{17}(\d|x)$/i.test(v) || /^\d{15}$/i.test(v))) return false;
  var provinceCode = parseInt(v.substr(0,2));
  if((provinceCode < 11) || (provinceCode > 91)) return false;
  var forTestDate = v.length == 18 ? v : v.substr(0,6)+"19"+v.substr(6,15);
  var birthday = forTestDate.substr(6,8);
  if(!isDate(birthday,'yyyyMMdd')) return false;
  if(v.length == 18) {
      v = v.replace(/x$/i,"a");
      var verifyCode = 0;
      for(var i = 17;i >= 0;i--)
          verifyCode += (Math.pow(2,i) % 11) * parseInt(v.charAt(17 - i),11);
      if(verifyCode % 11 != 1) return false;
  }
  return true;
}

src/utils/validateForm.js

@@ -0,0 +1,156 @@
import i18n from '@/lang'
const $t = function() {
  return i18n.t.apply(i18n, arguments)
}
// console.log(i18n.t("valid.required"))
const validateForm = {
  // 手机验证 （element Form规则)
  mobile: (rule, value, callback) => {
    if (!value) {
      callback(new Error($t('valid.required', [$t('input.telephone')])))
    }
    var reg = /^[1][0-9][0-9]{9}$/
    if (value.length < 11 || !reg.test(value)) {
      callback(
        new Error($t('valid.formatError', [$t('input.telephone')]))
      )
    }
    callback()
  },
  getJiaMi: function(str) {
    if (!str || str.length <= 6) return
    var str1 = str.substring(0, 3)
    var str2 = str.substring(str.length - 3, str.length)
    var strbu = ''
    var n = str.length - 6
    for (var c = 0; c < n; c++) {
      strbu += '*'
    }
    return str1 + strbu + str2
  },
  // 手机验证 （element Form规则)
  email: (rule, value, callback) => {
    if (!value) {
      callback(new Error($t('valid.required', [$t('input.email')])))
    }
    var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/
    if (!reg.test(value)) {
      callback(new Error($t('valid.formatError', [$t('input.email')])))
    }
    callback()
  },
  // 校验重名 (仕杰风格) (status==-10000表示存在)
  isExist: (api, paramsKey, mes, requireMes) => { // @api：接口  @paramsKey：参数字段 @mes:存在提示信息  @requireMes:未输入提示信息
    return (rule, value, callback) => {
      if (!value) {
        callback(new Error(`请输入${requireMes}`))
        return
      }
      var params = {
        [paramsKey]: value
      }
      api(params).then(res => {
        callback()
      }).catch(err => {
        if (err.status == -10000) {
          callback(new Error(mes))
        } else {
          callback()
        }
      })
    }
  },
  // 校验重名  (桃红风格)(message=available代表可用，message=inavailable代表不可用
  isExist2: (api, paramsKey, mes, requireMes) => { // @api：接口  @paramsKey：参数字段 @mes:存在提示信息  @requireMes:未输入提示信息
    return (rule, value, callback) => {
      if (!value) {
        callback(new Error(`请输入${requireMes}`))
        return
      }
      var params = {
        [paramsKey]: value
      }
      api(params).then(res => {
        if (res.message == 'available') {
          callback()
        } else if (res.message == 'inavailable') {
          callback(new Error(mes))
        }
      }).catch(err => {
        callback()
      })
    }
  },
  // 校验重名  (桃红风格)(message=available代表可用，message=inavailable代表不可用
  isExist3: (api, paramsKey, mes, requireMes, saasId) => { // @api：接口  @paramsKey：参数字段 @mes:存在提示信息  @requireMes:未输入提示信息
    return (rule, value, callback) => {
      if (!value) {
        callback(new Error(`请输入${requireMes}`))
        return
      }
      var params = {
        [paramsKey]: value,
        saasId: saasId
      }
      api(params).then(res => {
        if (res.message == 'available') {
          callback()
        } else if (res.message == 'inavailable') {
          callback(new Error(mes))
        }
      }).catch(err => {
        callback()
      })
    }
  },
  // 校验重名  (逸祥风格)(obj=false代表可用，obj=true代表不可用
  isExist4: (api, paramsKey, mes, requireMes) => { // @api：接口  @paramsKey：参数字段 @mes:存在提示信息  @requireMes:未输入提示信息
    return (rule, value, callback) => {
      if (!value) {
        callback(new Error(`请输入${requireMes}`))
        return
      }
      var params = {
        [paramsKey]: value
      }
      api(params).then(res => {
        if (!res.obj) {
          callback()
        } else if (res.obj) {
          callback(new Error(mes))
        }
      }).catch(err => {
        callback()
      })
    }
  },
  idCard: (rule, value, callback) => {
    const reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
    if (!value) {
      callback(new Error($t('valid.required', [$t('input.idCard')])))
    }
    if (!reg.test(value)) {
      callback(new Error($t('valid.formatError', [$t('input.idCard')])))
    }
    callback()
  },
  chinese: (rule, value, callback) => {
    const reg = /^[\u0391-\uFFE5]+$/
    if (!reg.test(value)) {
      callback(new Error($t('valid.formatError')))
    }
    callback(rule, value, callback)
  },
  numberAndLetter: () => {
    const reg = /^[0-9a-zA-Z]*$/
    if (!reg.test(value)) {
      callback(new Error($t('valid.formatError')))
    }
    callback()
  }
}
export default validateForm

webpack.config.js

@@ -1,5 +1,8 @@
var path = require('path')
var webpack = require('webpack')
function resolve(dir) {
  return path.join(__dirname, dir)
}
const NODE_ENV = process.env.NODE_ENV
module.exports = {
  entry: NODE_ENV=='development'? './src/main.js' : './index.js',
@@ -75,7 +78,8 @@ module.exports = {
  },
  resolve: {
    alias: {
      'vue$': 'vue/dist/vue.esm.js'
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    },
    extensions: ['*', '.js', '.vue', '.json']
  },

yarn.lock

@@ -3210,6 +3210,11 @@ js-base64@^2.1.8, js-base64@^2.1.9:
  resolved "https://registry.npm.taobao.org/js-base64/download/js-base64-2.6.4.tgz#f4e686c5de1ea1f867dbcad3d46d969428df98c4"
  integrity sha1-9OaGxd4eofhn28rT1G2WlCjfmMQ=
js-cookie@^2.2.1:
  version "2.2.1"
  resolved "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
  integrity sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg=
"js-tokens@^3.0.0 || ^4.0.0":
  version "4.0.0"
  resolved "https://registry.npm.taobao.org/js-tokens/download/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499"
@@ -5801,6 +5806,11 @@ vue-hot-reload-api@^2.2.0:
  resolved "https://registry.npm.taobao.org/vue-hot-reload-api/download/vue-hot-reload-api-2.3.4.tgz#532955cc1eb208a3d990b3a9f9a70574657e08f2"
  integrity sha1-UylVzB6yCKPZkLOp+acFdGV+CPI=
vue-i18n@^8.23.0:
  version "8.23.0"
  resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-8.23.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-i18n%2Fdownload%2Fvue-i18n-8.23.0.tgz#4a65681a1dfe716d47e1d00ddbd6e0b88ea36735"
  integrity sha1-SmVoGh3+cW1H4dAN29bguI6jZzU=
vue-loader@^13.0.5:
  version "13.7.3"
  resolved "https://registry.npm.taobao.org/vue-loader/download/vue-loader-13.7.3.tgz#e07440f78230a639d00ada4da7b96d0e9d62037f"