bug

index.js

@@ -5,6 +5,7 @@ import CustomList from './src/components/List'
import CustomListItem from './src/components/ListItem'
import NoData from './src/components/NoData'
import Tools from './src/utils/tool'
import _Vue from 'vue'
const components = [
@@ -25,6 +26,10 @@ const install = function(Vue){
    });
}
const setDictLoader = function(dictLoad){
    Tools.dictLoad = dictLoad
}
export default {
    version: '1.0.0',
    BotFloatButton,
@@ -34,5 +39,6 @@ export default {
    CustomListItem,
    NoData,
    
    install
    install,
    setDictLoader
} 

package.json

@@ -11,8 +11,10 @@
    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
  },
  "dependencies": {
    "js-cookie": "^2.2.1",
    "vant": "^2.12.15",
    "vue": "^2.5.11"
    "vue": "^2.5.11",
    "vue-i18n": "^8.24.4"
  },
  "browserslist": [
    "> 1%",

src/App.vue

@@ -4,11 +4,13 @@
<script>
import BotFloatButton from './components/BotFloatButton'
import Form from './components/Form'
export default {
  name: 'App',
  components: {
    BotFloatButton
    BotFloatButton,
    Form
  }
}
</script>

src/components/Form/index.vue

@@ -69,8 +69,8 @@
</template>
<script>
import validateForm from '@/utils/validateForm'
import dictLoad from '@/utils/dictLoader'
import Tools from '../../utils/tool'
import validateForm from '../../utils/validateForm'
var messageObj = {
    'mobile': '请输入正确的号码',
    'idCard': '请输入正确的身份证号码',
@@ -163,8 +163,12 @@ export default {
        loadDict(item){
			if(!item.optionListLoadConfig){
				return
			}
			dictLoad(item.optionListLoadConfig).then(res=>{
            }
            if(!Tools.dictLoad){
                console.error('请先设置字典加载器')
                return
            }
			Tools.dictLoad(item.optionListLoadConfig).then(res=>{
				item.optionList = res
			})
		},

src/components/List/css/index.scss

@@ -30,7 +30,7 @@
        }
    }
}
.mainNobotHasTop{
.has-top{
    .custom-list{
        height: calc(100vh - 45px);
        .search{

src/components/List/index.vue

@@ -77,17 +77,7 @@ export default {
        }
    },
    created(){
        console.log('filterConfigs', this.filterConfigs)
        // if(this.filterConfigs){
        //     var filterList = []
        //     this.filterConfigs.forEach(v => {
        //         filterList.push({
        //             value: v.value||'',
        //             options: []
        //         })
        //     });
        //     this.filterList = filterList
        // }
        
    },
    mounted() {
        

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,26 @@
import Vue from "vue";
import VueI18n from "vue-i18n";
import Cookies from "js-cookie";
import enLocale from "./en";
import zhLocale from "./zh";
Vue.use(VueI18n);
const messages = {
	en: {
		...enLocale,
	},
	zh: {
		...zhLocale,
	}
};
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/tool.js

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

src/utils/validateForm.js

@@ -0,0 +1,77 @@
// import request from "@/utils/request";
import i18n from "@/lang";
import _ from "lodash"
const $t = function() {
	return i18n.t.apply(i18n, arguments);
};
function swop(fun) {
	return (value, rule, ...rest) => {
		let v = value, r = rule
		if(_.isObject(value) && !_.isObject(rule)) {
			r = value
			v = rule	
		}
		
		return fun.call(this,v, r, ...rest)
	}
}
let validateForm = {
	// 手机验证 （element Form规则)
	mobile: swop((value, rule) => {
		if (!value) {
			return true
		}
		var reg = /^[1][0-9][0-9]{9}$/;
		if (value.length < 11 || !reg.test(value)) {
			return false
		}
		return true
	}),
	// 手机验证 （element Form规则)
	email: swop((value, rule,callback) => {
		if (!value) {
			return true
		}
		var reg = /^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/;
		if (!reg.test(value)) {
			return false
		}
		return true
	}),
    idCard: swop((value, rule, callback) => {
        let reg = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/
        if (!value) {
			return true
        }
        if (!reg.test(value)) {
			return false
        }
        return true
    }),
    chinese: swop((value, rule, callback) => {
        let reg = /^[\u0391-\uFFE5]+$/
        if (!reg.test(value)) {
			callback(new Error($t("valid.formatError")));
        }
        callback(rule, value, callback);
    }),
    numberAndLetter: swop((value, rule, callback) => {
        let reg = /^[0-9a-zA-Z]*$/
        if (!reg.test(value)) {
			callback(new Error($t("valid.formatError")));
        }
        callback();
	}),
	digit: swop((value, rule, callback) => {
        let reg = /^[0-9]*$/
        if (!reg.test(value)) {
			return false
		}
		return true
    })
};
export default validateForm;

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"
@@ -5802,6 +5807,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.24.4:
  version "8.24.4"
  resolved "https://registry.nlark.com/vue-i18n/download/vue-i18n-8.24.4.tgz?cache=0&sync_timestamp=1619621800433&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fvue-i18n%2Fdownload%2Fvue-i18n-8.24.4.tgz#b158614c1df7db183d9cadddbb73e1d540269492"
  integrity sha1-sVhhTB332xg9nK3du3Ph1UAmlJI=
vue-lazyload@1.2.3:
  version "1.2.3"
  resolved "https://registry.npm.taobao.org/vue-lazyload/download/vue-lazyload-1.2.3.tgz#901f9ec15c7e6ca78781a2bae4a343686bdedb2c"