lizongxi/ai-vue3-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.0.1 completed

Browse Source
This commit is contained in:
huzhushan 2021-04-14 11:08:41 +08:00
parent 27f3c15f76
commit 9a4d4e5528
12 changed files with 333 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
package-lock.json generated
View File

@ -1,5 +1,5 @@
{
"name": "erp-vue3",
"name": "vue3-element-admin",
"version": "1.0.0",
"lockfileVersion": 1,
"requires": true,
@ -2796,6 +2796,12 @@
"resolved": "https://registry.npmjs.org/vue-router/-/vue-router-4.0.5.tgz",
"integrity": "sha512-AQq+pllb6FCc7rS6vh4PPcce3XA1jgK3hKNkQ4hXHwoVN7jOeAOMKCnX7XAX3etV9rmN7iNW8iIwgPk95ckBjw=="
},
"vue3-pro-table": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/vue3-pro-table/-/vue3-pro-table-1.0.0.tgz",
"integrity": "sha512-tJXFLhkzUJUvGle04poYEt5HEUtAcNXyeQCFlcxwZUooPgZc49sqDGk37xXmEEqKWXtFgMqA4p1F9x3BfgW3jg==",
"dev": true
},
"vuex": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/vuex/-/vuex-4.0.0.tgz",

11
package.json
View File

@ -1,5 +1,5 @@
{
"name": "erp-vue3",
"name": "vue3-element-admin",
"version": "1.0.0",
"author": {
"name": "huzhushan",
@ -32,15 +32,16 @@
"sass": "^1.32.8",
"vite": "^2.1.0",
"vite-plugin-mock": "^2.3.0",
"vite-plugin-svg-icons": "^0.4.0"
"vite-plugin-svg-icons": "^0.4.0",
"vue3-pro-table": "^1.0.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/huzhushan/erp-vue3.git"
"url": "git+https://github.com/huzhushan/vue3-element-admin.git"
},
"license": "MIT",
"bugs": {
"url": "https://github.com/huzhushan/erp-vue3/issues"
"url": "https://github.com/huzhushan/vue3-element-admin/issues"
},
"homepage": "https://github.com/huzhushan/erp-vue3"
"homepage": "https://github.com/huzhushan/vue3-element-admin"
}

2
readme.md
View File

@ -1,3 +1,3 @@
# 简介
vue3-element-admin 是一个后台管理系统前端解决方案，它基于 vue3 和 element-plus 实现
vue3-element-admin 是一个后台管理系统前端解决方案，它基于 vue3 + element-plus + vite 实现

21
src/layout/components/Tagsbar/hooks/useContextMenu.js
View File

@ -46,6 +46,27 @@ export const useContextMenu = (tagList) => {
store.dispatch("tags/delOtherTags", state.selectedTag)
router.push(state.selectedTag);
},
closeLeftTags () {
state.closeSomeTags('left')
},
closeRightTags () {
state.closeSomeTags('right')
},
closeSomeTags (direction) {
const index = tagList.value.findIndex(
(item) => item.fullPath === state.selectedTag.fullPath
);
if ((direction === 'left' && index <= 0) || (direction === 'right' && index >= tagList.value.length - 1)) {
return;
}
const needToClose = direction === 'left' ? tagList.value.slice(0, index) : tagList.value.slice(index + 1)
store.dispatch("tags/delSomeTags", needToClose)
router.push(state.selectedTag);
},
closeAllTags () {
store.dispatch("tags/delAllTags")
router.push("/");

4
src/layout/components/Tagsbar/hooks/useTags.js
View File

@ -1,5 +1,5 @@
import { useScrollbar } from "./useScrollbar";
import { onMounted, watch, computed, ref, nextTick } from 'vue';
import { watch, computed, ref, nextTick, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import { useStore } from 'vuex'
@ -73,7 +73,7 @@ export const useTags = () => {
onMounted(() => {
onBeforeMount(() => {
initTags();
addTag();
moveToCurrentTag();

2
src/layout/components/Tagsbar/index.vue
View File

@ -39,6 +39,8 @@
<li @click="refreshSelectedTag(selectedTag)">刷新</li>
<li v-if="!isAffix(selectedTag)" @click="closeTag(selectedTag)">关闭</li>
<li @click="closeOtherTags">关闭其他</li>
<li @click="closeLeftTags">关闭左侧</li>
<li @click="closeRightTags">关闭右侧</li>
<li @click="closeAllTags">关闭全部</li>
</ul>
</template>

9
src/main.js
View File

@ -6,6 +6,9 @@ const app = createApp(App)
// 引入element-plus
import ElementPlus from "element-plus";
import './assets/style/element-variables.scss'
// 引入中文语言包
import 'dayjs/locale/zh-cn'
import locale from 'element-plus/lib/locale/lang/zh-cn'
// 引入路由
import router from './router'
@ -25,4 +28,8 @@ Object.entries(Components).forEach(([key, component]) => {
app.component(key, component)
})
app.use(ElementPlus).use(store).use(router).mount('#app')
// 引入vue3-pro-table
import Vue3ProTable from "vue3-pro-table";
app.use(Vue3ProTable);
app.use(ElementPlus, { locale }).use(store).use(router).mount('#app')

19
src/store/modules/tags.js
View File

@ -38,6 +38,7 @@ const mutations = {
},
DEL_CACHE_LIST: (state, tag) => {
state.cacheList = state.cacheList.filter(v => v !== tag.name)
},
DEL_OTHER_TAG_LIST: (state, tag) => {
@ -47,6 +48,18 @@ const mutations = {
},
DEL_OTHER_CACHE_LIST: (state, tag) => {
state.cacheList = state.cacheList.filter(v => v === tag.name)
},
DEL_SOME_TAG_LIST: (state, tags) => {
state.tagList = state.tagList.filter(v => !!v.meta.affix || tags.every(tag => tag.path !== v.path))
// 保存到localStorage
setItem(TAGLIST, state.tagList);
},
DEL_SOME_CACHE_LIST: (state, tags) => {
state.cacheList = state.cacheList.filter(v => tags.every(tag => tag.name !== v))
},
DEL_ALL_TAG_LIST: state => {
@ -56,6 +69,7 @@ const mutations = {
},
DEL_ALL_CACHE_LIST: state => {
state.cacheList = []
},
UPDATE_TAG_LIST: (state, tag) => {
@ -109,6 +123,11 @@ const actions = {
commit('DEL_OTHER_CACHE_LIST', tag)
},
delSomeTags ({ commit }, tags) {
commit('DEL_SOME_TAG_LIST', tags)
commit('DEL_SOME_CACHE_LIST', tags)
},
delAllTags ({ dispatch }) {
dispatch('delAllTagList')
dispatch('delAllCacheList')

1
src/views/test/Auth.vue
View File

@ -4,5 +4,6 @@
$store.state.account.userinfo && $store.state.account.userinfo.role
}}
</h2>
<h4><mark>刷新页面可切换随机角色</mark></h4>
<router-link to="/test/noauth">点击进入只有admin才能访问的页面</router-link>
</template>

5
src/views/test/Cache.vue
View File

@ -6,12 +6,15 @@
</dl>
</template>
<script>
import { defineComponent } from "vue";
import { defineComponent, onActivated } from "vue";
export default defineComponent({
name: "test-cache", // 该name必须跟路由配置的name一致
setup() {
console.log("cache");
onActivated(() => {
console.log("onActivated");
});
},
});
</script>

263
src/views/test/index.vue
View File

@ -1,6 +1,261 @@
<template>
<h2>列表</h2>
<router-link to="/test/add">
<el-button type="primary">添加一条</el-button>
</router-link>
<vue3-pro-table
ref="table"
title="列表"
:request="getList"
:columns="columns"
:search="searchConfig"
:pagination="paginationConfig"
@selectionChange="handleSelectionChange"
>
<!-- 工具栏 -->
<template #toolbar>
<el-button type="primary" icon="el-icon-delete" @click="batchDelete">
批量删除
</el-button>
<el-button
type="primary"
icon="el-icon-plus"
@click="$router.push('/test/add')"
>
添加一条
</el-button>
<el-button type="primary" icon="el-icon-refresh" @click="refresh">
刷新
</el-button>
</template>
<template #operate="scope">
<el-button size="mini" type="primary">编辑</el-button>
<el-button size="mini" type="danger">删除</el-button>
</template>
</vue3-pro-table>
</template>
<script>
import { defineComponent, reactive, ref, toRefs } from "vue";
export default defineComponent({
name: "testList",
setup() {
const state = reactive({
// 表格列配置，大部分属性跟el-table-column配置一样
columns: [
{ type: "selection" },
{ label: "序号", type: "index" },
{ label: "名称", prop: "nickName", sortable: true, width: 180 },
{ label: "邮箱", prop: "userEmail" },
{
label: "操作",
fixed: "right",
width: 180,
align: "center",
tdSlot: "operate", // 自定义单元格内容的插槽名称
},
],
// 搜索配置
searchConfig: {
labelWidth: "90px", // 必须带上单位
inputWidth: "360px", // 必须带上单位
fields: [
{
type: "text",
label: "账户名称",
name: "nickName",
defaultValue: "abc",
},
{
type: "textarea",
label: "描述",
name: "description",
},
{
label: "状态",
name: "status",
type: "select",
defaultValue: 1,
options: [
{
name: "已发布",
value: 1,
},
{
name: "未发布",
value: 0,
},
],
},
{
label: "性别",
name: "sex",
type: "radio",
options: [
{
name: "男",
value: 1,
},
{
name: "女",
value: 0,
},
],
},
{
label: "城市",
name: "city",
type: "radio-button",
options: [
{
name: "北京",
value: "bj",
},
{
name: "上海",
value: "sh",
},
{
name: "广州",
value: "gz",
},
{
name: "深圳",
value: "sz",
},
],
},
{
label: "爱好",
name: "hobby",
type: "checkbox",
defaultValue: ["吃饭"],
options: [
{
name: "吃饭",
value: "吃饭",
},
{
name: "睡觉",
value: "睡觉",
},
{
name: "打豆豆",
value: "打豆豆",
},
],
// transform: (val) => val.join(","),
},
{
label: "水果",
name: "fruit",
type: "checkbox-button",
options: [
{
name: "苹果",
value: "苹果",
},
{
name: "香蕉",
value: "香蕉",
},
{
name: "橘子",
value: "橘子",
},
{
name: "葡萄",
value: "葡萄",
},
],
transform: (val) => val.join(","),
},
{
label: "日期",
name: "date",
type: "date",
},
{
label: "时间",
name: "datetime",
type: "datetime",
defaultValue: "2020-10-10 8:00:00",
},
{
label: "日期范围",
name: "daterange",
type: "daterange",
trueNames: ["startDate", "endDate"],
},
{
label: "时间范围",
name: "datetimerange",
type: "datetimerange",
trueNames: ["startTime", "endTime"],
style: { width: "360px" },
defaultValue: ["2020-10-10 9:00:00", "2020-10-11 18:30:00"],
},
{
label: "数量",
name: "num",
type: "number",
min: 0,
max: 10,
},
],
},
// 分页配置
paginationConfig: {
layout: "total, prev, pager, next, sizes", // 分页组件显示哪些功能
pageSize: 5, // 每页条数
pageSizes: [5, 10, 20, 50],
style: { textAlign: "left" },
},
selectedItems: [],
batchDelete() {
console.log(state.selectedItems);
},
// 选择
handleSelectionChange(arr) {
state.selectedItems = arr;
},
// 请求函数
async getList(params) {
console.log(params);
// params是从组件接收的，包含分页和搜索字段。
const { data } = await new Promise((rs) => {
setTimeout(() => {
rs({
code: 200,
data: {
list: [
{
id: 1,
nickName: "zhangsan",
userEmail: "zhangsan@xx.com",
},
{
id: 2,
nickName: "lisi",
userEmail: "lisi@xx.com",
},
],
total: 100,
},
});
}, 3000);
});
// 必须要返回一个对象，包含data数组和total总数
return {
data: data.list,
total: +data.total,
};
},
});
const table = ref(null);
const refresh = () => {
table.value.refresh();
};
return { ...toRefs(state), refresh, table };
},
});
</script>

2
vite.config.js
View File

@ -36,6 +36,8 @@ export default env => {
},
},
server: {
port: 8080,
open: true,
proxy: {
"/api": {
target: "http://dev.erp.com",