lemons
/
zb-admin
1
0
Fork 1
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'vue-i18n' of https://github.com/zouzhibin/vue-admin-perfect into ghpages 

 Conflicts:
	yarn.lock
This commit is contained in:
zouzhibing 2022-12-12 15:13:01 +08:00
parent 1919bb9f3e f924e47ebe
commit c8da35b71e
27 changed files with 318 additions and 5713 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
package-lock.json generated
View File

@ -18,7 +18,6 @@
"core-js": "^3.6.5",
"dayjs": "^1.11.4",
"echarts": "^5.3.1",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.2.21",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",
@ -3163,14 +3162,6 @@
"zrender": "5.3.2"
}
},
"node_modules/echarts-liquidfill": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
"integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
"peerDependencies": {
"echarts": "^5.0.1"
}
},
"node_modules/element-in-view": {
"version": "0.1.0",
"resolved": "https://registry.npmmirror.com/element-in-view/-/element-in-view-0.1.0.tgz",
@ -12010,12 +12001,6 @@
"zrender": "5.3.2"
}
},
"echarts-liquidfill": {
"version": "3.1.0",
"resolved": "https://registry.npmmirror.com/echarts-liquidfill/-/echarts-liquidfill-3.1.0.tgz",
"integrity": "sha512-5Dlqs/jTsdTUAsd+K5LPLLTgrbbNORUSBQyk8PSy1Mg2zgHDWm83FmvA4s0ooNepCJojFYRITTQ4GU1UUSKYLw==",
"requires": {}
},
"element-in-view": {
"version": "0.1.0",
"resolved": "https://registry.npmmirror.com/element-in-view/-/element-in-view-0.1.0.tgz",

1
package.json
View File

@ -25,7 +25,6 @@
"core-js": "^3.6.5",
"dayjs": "^1.11.4",
"echarts": "^5.3.1",
"echarts-liquidfill": "^3.1.0",
"element-plus": "^2.2.21",
"exceljs": "^4.3.0",
"file-saver": "^2.0.5",

18
src/components/PageWrapLayout/index.scss Normal file
View File

@ -0,0 +1,18 @@
.m-container-layout {
width: 100%;
height: 100%;
display: flex;
padding: 10px 12px;
box-sizing: border-box;
.m-container-layout-inner {
flex: 1;
display: flex;
flex-direction: column;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
background: white;
padding: 20px;
width: 100%;
height: 100%;
box-sizing: border-box;
}
}

13
src/components/PageWrapLayout/index.vue Normal file
View File

@ -0,0 +1,13 @@
<template>
<div class="m-container-layout">
<div class="m-container-layout-inner">
<slot></slot>
</div>
</div>
</template>
<script lang="ts" setup></script>
<style lang="scss" scoped>
@import "./index.scss";
</style>

6
src/layout/components/Header/ToolRight.vue
View File

@ -13,11 +13,11 @@
<script lang="ts" setup>
import Language from './components/Language.vue'
import GlobalComSize from './components/globalComSize.vue'
import HeaderSearch from './components/HeaderSearch'
import Remind from './components/Remind'
import HeaderSearch from './components/HeaderSearch.vue'
import Remind from './components/Remind.vue'
import ScreenFull from './components/ScreenFull.vue'
import Setting from './components/Setting.vue'
import Avatar from './components/Avatar'
import Avatar from './components/Avatar.vue'
</script>
<style lang="scss" scoped>

1
src/layout/index.vue
View File

@ -30,7 +30,6 @@
let { device } = useResizeHandler()
watch(()=>device.value,(val)=>{
console.log('themeConfig.value.mode',themeConfig.value.mode)
let vertical = val==='mobile'?'vertical':themeConfig.value.mode
const body = document.body as HTMLElement;
body.setAttribute("class", `layout-${vertical}`);

22
src/main.ts
View File

@ -3,6 +3,9 @@ import App from './App.vue'
import router from './routers'
import pinia from "./store";
import {registerElIcons} from "@/plugins/ElIcons"
// 引入全局组件布局
import PageWrapLayout from '@/components/PageWrapLayout/index.vue'
// 权限路由
import './permission'
// svg-icons注册导入
@ -18,31 +21,16 @@ import "@/styles/element-dark.scss";
// 引入阿里图标库
import "@/assets/iconfont/iconfont.css";
import "@/assets/iconfont/iconfont.js";
// 引入全局组件布局
import UContainerLayout from '@/components/u-container-layout/index.vue'
// i18n
import I18n from "@/language/index";
const app = createApp(App)
registerElIcons(app)
// 注册全局组件
app.component('svg-icon',SvgIcon)
app.component('u-container-layout',UContainerLayout)
app.component('PageWrapLayout',PageWrapLayout)
// 注册icon组件
import * as ElIconsModules from '@element-plus/icons-vue'
// 全局注册element-plus icon图标组件
Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
app.component(key, ElIconsModules[key]);
} else {
app.component(key + "Icon", ElIconsModules[key]);
}
});
app.use(I18n)
app.use(pinia)
app.use(router)
app.use(ElementPlus).mount('#app')

16
src/plugins/ElIcons.ts Normal file
View File

@ -0,0 +1,16 @@
// 注册icon组件
import * as ElIconsModules from '@element-plus/icons-vue'
export const registerElIcons = (app)=>{
// 全局注册element-plus icon图标组件
Object.keys(ElIconsModules).forEach((key) => {//循环遍历组件名称
if ("Menu" !== key) {//如果不是图标组件不是Menu，就跳过，否则加上ICon的后缀
app.component(key, ElIconsModules[key]);
} else {
app.component(key + "Icon", ElIconsModules[key]);
}
});
}

6
src/routers/modules/form.ts
View File

@ -32,6 +32,12 @@ const formRouter = [{
name: 'appendForm',
meta: { title: '增删 Form', keepAlive: true , icon: 'MenuIcon'}
},
{
path: 'moreForm',
component: () => import('@/views/form/moreForm/index.vue'),
name: 'moreForm',
meta: { title: '多表单验证', keepAlive: true , icon: 'MenuIcon'}
},
]
}]

12
src/styles/common.scss
View File

@ -6,6 +6,7 @@ body {
overflow-x: hidden;
margin: 0;
padding: 0;
font-size: 14px;
}
body{
background: #f0f2f5;
@ -94,3 +95,14 @@ body{
}
}
.el-pager li:focus {
border: none;
}
.el-dropdown:focus {
border: none;
outline: none!important;
}
.svg-icon:focus {
border: none!important;
outline: none!important;
}

4
src/views/echarts/simple/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout style="width: 100%">
<PageWrapLayout style="width: 100%">
<el-row class="row-bg" :gutter="10">
<el-col :xs="24" :sm="12" :lg="8">
<el-card class="box-card">
@ -92,7 +92,7 @@
</el-card>
</el-col>
</el-row>
</u-container-layout>
</PageWrapLayout>
</template>
<script setup lang="ts">
import LineCharts from './components/line.vue'

4
src/views/excel/uploadExcel/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout class="m-upload-excel">
<PageWrapLayout class="m-upload-excel">
<el-upload
style="width: 100%"
class="upload-demo"
@ -23,7 +23,7 @@
</el-table-column>
</el-table>
</div>
</u-container-layout>
</PageWrapLayout>
</template>
<script setup lang="ts">

48
src/views/form/moreForm/components/FormOne.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<el-card header="表单组件1">
<el-form :model="form" :rules="rules" ref="formRuleOneRef" label-width="100px" >
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="姓名" prop="name">
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入用户邮箱" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="用户名" prop="autograph">
<el-input v-model="form.autograph" placeholder="请输入登陆账户名" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="职务" prop="occupation">
<el-select v-model="form.occupation" placeholder="请选择职务" clearable >
<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
// const formRuleOneRef = ref()
const form = reactive({ name: '', email: '', autograph: '', occupation: '' })
const rules = reactive({
name: { required: true, message: '请输入姓名', trigger: 'blur' },
email: { required: true, message: '请输入用户邮箱', trigger: 'blur' },
autograph: { required: true, message: '请输入登陆账户名', trigger: 'blur' },
});
</script>

42
src/views/form/moreForm/components/FormThree.vue Normal file
View File

@ -0,0 +1,42 @@
<template>
<el-card header="表单组件3">
<el-form :model="form" :rules="rules" ref="formRuleThreeRef" label-width="100px" >
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="创建用户" prop="createUser">
<el-input v-model="form.createUser" placeholder="请输入创建用户" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="修改用户" prop="editUser">
<el-input v-model="form.editUser" placeholder="请输入修改用户" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="所属用户" prop="user">
<el-input v-model="form.user" placeholder="请输入所属用户" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="所属部门" prop="department">
<el-input v-model="form.department" placeholder="请输入所属部门" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
const formRuleThreeRef = ref()
const form = reactive( { createUser: '', editUser: '', user: '', department: '' })
const rules = reactive( {
createUser: { required: true, message: '请输入创建用户', trigger: 'blur' },
editUser: { required: true, message: '请输入修改用户', trigger: 'blur' },
user: { required: true, message: '请输入所属用户', trigger: 'blur' },
department: { required: true, message: '请输入所属部门', trigger: 'blur' },
})
</script>

44
src/views/form/moreForm/components/FormTwo.vue Normal file
View File

@ -0,0 +1,44 @@
<template>
<el-card header="表单组件2">
<el-form :model="form" :rules="rules" ref="formRuleTwoRef" label-width="100px" >
<el-row :gutter="35">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="手机" prop="phone">
<el-input v-model="form.phone" placeholder="请输入手机" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="性别">
<el-select v-model="form.sex" placeholder="请选择性别" clearable class="w100">
<el-option label="男" value="1"></el-option>
<el-option label="女" value="2"></el-option>
</el-select>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="登录密码" prop="password">
<el-input v-model="form.password" placeholder="请输入登录密码" clearable></el-input>
</el-form-item>
</el-col>
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" >
<el-form-item label="权限角色" prop="auth">
<el-input v-model="form.auth" placeholder="请输入权限角色" clearable></el-input>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
</template>
<script lang="ts" setup>
import {reactive, ref} from 'vue';
const formRuleTwoRef = ref()
const form = reactive({ phone: '', sex: '', password: '', auth: '' })
const rules = reactive( {
phone: { required: true, message: '请输入手机', trigger: 'blur' },
password: { required: true, message: '请输入登录密码', trigger: 'blur' },
auth: { required: true, message: '请输入权限角色', trigger: 'blur' },
})
</script>

12
src/views/form/moreForm/index.scss Normal file
View File

@ -0,0 +1,12 @@
.m-more-form{
width: 100%;
padding: 10px;
box-sizing: border-box;
:deep(.el-card){
margin-bottom: 10px;
}
.footer{
width: 100%;
text-align: center;
}
}

57
src/views/form/moreForm/index.vue Normal file
View File

@ -0,0 +1,57 @@
<template>
<div class="m-more-form">
<FormOne ref="formRuleOne"/>
<FormTwo ref="formRuleTwo"/>
<FormThree ref="formRuleThree"/>
<div class="footer">
<el-button @click="onResetForm">重置</el-button>
<el-button type="primary" @click="onSubmitForm">验证表单</el-button>
</div>
</div>
</template>
<script lang="ts" setup>
import {getCurrentInstance} from 'vue'
import { ElMessage } from 'element-plus';
import FormOne from './components/FormOne.vue'
import FormTwo from './components/FormTwo.vue'
import FormThree from './components/FormThree.vue'
const { proxy } = <any>getCurrentInstance();
// 表单组件验证
const formRulesValidate = (pageRef: string, sonRef: string) => {
return new Promise((resolve) => {
proxy.$refs[pageRef].$refs[sonRef].validate((valid: boolean) => {
if (valid) resolve(valid);
});
});
};
const formRulesResetFields = ()=>{
proxy.$refs.formRuleOne.$refs.formRuleOneRef.resetFields();
proxy.$refs.formRuleTwo.$refs.formRuleTwoRef.resetFields();
proxy.$refs.formRuleThree.$refs.formRuleThreeRef.resetFields();
}
const onSubmitForm = ()=>{
Promise.all([
formRulesValidate('formRuleOne','formRuleOneRef'),
formRulesValidate('formRuleTwo','formRuleTwoRef'),
formRulesValidate('formRuleThree','formRuleThreeRef'),
]).then(res=>{
ElMessage.success('表单全部验证成功');
})
}
// 重置表单
const onResetForm = () => {
formRulesResetFields();
};
</script>
<style lang="scss" scoped>
@import "./index.scss";
</style>

4
src/views/form/validateForm/index.vue
View File

@ -1,6 +1,6 @@
<template>
<u-container-layout>
<PageWrapLayout>
<div style="max-width: 800px">
<el-form
ref="ruleFormRef"
@ -68,7 +68,7 @@
</el-form-item>
</el-form>
</div>
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts" setup >

4
src/views/other/iconfont/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout class="components-container">
<PageWrapLayout class="components-container">
<div class="content-box">
<el-alert
title="普通引入方式 Font Class"
@ -40,7 +40,7 @@
</div>
</div>
</u-container-layout>
</PageWrapLayout>
</template>

30
src/views/other/markDown/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout class="mark-down">
<PageWrapLayout class="mark-down">
<el-alert
title="Markdown 是基于 md-editor-v3 插件完成， 官方文档请查看 ：https://imzbf.github.io/md-editor-v3/index"
type="warning"
@ -11,27 +11,21 @@
<div style="margin-top: 20px; flex-shrink: 0">
<el-button type="primary" @click="submit">提交</el-button>
</div>
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts">
// https://www.jianshu.com/p/0b06128a6117
import { defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
<script lang="ts" setup>
import {ref} from 'vue'
import { ElMessage } from 'element-plus'
import MdEditor from 'md-editor-v3'
import 'md-editor-v3/lib/style.css'
export default defineComponent({
components: { MdEditor },
data() {
return { text: '## 你好呀,欢迎！' }
},
methods: {
submit() {
console.log('this.text', this.text)
ElMessage.success(`提交数据:${this.text}`)
},
},
})
const text = ref( '## 你好呀,欢迎！' )
const submit = ()=> {
console.log('this.text', text.value)
ElMessage.success(`提交数据:${text.value}`)
}
</script>
<style lang="scss">

4
src/views/other/print/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout>
<PageWrapLayout>
<div id="wrap" style="margin-bottom: 20px">
<div>
<el-button type="primary" @click="print(1)" >打印图片</el-button>
@ -30,7 +30,7 @@
<el-descriptions-item label="honorColor"> 要以彩色打印文本，请将此属性设置为true。默认情况下，所有文本都将以黑色打印。 </el-descriptions-item>
<el-descriptions-item label="css"> 这允许我们传递一个或多个应该应用于正在打印的html的css文件URL。值可以是包含单个URL的字符串，也可以是包含多个URL的数组。 </el-descriptions-item>
</el-descriptions>
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts" setup>

4
src/views/other/qrcode/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout>
<PageWrapLayout>
<div style="display: flex">
<el-input v-model="inputData" placeholder="请输入" style="width: 400px; max-width: 100%" />
<el-button type="primary" @click="handleQrcode(1)">
@ -26,7 +26,7 @@
<el-descriptions-item label="colorLight"> 空白区的颜色 </el-descriptions-item>
<el-descriptions-item label="callback"> 生成的二维码 Data URI 可以在回调中取得,第一个参数为二维码 data URL, 第二个参数为 props 传过来的 qid(因为二维码生成是异步的,所以加个 id 用于排序) </el-descriptions-item>
</el-descriptions>
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'

4
src/views/other/rightMenu/index.vue
View File

@ -1,8 +1,8 @@
<template>
<u-container-layout style="min-height: 300px">
<PageWrapLayout style="min-height: 300px">
<el-button @contextmenu.prevent="rightClick" style="width: 200px">右键菜单</el-button>
<RightClickMenu :left="clientX" :top="clientY" @ok="operatingRightAction" :data="data" />
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts" setup>

4
src/views/other/svgIcon/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout class="components-container">
<PageWrapLayout class="components-container">
<div class="content-box">
<el-alert
title="SVG 图标目前使用 vite-plugin-svg-icons 插件完成，官方文档请查看 ：https://github.com/vbenjs/vite-plugin-svg-icons"
@ -26,7 +26,7 @@
<el-descriptions-item label="iconStyle"> 图标的样式，默认样式为 { width: "1em", height: " 1em" } </el-descriptions-item>
</el-descriptions>
</div>
</u-container-layout>
</PageWrapLayout>
</template>

4
src/views/table/EditableProTable/index.vue
View File

@ -1,5 +1,5 @@
<template>
<u-container-layout>
<PageWrapLayout>
<div style="margin-bottom: 20px">
<div style="display: flex; justify-content: flex-end">
<el-radio-group v-model="radio">
@ -36,7 +36,7 @@
<el-descriptions-item label="onChange"> 数据实时改变 </el-descriptions-item>
</el-descriptions>
</u-container-layout>
</PageWrapLayout>
</template>
<script lang="ts" setup>

14
tsconfig.json
View File

@ -12,8 +12,18 @@
"esModuleInterop": true,
"lib": ["ESNext", "DOM"],
// 跳过库检查，解决打包失败
"skipLibCheck": true
"skipLibCheck": true,
// 解析非相对模块名的基准目录
"baseUrl": "./",
// 模块名到基于 baseUrl 的路径映射的列表。
"paths": {
"@": ["src"],
"@/*": ["src/*"]
}
},
"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
"references": [{ "path": "./tsconfig.node.json" }]
"references": [
{ "path": "./tsconfig.node.json" }
],
"exclude": ["node_modules","dist","**/*.js"]
}

5638
yarn.lock
View File

File diff suppressed because it is too large Load Diff