添加前端
This commit is contained in:
橙子
3
Yi.Vue2.x/.browserslistrc
Normal file
3
Yi.Vue2.x/.browserslistrc
Normal file
@@ -0,0 +1,3 @@
|
||||
> 1%
|
||||
last 2 versions
|
||||
not dead
|
||||
4
Yi.Vue2.x/.env.development
Normal file
4
Yi.Vue2.x/.env.development
Normal file
@@ -0,0 +1,4 @@
|
||||
#接口服务地址
|
||||
VUE_APP_SERVICE_URL='https://localhost:44329/api'
|
||||
#开发环境路径前缀
|
||||
VUE_APP_BASE_API='/dev-apis'
|
||||
2
Yi.Vue2.x/.env.production
Normal file
2
Yi.Vue2.x/.env.production
Normal file
@@ -0,0 +1,2 @@
|
||||
#生成环境路径前缀
|
||||
VUE_APP_BASE_API='/prod-apis'
|
||||
23
Yi.Vue2.x/.gitignore
vendored
Normal file
23
Yi.Vue2.x/.gitignore
vendored
Normal file
@@ -0,0 +1,23 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
/dist
|
||||
|
||||
|
||||
# local env files
|
||||
.env.local
|
||||
.env.*.local
|
||||
|
||||
# Log files
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
pnpm-debug.log*
|
||||
|
||||
# Editor directories and files
|
||||
.idea
|
||||
.vscode
|
||||
*.suo
|
||||
*.ntvs*
|
||||
*.njsproj
|
||||
*.sln
|
||||
*.sw?
|
||||
19
Yi.Vue2.x/README.md
Normal file
19
Yi.Vue2.x/README.md
Normal file
@@ -0,0 +1,19 @@
|
||||
# vuetify-test
|
||||
|
||||
## Project setup
|
||||
```
|
||||
npm install
|
||||
```
|
||||
|
||||
### Compiles and hot-reloads for development
|
||||
```
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Compiles and minifies for production
|
||||
```
|
||||
npm run build
|
||||
```
|
||||
|
||||
### Customize configuration
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
23
Yi.Vue2.x/src/App.vue
Normal file
23
Yi.Vue2.x/src/App.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<v-fade-transition mode="out-in">
|
||||
<router-view />
|
||||
</v-fade-transition>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Styles
|
||||
import '@/styles/overrides.sass'
|
||||
|
||||
export default {
|
||||
name: 'App',
|
||||
metaInfo: {
|
||||
title: 'App',
|
||||
titleTemplate: '%s | Material Dashboard Free',
|
||||
htmlAttrs: { lang: 'en' },
|
||||
meta: [
|
||||
{ charset: 'utf-8' },
|
||||
{ name: 'viewport', content: 'width=device-width, initial-scale=1' },
|
||||
],
|
||||
},
|
||||
}
|
||||
</script>
|
||||
46
Yi.Vue2.x/src/api/accountApi.js
Normal file
46
Yi.Vue2.x/src/api/accountApi.js
Normal file
@@ -0,0 +1,46 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
login(username, password) {
|
||||
return myaxios({
|
||||
url: '/Account/login',
|
||||
method: 'post',
|
||||
data: {
|
||||
username,
|
||||
password
|
||||
}
|
||||
})
|
||||
},
|
||||
logout() {
|
||||
return myaxios({
|
||||
url: '/Account/logout',
|
||||
method: 'post',
|
||||
})
|
||||
},
|
||||
register(username, password, phone, code) {
|
||||
return myaxios({
|
||||
url: `/Account/register?code=${code}`,
|
||||
method: 'post',
|
||||
data: { username, password, phone }
|
||||
})
|
||||
},
|
||||
email(emailAddress) {
|
||||
return myaxios({
|
||||
url: `/Account/email?emailAddress=${emailAddress}`,
|
||||
method: 'post',
|
||||
})
|
||||
},
|
||||
SendSMS(smsAddress) {
|
||||
return myaxios({
|
||||
url: `/Account/SendSMS?SMSAddress=${smsAddress}`,
|
||||
method: 'post',
|
||||
})
|
||||
},
|
||||
changePassword(user, newPassword) {
|
||||
return myaxios({
|
||||
url: `/Account/changePassword`,
|
||||
method: 'put',
|
||||
data: { user, newPassword }
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
11
Yi.Vue2.x/src/api/fileApi.js
Normal file
11
Yi.Vue2.x/src/api/fileApi.js
Normal file
@@ -0,0 +1,11 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
EditIcon(file) {
|
||||
return myaxios({
|
||||
url: '/File/EditIcon',
|
||||
method: 'post',
|
||||
headers: { "Content-Type": "multipart/form-data" },
|
||||
data: file
|
||||
})
|
||||
}
|
||||
}
|
||||
50
Yi.Vue2.x/src/api/menuApi.js
Normal file
50
Yi.Vue2.x/src/api/menuApi.js
Normal file
@@ -0,0 +1,50 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
GetMenuInMould() {
|
||||
return myaxios({
|
||||
url: '/Menu/GetMenuInMould',
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
addChildrenMenu(id, data) {
|
||||
return myaxios({
|
||||
url: '/Menu/addChildrenMenu',
|
||||
method: 'post',
|
||||
data: { parentId: id, data }
|
||||
})
|
||||
},
|
||||
UpdateMenu(data) {
|
||||
return myaxios({
|
||||
url: '/Menu/UpdateMenu',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
},
|
||||
DelListMenu(ids) {
|
||||
return myaxios({
|
||||
url: '/Menu/DelListMenu',
|
||||
method: 'delete',
|
||||
data: ids
|
||||
})
|
||||
},
|
||||
AddTopMenu(data) {
|
||||
return myaxios({
|
||||
url: '/Menu/AddTopMenu',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
},
|
||||
SetMouldByMenu(menuId, mouldId) {
|
||||
return myaxios({
|
||||
url: '/Menu/SetMouldByMenu',
|
||||
method: 'post',
|
||||
data: { id1: menuId, id2: mouldId }
|
||||
})
|
||||
},
|
||||
GetTopMenusByHttpUser() {
|
||||
return myaxios({
|
||||
url: '/Menu/GetTopMenusByHttpUser',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
10
Yi.Vue2.x/src/api/mouldApi.js
Normal file
10
Yi.Vue2.x/src/api/mouldApi.js
Normal file
@@ -0,0 +1,10 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
getMould() {
|
||||
return myaxios({
|
||||
url: '/Mould/GetMould',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
19
Yi.Vue2.x/src/api/panApi.js
Normal file
19
Yi.Vue2.x/src/api/panApi.js
Normal file
@@ -0,0 +1,19 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
GetPanFiles(dirName) {
|
||||
return myaxios({
|
||||
url: '/Pan/GetPanFiles',
|
||||
method: 'post',
|
||||
data: { dirName}
|
||||
})
|
||||
},
|
||||
Download(dirName,allName)
|
||||
{
|
||||
return myaxios({
|
||||
url: '/Pan/Download',
|
||||
method: 'post',
|
||||
data: { dirName,allName}
|
||||
})
|
||||
|
||||
}
|
||||
}
|
||||
29
Yi.Vue2.x/src/api/roleApi.js
Normal file
29
Yi.Vue2.x/src/api/roleApi.js
Normal file
@@ -0,0 +1,29 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
getRole() {
|
||||
return myaxios({
|
||||
url: '/Role/getRole',
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
setMenuByRole(roleList, menuList) {
|
||||
return myaxios({
|
||||
url: '/Role/setMenuByRole',
|
||||
method: 'post',
|
||||
data: { ids1: roleList, ids2: menuList }
|
||||
})
|
||||
},
|
||||
GetTopMenusByRoleId(roleId) {
|
||||
return myaxios({
|
||||
url: `/Role/GetTopMenusByRoleId?roleId=${roleId}`,
|
||||
method: 'get'
|
||||
|
||||
})
|
||||
},
|
||||
GetRolesByUserId(userId) {
|
||||
return myaxios({
|
||||
url: `/Role/GetRolesByUserId?userId=${userId}`,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
}
|
||||
31
Yi.Vue2.x/src/api/userApi.js
Normal file
31
Yi.Vue2.x/src/api/userApi.js
Normal file
@@ -0,0 +1,31 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
SetRoleByUser(userIds, roleIds) {
|
||||
return myaxios({
|
||||
url: '/User/SetRoleByUser',
|
||||
method: 'post',
|
||||
data: { "ids1": userIds, "ids2": roleIds }
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
GetUserInRolesByHttpUser() {
|
||||
return myaxios({
|
||||
url: `/User/GetUserInRolesByHttpUser`,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
GetMenuByHttpUser() {
|
||||
return myaxios({
|
||||
url: `/User/GetMenuByHttpUser`,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
GetAxiosByRouter(router) {
|
||||
return myaxios({
|
||||
url: `/User/GetAxiosByRouter?router=${router}`,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
}
|
||||
BIN
Yi.Vue2.x/src/assets/clint-mckoy.jpg
Normal file
BIN
Yi.Vue2.x/src/assets/clint-mckoy.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 170 KiB |
BIN
Yi.Vue2.x/src/assets/lock.jpg
Normal file
BIN
Yi.Vue2.x/src/assets/lock.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 808 KiB |
BIN
Yi.Vue2.x/src/assets/login.jpg
Normal file
BIN
Yi.Vue2.x/src/assets/login.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 362 KiB |
1
Yi.Vue2.x/src/assets/login.svg
Normal file
1
Yi.Vue2.x/src/assets/login.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 14 KiB |
BIN
Yi.Vue2.x/src/assets/logo.png
Normal file
BIN
Yi.Vue2.x/src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
1
Yi.Vue2.x/src/assets/logo.svg
Normal file
1
Yi.Vue2.x/src/assets/logo.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#1867c0;}.cls-4{fill:#aeddff;}</style></defs><title>Artboard 46</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-3" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-4" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 539 B |
BIN
Yi.Vue2.x/src/assets/mask-dark.png
Normal file
BIN
Yi.Vue2.x/src/assets/mask-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
Yi.Vue2.x/src/assets/mask-light.png
Normal file
BIN
Yi.Vue2.x/src/assets/mask-light.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 777 B |
BIN
Yi.Vue2.x/src/assets/pricing.jpg
Normal file
BIN
Yi.Vue2.x/src/assets/pricing.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 637 KiB |
BIN
Yi.Vue2.x/src/assets/register.jpg
Normal file
BIN
Yi.Vue2.x/src/assets/register.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 465 KiB |
BIN
Yi.Vue2.x/src/assets/tree-3.png
Normal file
BIN
Yi.Vue2.x/src/assets/tree-3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 8.2 KiB |
BIN
Yi.Vue2.x/src/assets/tree-4.png
Normal file
BIN
Yi.Vue2.x/src/assets/tree-4.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
BIN
Yi.Vue2.x/src/assets/tree.png
Normal file
BIN
Yi.Vue2.x/src/assets/tree.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.2 KiB |
30
Yi.Vue2.x/src/assets/vmd.svg
Normal file
30
Yi.Vue2.x/src/assets/vmd.svg
Normal file
@@ -0,0 +1,30 @@
|
||||
<svg width="256" height="256" viewBox="0 0 256 256" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 205L182.534 118.292L162.162 130.093V119.162L191.975 102.019L221.665 50.5903L132.472 102.019V205Z" fill="#AEDDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.386L162.162 130.094V124.255V119.162V113.448L189.863 97.423L214.584 54.5659L132.472 102.019V194.938Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M183.155 101.274L189.987 97.2988L214.707 54.5659L175.329 77.2988C176.447 85.8702 179.18 93.9447 183.155 101.274Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.839 123.385L162.162 130.093V124.255V123.634C151.23 125.497 141.168 129.845 132.472 135.932V194.938Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 156.553V178.043C134.584 180.279 136.447 182.515 138.311 184.876L145.888 171.832C141.913 166.242 137.441 161.149 132.472 156.553Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 146.242C139.056 151.584 145.019 157.671 150.112 164.379L166.137 136.677C156.323 127.236 145.019 119.286 132.472 113.447V146.242Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M160.299 85.9946L141.665 96.8021C151.23 101.647 161.665 105.249 172.472 107.485L189.988 97.4232L195.205 88.3549C191.727 88.7275 188.249 88.8518 184.771 88.8518C176.323 88.8518 168.125 87.858 160.299 85.9946Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M170.609 80.0311C175.206 80.6522 179.926 81.0249 184.771 81.0249C189.988 81.0249 195.081 80.6522 200.05 79.7826L212.1 58.9131C208.87 60.0311 205.516 61.0249 202.038 61.7702L170.609 80.0311Z" fill="#AEDDFF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M132.472 194.938L173.714 123.385L171.975 124.379L132.472 192.826" fill="#AEDDFF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M189.117 96.5534L161.043 112.827L162.161 119.162V113.448L189.863 97.423L214.583 54.5659L212.72 55.6839L189.117 96.5534Z" fill="#AEDDFF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 205V102.019L34.3359 50.5903L84.398 137.298V113.696L93.8389 119.162V153.572L123.528 205Z" fill="#7BC6FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V102.018L43.0308 55.5586L84.3972 127.235V113.695V107.981L93.8381 113.447V119.161V143.509L123.528 194.937Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 194.937V144.006C116.82 150.714 111.478 158.788 107.875 167.733L123.528 194.937Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M60.5463 85.9933C68.2481 84.5026 75.4531 81.894 82.0369 78.1673L43.0308 55.5586L60.5463 85.9933Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M69.7397 101.895L82.5348 124.006C83.1559 124.131 83.777 124.255 84.3981 124.379V113.82V107.982L93.8391 113.447V119.286V126.367C104.522 129.224 114.46 133.696 123.528 139.534V109.472C109.864 104.379 95.0813 101.522 79.5534 101.522C76.1994 101.522 72.9696 101.646 69.7397 101.895Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M93.8384 143.509L100.671 155.31C108.994 158.912 116.695 163.633 123.528 169.223V148.85C114.584 142.515 104.646 137.546 93.8384 134.44V143.509Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M84.3973 114.939V113.696V107.982L93.8383 113.448V119.162V120.404L94.8321 112.827L83.2793 106.119L84.3973 114.939Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M43.0308 55.5586L84.3972 127.235V125.124L44.8941 56.6766L43.0308 55.5586Z" fill="#7BC6FF"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M123.528 192.826L93.8384 141.398V143.51L123.528 194.938" fill="#7BC6FF"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M135.948 60.3699L128.124 64.8994L103.418 50.5903H54.2114L128.124 93.2086L202.037 50.5903H119.065L135.948 60.3699Z" fill="#1867C0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M140.065 57.8993L135.947 60.3699L128.124 64.8994L103.418 50.5903H62.5493L128.124 88.4732L193.698 50.5903H127.3L140.065 57.8993Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M167.036 66.0317L193.698 50.5903H170.33C168.58 55.4286 167.448 60.6787 167.036 66.0317Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M62.5493 50.5903L100.432 72.4142C105.579 67.7817 110.006 62.3258 113.3 56.2522L103.418 50.5903H62.5493Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M102.903 50.5903H94.1533C101.977 65.517 113.301 78.2819 127.095 87.8555L128.124 88.4732L140.272 81.4731C125.036 74.8848 112.168 64.0758 102.903 50.5903Z" fill="#1867C0"/>
|
||||
<path opacity="0.2" fill-rule="evenodd" clip-rule="evenodd" d="M128.125 64.8994L118.86 59.5464C126.889 67.37 136.566 73.4436 147.375 77.3555L163.434 68.0906C153.654 67.1641 144.39 64.4876 135.948 60.3699L128.125 64.8994Z" fill="#1867C0"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M127.301 50.5903L140.066 57.8993L135.948 60.3699L135.021 60.8846L141.816 57.8993L129.051 50.5903H127.301Z" fill="#1867C0"/>
|
||||
<path opacity="0.3" fill-rule="evenodd" clip-rule="evenodd" d="M128.124 87.4438L64.2993 50.5903H62.5493L128.124 88.4732L193.698 50.5903H191.948L128.124 87.4438Z" fill="#1867C0"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M167.037 66.0317L163.331 68.0906L147.375 77.3554L140.272 81.4731L128.125 88.4732V93.2086L202.038 50.5903H193.699L167.037 66.0317Z" fill="#1867C0"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 5.6 KiB |
1
Yi.Vue2.x/src/assets/vuetify.svg
Normal file
1
Yi.Vue2.x/src/assets/vuetify.svg
Normal file
@@ -0,0 +1 @@
|
||||
<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 87.5 100"><defs><style>.cls-1{fill:#1697f6;}.cls-2{fill:#7bc6ff;}.cls-3{fill:#aeddff;}</style></defs><title>Artboard 47</title><polyline class="cls-1" points="43.75 0 23.31 0 43.75 48.32"/><polygon class="cls-2" points="43.75 62.5 43.75 100 0 14.58 22.92 14.58 43.75 62.5"/><polyline class="cls-2" points="43.75 0 64.19 0 43.75 48.32"/><polygon class="cls-3" points="64.58 14.58 87.5 14.58 43.75 100 43.75 62.5 64.58 14.58"/></svg>
|
||||
|
After Width: | Height: | Size: 518 B |
64
Yi.Vue2.x/src/components/Links.vue
Normal file
64
Yi.Vue2.x/src/components/Links.vue
Normal file
@@ -0,0 +1,64 @@
|
||||
<template>
|
||||
<v-container>
|
||||
<v-row align="center">
|
||||
<v-col
|
||||
v-for="(link, i) in links"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
cols="6"
|
||||
md="auto"
|
||||
>
|
||||
<a
|
||||
:href="link.href"
|
||||
class="text-decoration-none text-uppercase text-caption font-weight-regular"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
v-text="link.text"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-spacer class="hidden-sm-and-down" />
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="auto"
|
||||
>
|
||||
<div class="text-body-1 font-weight-light pt-6 pt-md-0 text-center">
|
||||
© {{ (new Date()).getFullYear() }}, Made by <v-icon>mdi-vuetify</v-icon>
|
||||
<a
|
||||
href="https://ccnetcore"
|
||||
class="text-decoration-none"
|
||||
>ccnetcore</a>
|
||||
</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Links',
|
||||
|
||||
data: () => ({
|
||||
links: [
|
||||
{
|
||||
href: '#',
|
||||
text: 'YiFramework文档',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: 'GitHub',
|
||||
},
|
||||
{
|
||||
href: '#',
|
||||
text: '论坛',
|
||||
}
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass" scoped>
|
||||
a
|
||||
color: inherit !important
|
||||
</style>
|
||||
59
Yi.Vue2.x/src/components/MaterialAlert.vue
Normal file
59
Yi.Vue2.x/src/components/MaterialAlert.vue
Normal file
@@ -0,0 +1,59 @@
|
||||
<template>
|
||||
<v-alert
|
||||
class="v-alert--material"
|
||||
dark
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template
|
||||
v-if="$attrs.icon"
|
||||
v-slot:prepend
|
||||
>
|
||||
<v-avatar
|
||||
class="align-self-start mt-n9 elevation-6 mr-4"
|
||||
size="38"
|
||||
>
|
||||
<v-icon
|
||||
:color="$attrs.color"
|
||||
class="elevation-6 white"
|
||||
light
|
||||
>
|
||||
{{ $attrs.icon }}
|
||||
</v-icon>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template
|
||||
v-if="$attrs.dismissible"
|
||||
v-slot:close="{ toggle }"
|
||||
>
|
||||
<v-btn
|
||||
:aria-label="$vuetify.lang.t('$vuetify.close')"
|
||||
class="ml-4"
|
||||
color
|
||||
icon
|
||||
small
|
||||
@click="toggle"
|
||||
>
|
||||
<v-icon>
|
||||
$vuetify.icons.cancel
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-alert>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'MaterialAlert' }
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-alert--material
|
||||
margin-top: 32px
|
||||
|
||||
.v-alert__dismissible
|
||||
align-self: flex-start
|
||||
margin: 0 0 0 16px !important
|
||||
</style>
|
||||
113
Yi.Vue2.x/src/components/MaterialCard.vue
Normal file
113
Yi.Vue2.x/src/components/MaterialCard.vue
Normal file
@@ -0,0 +1,113 @@
|
||||
<template>
|
||||
<app-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material mt-4"
|
||||
>
|
||||
<v-card-title class="align-start">
|
||||
<v-sheet
|
||||
:color="color"
|
||||
:width="fullHeader ? '100%' : undefined"
|
||||
class="overflow-hidden mt-n9 transition-swing v-card--material__sheet"
|
||||
elevation="6"
|
||||
max-width="100%"
|
||||
rounded
|
||||
>
|
||||
<v-theme-provider
|
||||
v-if="hasHeading"
|
||||
dark
|
||||
>
|
||||
<div
|
||||
v-if="icon"
|
||||
:class="iconSmall ? 'pa-7' : 'pa-8'"
|
||||
>
|
||||
<v-icon
|
||||
:large="!iconSmall"
|
||||
v-text="icon"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<slot name="heading" />
|
||||
|
||||
<div
|
||||
v-if="heading"
|
||||
class="text-h4 white--text pa-7 v-card--material__title"
|
||||
>
|
||||
{{ heading }}
|
||||
</div>
|
||||
</v-theme-provider>
|
||||
</v-sheet>
|
||||
|
||||
<div
|
||||
v-if="hasTitle"
|
||||
:class="fullHeader ? 'pt-4' : 'pl-3'"
|
||||
class="text-h4 v-card--material__title"
|
||||
>
|
||||
<slot name="title" />
|
||||
|
||||
<template v-if="title">
|
||||
{{ title }}
|
||||
</template>
|
||||
|
||||
<div class="text-subtitle-1 mb-n4">
|
||||
<slot name="subtitle" />
|
||||
|
||||
<template v-if="subtitle">
|
||||
{{ subtitle }}
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</v-card-title>
|
||||
|
||||
<slot />
|
||||
|
||||
<template v-if="$slots.actions">
|
||||
<v-divider class="mt-2 mx-4" />
|
||||
|
||||
<v-card-actions class="px-4 text-caption grey--text">
|
||||
<slot name="actions" />
|
||||
</v-card-actions>
|
||||
</template>
|
||||
</app-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialCard',
|
||||
|
||||
props: {
|
||||
color: String,
|
||||
fullHeader: Boolean,
|
||||
heading: String,
|
||||
icon: String,
|
||||
iconSmall: Boolean,
|
||||
subtitle: String,
|
||||
title: String,
|
||||
},
|
||||
|
||||
computed: {
|
||||
hasHeading () {
|
||||
return !!(
|
||||
this.icon ||
|
||||
this.heading ||
|
||||
this.$slots.heading
|
||||
)
|
||||
},
|
||||
hasTitle () {
|
||||
return !!(
|
||||
this.title ||
|
||||
this.subtitle ||
|
||||
this.$slots.title ||
|
||||
this.$slots.subtitle
|
||||
)
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card.v-card--material
|
||||
> .v-card__title
|
||||
> .v-card--material__title
|
||||
flex: 1 1 auto
|
||||
word-break: break-word
|
||||
</style>
|
||||
93
Yi.Vue2.x/src/components/MaterialChartCard.vue
Normal file
93
Yi.Vue2.x/src/components/MaterialChartCard.vue
Normal file
@@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<material-card
|
||||
v-bind="$attrs"
|
||||
class="v-card--material-chart"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<div class="pa-4">
|
||||
<chartist
|
||||
:data="data"
|
||||
:event-handlers="eventHandlers"
|
||||
:options="options"
|
||||
:ratio="ratio"
|
||||
:responsive-options="responsiveOptions"
|
||||
:type="type"
|
||||
style="max-height: 150px;"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #subtitle>
|
||||
<slot name="subtitle" />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
|
||||
<template #actions>
|
||||
<slot name="actions" />
|
||||
</template>
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialChartCard',
|
||||
|
||||
inheritAttrs: false,
|
||||
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
eventHandlers: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
},
|
||||
options: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
ratio: String,
|
||||
responsiveOptions: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
required: true,
|
||||
validator: v => ['Bar', 'Line', 'Pie'].includes(v),
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material-chart
|
||||
p
|
||||
color: #999
|
||||
|
||||
.v-card--material__sheet
|
||||
max-height: 185px
|
||||
width: 100%
|
||||
|
||||
.ct-label
|
||||
color: rgba(255, 255, 255, 1)
|
||||
opacity: .7
|
||||
font-size: 0.875rem
|
||||
font-weight: 300
|
||||
|
||||
.ct-grid
|
||||
stroke: hsla(0,0%,100%,.2)
|
||||
|
||||
.ct-series-a .ct-point,
|
||||
.ct-series-a .ct-line,
|
||||
.ct-series-a .ct-bar,
|
||||
.ct-series-a .ct-slice-donut
|
||||
stroke: rgba(255,255,255,.8)
|
||||
|
||||
.ct-series-a .ct-slice-pie,
|
||||
.ct-series-a .ct-area
|
||||
fill: rgba(255,255,255,.4)
|
||||
</style>
|
||||
78
Yi.Vue2.x/src/components/MaterialSnackbar.vue
Normal file
78
Yi.Vue2.x/src/components/MaterialSnackbar.vue
Normal file
@@ -0,0 +1,78 @@
|
||||
<template>
|
||||
<v-snackbar
|
||||
v-model="internalValue"
|
||||
class="v-snackbar--material"
|
||||
v-bind="{
|
||||
...$attrs,
|
||||
'color': 'transparent'
|
||||
}"
|
||||
>
|
||||
<material-alert
|
||||
v-model="internalValue"
|
||||
:color="$attrs.color"
|
||||
:dismissible="dismissible"
|
||||
:type="type"
|
||||
class="ma-0"
|
||||
dark
|
||||
>
|
||||
<slot />
|
||||
</material-alert>
|
||||
</v-snackbar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialSnackbar',
|
||||
|
||||
props: {
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
value: Boolean,
|
||||
},
|
||||
|
||||
data () {
|
||||
return {
|
||||
internalValue: this.value,
|
||||
}
|
||||
},
|
||||
|
||||
watch: {
|
||||
internalValue (val, oldVal) {
|
||||
if (val === oldVal) return
|
||||
|
||||
this.$emit('input', val)
|
||||
},
|
||||
value (val, oldVal) {
|
||||
if (val === oldVal) return
|
||||
|
||||
this.internalValue = val
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-snackbar--material
|
||||
margin-top: 32px
|
||||
margin-bottom: 32px
|
||||
|
||||
.v-alert
|
||||
padding: 32px 16px
|
||||
|
||||
.v-alert--material,
|
||||
.v-snack__wrapper
|
||||
border-radius: 4px
|
||||
|
||||
.v-snack__content
|
||||
overflow: visible
|
||||
padding: 0
|
||||
|
||||
.v-snack__action
|
||||
display: none
|
||||
</style>
|
||||
39
Yi.Vue2.x/src/components/MaterialStatsCard.vue
Normal file
39
Yi.Vue2.x/src/components/MaterialStatsCard.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<material-card
|
||||
class="v-card--material-stats"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template #subtitle>
|
||||
<div
|
||||
class="text-right text-h3 v-card__subtitle--material-stats"
|
||||
v-text="value"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<slot name="actions" />
|
||||
</template>
|
||||
|
||||
<slot />
|
||||
</material-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'MaterialStatCard',
|
||||
|
||||
props: { value: String },
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-card--material-stats.v-card--material .v-card--material__title
|
||||
color: #999999
|
||||
font-size: .875rem !important
|
||||
margin-left: auto
|
||||
text-align: right
|
||||
|
||||
.v-card__subtitle--material-stats
|
||||
color: #3C4858
|
||||
</style>
|
||||
30
Yi.Vue2.x/src/components/TableApi.js
Normal file
30
Yi.Vue2.x/src/components/TableApi.js
Normal file
@@ -0,0 +1,30 @@
|
||||
import myaxios from '@/util/myaxios'
|
||||
export default {
|
||||
getItem(url) {
|
||||
return myaxios({
|
||||
url: url,
|
||||
method: 'get'
|
||||
})
|
||||
},
|
||||
addItem(url, data) {
|
||||
return myaxios({
|
||||
url: url,
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
},
|
||||
updateItem(url, data) {
|
||||
return myaxios({
|
||||
url: url,
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
},
|
||||
delItemList(url, Ids) {
|
||||
return myaxios({
|
||||
url: url,
|
||||
method: 'delete',
|
||||
data: Ids
|
||||
})
|
||||
},
|
||||
}
|
||||
37
Yi.Vue2.x/src/components/ViewIntro.vue
Normal file
37
Yi.Vue2.x/src/components/ViewIntro.vue
Normal file
@@ -0,0 +1,37 @@
|
||||
<template>
|
||||
<section class="mb-12 text-center">
|
||||
<h1
|
||||
class="mb-2 text-h3"
|
||||
v-text="heading"
|
||||
/>
|
||||
|
||||
<div
|
||||
v-if="link"
|
||||
class="text-body-2 font-weight-light"
|
||||
>
|
||||
Please checkout the <a
|
||||
:href="`https://vuetifyjs.com/en/${link}`"
|
||||
class="text-decoration-none secondary--text"
|
||||
target="_blank"
|
||||
>full documentation</a>
|
||||
</div>
|
||||
|
||||
<v-responsive
|
||||
class="text-center mx-auto text-body-1 font-weight-light"
|
||||
max-width="400"
|
||||
>
|
||||
<slot />
|
||||
</v-responsive>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ViewIntro',
|
||||
|
||||
props: {
|
||||
heading: String,
|
||||
link: String,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
29
Yi.Vue2.x/src/components/app/BarItem.vue
Normal file
29
Yi.Vue2.x/src/components/app/BarItem.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<script>
|
||||
import { VHover, VListItem } from 'vuetify/lib'
|
||||
|
||||
export default {
|
||||
name: 'AppBarItem',
|
||||
|
||||
render (h) {
|
||||
return h(VHover, {
|
||||
scopedSlots: {
|
||||
default: ({ hover }) => {
|
||||
return h(VListItem, {
|
||||
attrs: this.$attrs,
|
||||
class: {
|
||||
'black--text': !hover,
|
||||
'white--text secondary elevation-12': hover,
|
||||
},
|
||||
props: {
|
||||
activeClass: '',
|
||||
dark: hover,
|
||||
link: true,
|
||||
...this.$attrs,
|
||||
},
|
||||
}, this.$slots.default)
|
||||
},
|
||||
},
|
||||
})
|
||||
},
|
||||
}
|
||||
</script>
|
||||
22
Yi.Vue2.x/src/components/app/Btn.vue
Normal file
22
Yi.Vue2.x/src/components/app/Btn.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-btn
|
||||
:color="color"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppBtn',
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
12
Yi.Vue2.x/src/components/app/Card.vue
Normal file
12
Yi.Vue2.x/src/components/app/Card.vue
Normal file
@@ -0,0 +1,12 @@
|
||||
<template>
|
||||
<v-card
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default { name: 'AppCard' }
|
||||
</script>
|
||||
42
Yi.Vue2.x/src/components/app/Tabs.vue
Normal file
42
Yi.Vue2.x/src/components/app/Tabs.vue
Normal file
@@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<v-tabs
|
||||
:active-class="`${color} ${theme.isDark ? 'black' : 'white'}--text`"
|
||||
class="v-tabs--pill"
|
||||
hide-slider
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot />
|
||||
|
||||
<slot name="items" />
|
||||
</v-tabs>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AppTabs',
|
||||
|
||||
inject: ['theme'],
|
||||
|
||||
props: {
|
||||
color: {
|
||||
type: String,
|
||||
default: 'primary',
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-tabs--pill
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 24px
|
||||
|
||||
&.v-tabs--icons-and-text
|
||||
&:not(.v-tabs--vertical) > .v-tabs-bar
|
||||
height: 100px
|
||||
.v-tab,
|
||||
.v-tab:before
|
||||
border-radius: 4px
|
||||
</style>
|
||||
28
Yi.Vue2.x/src/components/ccAvatar.vue
Normal file
28
Yi.Vue2.x/src/components/ccAvatar.vue
Normal file
@@ -0,0 +1,28 @@
|
||||
<template>
|
||||
<v-avatar :size="size" >
|
||||
<!-- <img src="https://z3.ax1x.com/2021/05/09/gJadhD.jpg" /> -->
|
||||
<img
|
||||
:src="baseurl +'/image/'+$store.state.user.user.icon"
|
||||
/>
|
||||
</v-avatar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'ccAvatar',
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
data:()=>({
|
||||
baseurl: "",
|
||||
}),
|
||||
props: {
|
||||
size: {
|
||||
type: Number,
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
67
Yi.Vue2.x/src/components/ccCombobox.vue
Normal file
67
Yi.Vue2.x/src/components/ccCombobox.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<v-dialog v-model="dialog" persistent max-width="600px">
|
||||
<template v-slot:activator="{ on, attrs }">
|
||||
<v-btn class="ma-2" color="primary" dark v-bind="attrs" v-on="on">
|
||||
{{ headers }}
|
||||
</v-btn>
|
||||
</template>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="text-h5">{{ headers }}</span>
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-combobox
|
||||
v-model="select"
|
||||
:items="items"
|
||||
label="请点击选择"
|
||||
multiple
|
||||
chips
|
||||
:item-text="itemText"
|
||||
></v-combobox>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
<small>*可多选</small>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="dialog = false"> 关闭 </v-btn>
|
||||
<div @click="dialog = false"> <slot name="save" ></slot> </div>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
headers: {
|
||||
type: String
|
||||
},
|
||||
items:{
|
||||
type:Array
|
||||
},
|
||||
itemText:{
|
||||
type: String
|
||||
}
|
||||
},
|
||||
name: "ccCombobox",
|
||||
data() {
|
||||
return {
|
||||
dialog: false,
|
||||
select: [],
|
||||
};
|
||||
},
|
||||
watch:{
|
||||
select:{//深度监听，可监听到对象、数组的变化
|
||||
handler(val, oldVal){
|
||||
this.$emit("select",val);
|
||||
},
|
||||
deep:true
|
||||
}
|
||||
},
|
||||
};
|
||||
</script>
|
||||
245
Yi.Vue2.x/src/components/ccTable.vue
Normal file
245
Yi.Vue2.x/src/components/ccTable.vue
Normal file
@@ -0,0 +1,245 @@
|
||||
<template>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="desserts"
|
||||
sort-by="calories"
|
||||
class="elevation-1"
|
||||
item-key="id"
|
||||
show-select
|
||||
v-model="selected"
|
||||
:search="search"
|
||||
>
|
||||
<slot />
|
||||
<template v-slot:top>
|
||||
<!-- 搜索框 -->
|
||||
<v-toolbar flat>
|
||||
<v-spacer></v-spacer>
|
||||
<v-text-field
|
||||
v-model="search"
|
||||
append-icon="mdi-magnify"
|
||||
label="搜索"
|
||||
single-line
|
||||
hide-details
|
||||
class="mx-4"
|
||||
></v-text-field>
|
||||
|
||||
<v-btn
|
||||
v-if="axiosUrls.add != null"
|
||||
color="primary"
|
||||
dark
|
||||
class="mb-2 mx-2"
|
||||
@click="dialog = true"
|
||||
>
|
||||
添加新项
|
||||
</v-btn>
|
||||
|
||||
<!-- 添加提示框 -->
|
||||
<v-dialog
|
||||
v-if="axiosUrls.add != null"
|
||||
v-model="dialog"
|
||||
max-width="500px"
|
||||
>
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
v-for="(value, key, index) in editedItem"
|
||||
:key="index"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="editedItem[key]"
|
||||
:label="key"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-btn
|
||||
v-if="axiosUrls.del != null"
|
||||
color="secondary"
|
||||
class="mb-2"
|
||||
@click="deleteItem(null)"
|
||||
>
|
||||
删除所选
|
||||
</v-btn>
|
||||
</v-toolbar>
|
||||
</template>
|
||||
|
||||
<!-- 表格中的删除和修改 -->
|
||||
<template v-slot:item.actions="{ item }">
|
||||
<slot name="action" :item="item"></slot>
|
||||
|
||||
<v-icon
|
||||
v-if="axiosUrls.update != null"
|
||||
small
|
||||
class="mr-2"
|
||||
@click="editItem(item)"
|
||||
>
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
<v-icon v-if="axiosUrls.del != null" small @click="deleteItem(item)">
|
||||
mdi-delete
|
||||
</v-icon>
|
||||
</template>
|
||||
|
||||
<!-- 初始化 -->
|
||||
<template v-slot:no-data>
|
||||
<v-btn color="primary" @click="initialize"> 刷新 </v-btn>
|
||||
</template>
|
||||
</v-data-table>
|
||||
</template>
|
||||
<script>
|
||||
import itemApi from "./TableApi.js";
|
||||
export default {
|
||||
name: "ccTable",
|
||||
props: {
|
||||
defaultItem: {
|
||||
type: Object,
|
||||
},
|
||||
headers: {
|
||||
type: Array,
|
||||
},
|
||||
axiosUrls: {
|
||||
type: Object,
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
page: 1,
|
||||
selected: [],
|
||||
search: "",
|
||||
dialog: false,
|
||||
desserts: [],
|
||||
editedIndex: -1,
|
||||
editedItem: {},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
|
||||
watch: {
|
||||
axiosUrls: {
|
||||
handler(val, oldVal) {
|
||||
this.dataInit(val.get);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
selected: {
|
||||
handler(val, oldVal) {
|
||||
this.$emit("selected", val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
},
|
||||
|
||||
created() {
|
||||
this.initialize();
|
||||
},
|
||||
|
||||
methods: {
|
||||
dataInit(getStr) {
|
||||
itemApi.getItem(getStr).then((resp) => {
|
||||
const response = resp.data;
|
||||
this.desserts = response;
|
||||
});
|
||||
},
|
||||
initialize() {
|
||||
if(this.axiosUrls.get!=undefined && this.axiosUrls.get!=null )
|
||||
{
|
||||
this.dataInit(this.axiosUrls.get)
|
||||
}
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
// 添加和修改都打开同一个编辑框
|
||||
|
||||
editItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
async deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
|
||||
var p = await this.$dialog.warning({
|
||||
text: "你确定要删除此条记录吗？?",
|
||||
title: "警告",
|
||||
actions: {
|
||||
false: "取消",
|
||||
true: "确定",
|
||||
},
|
||||
});
|
||||
if (p) {
|
||||
this.deleteItemConfirm();
|
||||
}
|
||||
},
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selected.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
itemApi
|
||||
.delItemList(this.axiosUrls.del, Ids)
|
||||
.then(() => this.initialize());
|
||||
},
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
closeDelete() {
|
||||
this.dialogDelete = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
|
||||
save() {
|
||||
if (this.editedIndex > -1) {
|
||||
itemApi
|
||||
.updateItem(this.axiosUrls.update, this.editedItem)
|
||||
.then(() => this.initialize());
|
||||
} else {
|
||||
itemApi
|
||||
.addItem(this.axiosUrls.add, this.editedItem)
|
||||
.then(() => this.initialize());
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
227
Yi.Vue2.x/src/components/ccTreeview.vue
Normal file
227
Yi.Vue2.x/src/components/ccTreeview.vue
Normal file
@@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div>
|
||||
<v-divider></v-divider>
|
||||
<app-btn dark class="ma-4" @click="showAll"> 展开全部</app-btn>
|
||||
<app-btn dark class="my-4 mr-4" @click="dialog = true"> 添加新项 </app-btn>
|
||||
<app-btn dark class="my-4" color="secondary" @click="deleteItem(null)">
|
||||
删除所选
|
||||
</app-btn>
|
||||
|
||||
|
||||
|
||||
|
||||
<v-dialog v-model="dialog" max-width="500px">
|
||||
<v-card>
|
||||
<v-card-title>
|
||||
<span class="headline">{{ formTitle }}</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-text>
|
||||
<v-container>
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
sm="6"
|
||||
md="4"
|
||||
v-for="(value, key, index) in editedItem"
|
||||
:key="index"
|
||||
>
|
||||
<v-text-field
|
||||
v-model="editedItem[key]"
|
||||
:label="key"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
|
||||
<v-card-actions>
|
||||
<v-spacer></v-spacer>
|
||||
<v-btn color="blue darken-1" text @click="close"> 取消 </v-btn>
|
||||
<v-btn color="blue darken-1" text @click="save"> 保存 </v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-dialog>
|
||||
|
||||
<v-treeview
|
||||
ref="tree"
|
||||
open-on-click
|
||||
selectable
|
||||
:items="desserts"
|
||||
:selection-type="selectionType"
|
||||
v-model="selection"
|
||||
return-object
|
||||
open-all
|
||||
hoverable
|
||||
item-text="menu_name"
|
||||
>
|
||||
<template v-slot:append="{ item }">
|
||||
<v-btn class="mr-2">编号:{{ item.id }}</v-btn>
|
||||
<v-btn class="mr-2">图标:{{ item.icon }}</v-btn>
|
||||
<v-btn class="mr-2">路由:{{ item.router }}</v-btn>
|
||||
<v-btn v-if="item.mould" class="mr-2">接口名:{{ item.mould.mould_name }}</v-btn>
|
||||
<v-btn v-if="item.mould" class="mr-2" color="secondary">接口地址:{{ item.mould.url }}</v-btn>
|
||||
<ccCombobox
|
||||
headers="设置接口权限"
|
||||
itemText="url"
|
||||
:items="mouldList"
|
||||
@select="getSelect"
|
||||
>
|
||||
<template v-slot:save>
|
||||
<v-btn @click="setMould(item)" color="blue darken-1" text>
|
||||
保存</v-btn
|
||||
>
|
||||
</template>
|
||||
</ccCombobox>
|
||||
<app-btn
|
||||
@click="
|
||||
parentId = item.id;
|
||||
dialog = true;
|
||||
"
|
||||
>添加子菜单</app-btn
|
||||
>
|
||||
<app-btn class="mx-2" @click="editItem(item)">编辑</app-btn>
|
||||
|
||||
<app-btn color="secondary" class="mr-2" @click="deleteItem(item)">删除</app-btn>
|
||||
|
||||
</template>
|
||||
</v-treeview>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import mouldApi from "../api/mouldApi";
|
||||
import menuApi from "../api/menuApi";
|
||||
export default {
|
||||
name: "ccTreeview",
|
||||
|
||||
data: () => ({
|
||||
mouldSelect: [],
|
||||
mouldList: [],
|
||||
desserts: [],
|
||||
selectionType: "independent",
|
||||
selection: [],
|
||||
dialog: false,
|
||||
editedItem: {},
|
||||
editedIndex: -1,
|
||||
parentId: 0,
|
||||
defaultItem: {
|
||||
icon: "mdi-start",
|
||||
router: "test",
|
||||
menu_name: "测试",
|
||||
is_show:1
|
||||
},
|
||||
}),
|
||||
computed: {
|
||||
formTitle() {
|
||||
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
showAll(){
|
||||
this.$refs.tree.updateAll(true);
|
||||
},
|
||||
|
||||
setMould(item) {
|
||||
menuApi.SetMouldByMenu(item.id, this.mouldSelect[0].id).then((resp) => {
|
||||
this.$dialog.notify.info(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
|
||||
getSelect(data) {
|
||||
this.mouldSelect = data;
|
||||
},
|
||||
async deleteItem(item) {
|
||||
this.editedIndex = this.desserts.indexOf(item);
|
||||
this.editedItem = Object.assign({}, item);
|
||||
var p = await this.$dialog.warning({
|
||||
text: "你确定要删除此条记录吗？?",
|
||||
title: "警告",
|
||||
actions: {
|
||||
false: "取消",
|
||||
true: "确定",
|
||||
},
|
||||
});
|
||||
if (p) {
|
||||
this.deleteItemConfirm();
|
||||
}
|
||||
},
|
||||
deleteItemConfirm() {
|
||||
var Ids = [];
|
||||
if (this.editedIndex > -1) {
|
||||
Ids.push(this.editedItem.id);
|
||||
} else {
|
||||
this.selection.forEach(function (item) {
|
||||
Ids.push(item.id);
|
||||
});
|
||||
}
|
||||
menuApi.DelListMenu(Ids).then(() => this.init());
|
||||
},
|
||||
|
||||
close() {
|
||||
this.dialog = false;
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
},
|
||||
init() {
|
||||
this.parentId = 0;
|
||||
mouldApi.getMould().then((resp) => {
|
||||
this.mouldList = resp.data;
|
||||
});
|
||||
|
||||
menuApi.GetMenuInMould().then((resp) => {
|
||||
this.desserts =[ resp.data];
|
||||
});
|
||||
this.$nextTick(() => {
|
||||
this.editedItem = Object.assign({}, this.defaultItem);
|
||||
this.editedIndex = -1;
|
||||
});
|
||||
|
||||
|
||||
|
||||
},
|
||||
editItem(item) {
|
||||
this.editedIndex = item.id;
|
||||
this.editedItem = Object.assign({}, item);
|
||||
this.dialog = true;
|
||||
},
|
||||
|
||||
save() {
|
||||
if (this.editedIndex > -1) {
|
||||
menuApi.UpdateMenu(this.editedItem).then(() => this.init());
|
||||
} else {
|
||||
if (this.parentId == 0) {
|
||||
menuApi.AddTopMenu(this.editedItem).then(() => {
|
||||
this.init();
|
||||
});
|
||||
} else {
|
||||
menuApi.addChildrenMenu(this.parentId, this.editedItem).then(() => {
|
||||
this.init();
|
||||
});
|
||||
}
|
||||
}
|
||||
this.close();
|
||||
},
|
||||
},
|
||||
watch: {
|
||||
selection: {
|
||||
//深度监听，可监听到对象、数组的变化
|
||||
handler(val, oldVal) {
|
||||
this.$emit("selection", val);
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
dialog(val) {
|
||||
val || this.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
79
Yi.Vue2.x/src/layouts/default/AppBar.vue
Normal file
79
Yi.Vue2.x/src/layouts/default/AppBar.vue
Normal file
@@ -0,0 +1,79 @@
|
||||
<template>
|
||||
<v-app-bar
|
||||
id="default-app-bar"
|
||||
app
|
||||
absolute
|
||||
class="v-bar--underline"
|
||||
color="transparent"
|
||||
:clipped-left="$vuetify.rtl"
|
||||
:clipped-right="!$vuetify.rtl"
|
||||
height="70"
|
||||
flat
|
||||
>
|
||||
<v-app-bar-nav-icon class="hidden-md-and-up" @click="$store.state.home.drawer = !$store.state.home.drawer;" />
|
||||
|
||||
<default-drawer-toggle class="hidden-sm-and-down" />
|
||||
|
||||
<v-toolbar-title class="font-weight-light text-h5" v-text="name" />
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<default-search class="hidden-sm-and-down" />
|
||||
|
||||
<default-go-home />
|
||||
|
||||
<default-notifications />
|
||||
|
||||
<default-account />
|
||||
|
||||
</v-app-bar>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
|
||||
data: () => ({
|
||||
name: "系统",
|
||||
}),
|
||||
name: "DefaultBar",
|
||||
|
||||
components: {
|
||||
DefaultAccount: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-account" */
|
||||
"./widgets/Account"
|
||||
),
|
||||
DefaultDrawerToggle: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-drawer-toggle" */
|
||||
"./widgets/DrawerToggle"
|
||||
),
|
||||
DefaultGoHome: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-go-home" */
|
||||
"./widgets/GoHome"
|
||||
),
|
||||
DefaultNotifications: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-notifications" */
|
||||
"./widgets/Notifications"
|
||||
),
|
||||
DefaultSearch: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-search" */
|
||||
"./widgets/Search"
|
||||
),
|
||||
},
|
||||
|
||||
// computed: {
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// name: get('route/name'),
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
141
Yi.Vue2.x/src/layouts/default/Drawer.vue
Normal file
141
Yi.Vue2.x/src/layouts/default/Drawer.vue
Normal file
@@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<v-navigation-drawer
|
||||
id="default-drawer"
|
||||
v-model="$store.state.home.drawer"
|
||||
:dark="dark"
|
||||
:right="$vuetify.rtl"
|
||||
:src="drawerImage ? image : ''"
|
||||
:mini-variant.sync="$store.state.home.mini"
|
||||
mini-variant-width="80"
|
||||
app
|
||||
width="260"
|
||||
>
|
||||
<template v-if="drawerImage" #img="props">
|
||||
<v-img :key="image" :gradient="gradient" v-bind="props" />
|
||||
</template>
|
||||
|
||||
<div class="px-2">
|
||||
<default-drawer-header />
|
||||
|
||||
<v-divider class="mx-3 mb-2" />
|
||||
|
||||
<default-list :items="items" />
|
||||
</div>
|
||||
|
||||
<template #append>
|
||||
<div class="pa-4 text-center">
|
||||
<app-btn
|
||||
class="text-none mb-4"
|
||||
color="white"
|
||||
href="https://vuetifyjs.com"
|
||||
small
|
||||
text
|
||||
>
|
||||
Documentation
|
||||
</app-btn>
|
||||
|
||||
<app-btn block class="text-none" color="secondary" @click="logout">
|
||||
<v-icon left> mdi-package-up </v-icon>
|
||||
|
||||
退出
|
||||
</app-btn>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="pt-12" />
|
||||
</v-navigation-drawer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
import userApi from "@/api/userApi";
|
||||
export default {
|
||||
methods: {
|
||||
init() {
|
||||
userApi.GetMenuByHttpUser().then((resp) => {
|
||||
this.items = resp.data.children;
|
||||
});
|
||||
},
|
||||
logout() {
|
||||
this.$store.dispatch("Logout").then((resp) => {
|
||||
this.$router.push({ path: "/login" });
|
||||
});
|
||||
},
|
||||
},
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
computed: {
|
||||
image() {
|
||||
return this.$store.getters.image;
|
||||
},
|
||||
gradient() {
|
||||
return this.$store.getters.gradient;
|
||||
},
|
||||
drawerImage()
|
||||
{
|
||||
return this.$store.state.home.drawerImage;
|
||||
},
|
||||
dark()
|
||||
{
|
||||
return this.$store.state.user.dark;
|
||||
}
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
|
||||
items: [],
|
||||
}),
|
||||
name: "DefaultDrawer",
|
||||
|
||||
components: {
|
||||
DefaultDrawerHeader: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-drawer-header" */
|
||||
"./widgets/DrawerHeader"
|
||||
),
|
||||
DefaultList: () =>
|
||||
import(
|
||||
/* webpackChunkName: "default-list" */
|
||||
"./List"
|
||||
),
|
||||
},
|
||||
// computed: {
|
||||
// ...get('user', [
|
||||
// 'dark',
|
||||
// 'gradient',
|
||||
// 'image',
|
||||
// ]),
|
||||
// ...get('app', [
|
||||
// 'items',
|
||||
// 'version',
|
||||
// ]),
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'drawerImage',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// },
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
#default-drawer
|
||||
.v-list-item
|
||||
margin-bottom: 8px
|
||||
|
||||
.v-list-item::before,
|
||||
.v-list-item::after
|
||||
display: none
|
||||
|
||||
.v-list-group__header__prepend-icon,
|
||||
.v-list-item__icon
|
||||
margin-top: 12px
|
||||
margin-bottom: 12px
|
||||
margin-left: 4px
|
||||
|
||||
&.v-navigation-drawer--mini-variant
|
||||
.v-list-item
|
||||
justify-content: flex-start !important
|
||||
</style>
|
||||
22
Yi.Vue2.x/src/layouts/default/Footer.vue
Normal file
22
Yi.Vue2.x/src/layouts/default/Footer.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<v-footer
|
||||
id="default-footer"
|
||||
color="transparent"
|
||||
absolute
|
||||
app
|
||||
inset
|
||||
>
|
||||
<links />
|
||||
</v-footer>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Components
|
||||
import Links from '@/components/Links'
|
||||
|
||||
export default {
|
||||
name: 'DefaultFooter',
|
||||
|
||||
components: { Links },
|
||||
}
|
||||
</script>
|
||||
43
Yi.Vue2.x/src/layouts/default/Index.vue
Normal file
43
Yi.Vue2.x/src/layouts/default/Index.vue
Normal file
@@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<v-app>
|
||||
|
||||
<default-bar />
|
||||
|
||||
<default-drawer />
|
||||
|
||||
<default-view />
|
||||
|
||||
<default-footer />
|
||||
|
||||
<default-settings />
|
||||
</v-app>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultLayout',
|
||||
|
||||
components: {
|
||||
DefaultBar: () => import(
|
||||
/* webpackChunkName: "default-app-bar" */
|
||||
'./AppBar'
|
||||
),
|
||||
DefaultDrawer: () => import(
|
||||
/* webpackChunkName: "default-drawer" */
|
||||
'./Drawer'
|
||||
),
|
||||
DefaultFooter: () => import(
|
||||
/* webpackChunkName: "default-footer" */
|
||||
'./Footer'
|
||||
),
|
||||
DefaultSettings: () => import(
|
||||
/* webpackChunkName: "default-settings" */
|
||||
'./Settings'
|
||||
),
|
||||
DefaultView: () => import(
|
||||
/* webpackChunkName: "default-view" */
|
||||
'./View'
|
||||
),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
40
Yi.Vue2.x/src/layouts/default/List.vue
Normal file
40
Yi.Vue2.x/src/layouts/default/List.vue
Normal file
@@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<v-list
|
||||
expand
|
||||
nav
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<template v-for="(item, i) in items">
|
||||
<default-list-group
|
||||
v-if="item.children"
|
||||
:key="`group-${i}`"
|
||||
:item="item"
|
||||
/>
|
||||
|
||||
<default-list-item
|
||||
v-else
|
||||
:key="`item-${i}`"
|
||||
:item="item"
|
||||
/>
|
||||
</template>
|
||||
</v-list>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultList',
|
||||
|
||||
components: {
|
||||
DefaultListGroup: () => import('./ListGroup'),
|
||||
DefaultListItem: () => import('./ListItem'),
|
||||
},
|
||||
|
||||
props: {
|
||||
items: {
|
||||
type: Array,
|
||||
default: () => ([]),
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
91
Yi.Vue2.x/src/layouts/default/ListGroup.vue
Normal file
91
Yi.Vue2.x/src/layouts/default/ListGroup.vue
Normal file
@@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<v-list-group
|
||||
|
||||
:group="group"
|
||||
:prepend-icon="item.icon"
|
||||
eager
|
||||
v-bind="$attrs"
|
||||
>
|
||||
<template v-slot:activator>
|
||||
<v-list-item-icon
|
||||
v-if="!item.icon && !item.avatar"
|
||||
class="text-caption text-uppercase text-center my-2 align-self-center"
|
||||
style="margin-top: 14px"
|
||||
>
|
||||
{{ title }}
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-avatar v-if="item.avatar">
|
||||
<v-img :src="item.avatar" />
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content v-if="item.menu_name">
|
||||
<v-list-item-title v-text="item.menu_name" />
|
||||
</v-list-item-content>
|
||||
</template>
|
||||
|
||||
<template v-for="(child, i) in item.children">
|
||||
<default-list-group
|
||||
v-if="child.children"
|
||||
:key="`sub-group-${i}`"
|
||||
:item="child"
|
||||
/>
|
||||
|
||||
<default-list-item
|
||||
v-if="!child.children"
|
||||
:key="`child-${i}`"
|
||||
:item="child"
|
||||
/>
|
||||
</template>
|
||||
</v-list-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'DefaultListGroup',
|
||||
|
||||
components: {
|
||||
DefaultListItem: () => import('./ListItem'),
|
||||
},
|
||||
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
|
||||
group () {
|
||||
return this.genGroup(this.item.children)
|
||||
},
|
||||
title () {
|
||||
const matches = this.item.menu_name.match(/\b(\w)/g)
|
||||
if(matches!=null)
|
||||
{
|
||||
return matches.join('')
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
genGroup (items) {
|
||||
return items.reduce((acc, cur) => {
|
||||
if (!cur.router) return acc
|
||||
|
||||
acc.push(
|
||||
cur.children
|
||||
? this.genGroup(cur.children)
|
||||
: cur.router.slice(1, -1),
|
||||
)
|
||||
|
||||
return acc
|
||||
}, []).join('|')
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
58
Yi.Vue2.x/src/layouts/default/ListItem.vue
Normal file
58
Yi.Vue2.x/src/layouts/default/ListItem.vue
Normal file
@@ -0,0 +1,58 @@
|
||||
<template>
|
||||
<v-list-item
|
||||
:href="item.href"
|
||||
:rel="item.href ? 'nofollow' : undefined"
|
||||
:target="item.href ? '_blank' : undefined"
|
||||
:to="item.router"
|
||||
active-class="primary white--text"
|
||||
link
|
||||
class="py-1"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<v-list-item-icon
|
||||
v-if="!item.icon"
|
||||
class="text-caption text-uppercase justify-center ml-1 my-2 align-self-center"
|
||||
>
|
||||
{{ title }}
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-avatar v-if="item.avatar">
|
||||
<v-img :src="item.avatar" />
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-icon
|
||||
v-if="item.icon"
|
||||
class="my-2 align-self-center"
|
||||
>
|
||||
<v-icon v-text="item.icon" />
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content v-if="item.menu_name">
|
||||
<v-list-item-title v-text="item.menu_name" />
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultListItem',
|
||||
|
||||
props: {
|
||||
item: {
|
||||
type: Object,
|
||||
default: () => ({}),
|
||||
},
|
||||
},
|
||||
|
||||
computed: {
|
||||
title () {
|
||||
const matches = this.item.menu_name.match(/\b(\w)/g)
|
||||
if(matches!=null)
|
||||
{
|
||||
return matches.join('')
|
||||
}
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
303
Yi.Vue2.x/src/layouts/default/Settings.vue
Normal file
303
Yi.Vue2.x/src/layouts/default/Settings.vue
Normal file
@@ -0,0 +1,303 @@
|
||||
<template>
|
||||
<div id="settings-wrapper">
|
||||
<v-card
|
||||
id="settings"
|
||||
class="py-2 px-4"
|
||||
color="rgba(0, 0, 0, .3)"
|
||||
dark
|
||||
flat
|
||||
link
|
||||
min-width="100"
|
||||
style="
|
||||
position: fixed;
|
||||
top: 115px;
|
||||
right: -35px;
|
||||
border-radius: 8px;
|
||||
z-index: 1;
|
||||
"
|
||||
>
|
||||
<v-icon large> mdi-cog </v-icon>
|
||||
</v-card>
|
||||
|
||||
<v-menu
|
||||
v-model="menu"
|
||||
:close-on-content-click="false"
|
||||
activator="#settings"
|
||||
bottom
|
||||
content-class="v-settings"
|
||||
left
|
||||
nudge-left="8"
|
||||
offset-x
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<v-card class="text-center mb-0" width="300">
|
||||
<v-card-text>
|
||||
<strong class="mb-3 d-inline-block">主题颜色</strong>
|
||||
|
||||
<v-item-group v-model="color" mandatory>
|
||||
<v-item v-for="color in colors" :key="color" :value="color">
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-avatar
|
||||
:class="active && 'v-settings__item--active'"
|
||||
:color="color"
|
||||
class="v-settings__item mx-1"
|
||||
size="25"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<strong class="mb-3 d-inline-block">图层颜色</strong>
|
||||
|
||||
<v-item-group v-model="gradient" mandatory>
|
||||
<v-item
|
||||
v-for="(scrim, index) in gradients"
|
||||
:key="scrim"
|
||||
:value="index"
|
||||
class="mx-1"
|
||||
>
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-avatar
|
||||
:class="active && 'v-settings__item--active'"
|
||||
:color="scrim"
|
||||
class="v-settings__item"
|
||||
size="24"
|
||||
@click="toggle"
|
||||
/>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 主题模式 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="$vuetify.theme.dark"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 迷你菜单 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="$store.state.home.mini"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<v-row align="center" no-gutters>
|
||||
<v-col cols="auto"> 图片菜单 </v-col>
|
||||
|
||||
<v-spacer />
|
||||
|
||||
<v-col cols="auto">
|
||||
<v-switch
|
||||
v-model="drawerImage"
|
||||
class="ma-0 pa-0"
|
||||
color="secondary"
|
||||
hide-details
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
|
||||
<v-divider class="my-4 secondary" />
|
||||
|
||||
<strong class="mb-3 d-inline-block">图片</strong>
|
||||
|
||||
<v-card :disabled="!drawerImage" flat>
|
||||
<v-item-group
|
||||
v-model="image"
|
||||
class="d-flex justify-space-between mb-3"
|
||||
>
|
||||
<v-item
|
||||
v-for="(img, index) in images"
|
||||
:key="img"
|
||||
:value="index"
|
||||
class="mx-1"
|
||||
>
|
||||
<template v-slot="{ active, toggle }">
|
||||
<v-sheet
|
||||
:class="active && 'v-settings__item--active'"
|
||||
class="d-inline-block v-settings__item"
|
||||
@click="toggle"
|
||||
>
|
||||
<v-img :src="img" height="100" width="50" />
|
||||
</v-sheet>
|
||||
</template>
|
||||
</v-item>
|
||||
</v-item-group>
|
||||
</v-card>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
class="mb-3"
|
||||
color="grey darken-1"
|
||||
dark
|
||||
href="https://github.com/ccnetcore/yi"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
Github 地址
|
||||
</v-btn>
|
||||
|
||||
<v-btn
|
||||
block
|
||||
color="info"
|
||||
href="https://ccnetcore.com"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
加入我们
|
||||
</v-btn>
|
||||
|
||||
<div class="my-12" />
|
||||
|
||||
<div>
|
||||
<strong class="mb-3 d-inline-block">感谢你的支持！</strong>
|
||||
</div>
|
||||
|
||||
<v-btn class="ma-1" color="#55acee" dark rounded>
|
||||
<v-icon>mdi-twitter</v-icon>
|
||||
- 45
|
||||
</v-btn>
|
||||
|
||||
<v-btn class="ma-1" color="#3b5998" dark default rounded>
|
||||
<v-icon>mdi-facebook</v-icon>
|
||||
- 50
|
||||
</v-btn>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-menu>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Mixins
|
||||
import Proxyable from "vuetify/lib/mixins/proxyable";
|
||||
|
||||
// Vuex
|
||||
// import { get, sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: "DashboardCoreSettings",
|
||||
|
||||
mixins: [Proxyable],
|
||||
computed: {
|
||||
|
||||
|
||||
gradients(){
|
||||
return this.$store.state.user.gradients},
|
||||
image:{
|
||||
get(){
|
||||
return this.$store.state.user.drawer.image;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetImage',value)
|
||||
}
|
||||
},
|
||||
gradient:{
|
||||
get(){
|
||||
return this.$store.state.user.drawer.gradient;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetGradient',value)
|
||||
}
|
||||
},
|
||||
images()
|
||||
{
|
||||
return this.$store.state.user.images;
|
||||
},
|
||||
drawerImage:
|
||||
{
|
||||
get(){
|
||||
return this.$store.state.home.drawerImage;
|
||||
},
|
||||
set(value){
|
||||
this.$store.commit('SetDrawerImage',value)
|
||||
},
|
||||
|
||||
|
||||
|
||||
},
|
||||
dark()
|
||||
{
|
||||
return this.$store.state.user.dark;
|
||||
},
|
||||
drawer()
|
||||
{
|
||||
return this.$store.state.home.drawer;
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
data: () => ({
|
||||
color: "#E91E63",
|
||||
colors: ["#9C27b0", "#00CAE3", "#4CAF50", "#ff9800", "#E91E63", "#FF5252"],
|
||||
menu: false,
|
||||
saveImage: "",
|
||||
}),
|
||||
|
||||
// computed: {
|
||||
// ...sync('app', [
|
||||
// 'drawer',
|
||||
// 'drawerImage',
|
||||
// 'mini',
|
||||
// ]),
|
||||
// ...sync('user', [
|
||||
// 'drawer@gradient',
|
||||
// 'drawer@image',
|
||||
// ]),
|
||||
// ...get('user', [
|
||||
// 'images',
|
||||
// 'gradients',
|
||||
// ]),
|
||||
// },
|
||||
|
||||
watch: {
|
||||
color(val) {
|
||||
|
||||
this.$vuetify.theme.themes[this.isDark ? "dark" : "light"].primary = val;
|
||||
this.$vuetify.theme.dark=true;
|
||||
this.$vuetify.theme.dark=false;
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="sass">
|
||||
.v-settings
|
||||
.v-item-group > *
|
||||
cursor: pointer
|
||||
|
||||
&__item
|
||||
border-width: 3px
|
||||
border-style: solid
|
||||
border-color: transparent !important
|
||||
|
||||
&--active
|
||||
border-color: #00cae3 !important
|
||||
</style>
|
||||
20
Yi.Vue2.x/src/layouts/default/View.vue
Normal file
20
Yi.Vue2.x/src/layouts/default/View.vue
Normal file
@@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<v-main>
|
||||
<v-container fluid>
|
||||
<v-progress-linear
|
||||
:active="this.$store.state.loader.load"
|
||||
:indeterminate="this.$store.state.loader.load"
|
||||
background-color="primary lighten-4"
|
||||
color="primary lighten-1"
|
||||
striped
|
||||
></v-progress-linear>
|
||||
<router-view :key="$route.path" />
|
||||
</v-container>
|
||||
</v-main>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultView',
|
||||
}
|
||||
</script>
|
||||
50
Yi.Vue2.x/src/layouts/default/widgets/Account.vue
Normal file
50
Yi.Vue2.x/src/layouts/default/widgets/Account.vue
Normal file
@@ -0,0 +1,50 @@
|
||||
<template>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
min-width="200"
|
||||
offset-y
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-btn class="ml-2" min-width="0" text v-bind="attrs" v-on="on">
|
||||
<!-- <v-icon>mdi-account</v-icon> -->
|
||||
<ccAvatar :size="36" class="elevation-2"></ccAvatar>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list :tile="false" flat nav>
|
||||
<app-bar-item to="/"
|
||||
><v-list-item-title v-text="'用户名：'+$store.state.user.user.username"
|
||||
/></app-bar-item>
|
||||
<app-bar-item to="/"
|
||||
><v-list-item-title v-text="'称号：'+$store.state.user.user.nick"
|
||||
/></app-bar-item>
|
||||
|
||||
<v-divider class="mb-2 mt-2" />
|
||||
|
||||
<template v-for="(p, i) in profile">
|
||||
<v-divider v-if="p.divider" :key="`divider-${i}`" class="mb-2 mt-2" />
|
||||
|
||||
<app-bar-item v-else :key="`item-${i}`" to="/">
|
||||
<v-list-item-title v-text="p.title" />
|
||||
</app-bar-item>
|
||||
</template>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "DefaultAccount",
|
||||
data: () => ({
|
||||
profile: [
|
||||
{ title: "用户信息" },
|
||||
{ title: "设置" },
|
||||
{ divider: true },
|
||||
{ title: "登出" },
|
||||
],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
39
Yi.Vue2.x/src/layouts/default/widgets/AccountSettings.vue
Normal file
39
Yi.Vue2.x/src/layouts/default/widgets/AccountSettings.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<default-list
|
||||
:items="items"
|
||||
class="mb-n2"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultAccountSettings',
|
||||
|
||||
components: {
|
||||
DefaultList: () => import(
|
||||
/* webpackChunkName: "default-list" */
|
||||
'../List'
|
||||
),
|
||||
},
|
||||
|
||||
data: () => ({
|
||||
items: [
|
||||
{
|
||||
title: 'John Leider',
|
||||
icon: 'mdi-vuetify',
|
||||
items: [
|
||||
{
|
||||
title: 'My Profile',
|
||||
},
|
||||
{
|
||||
title: 'Edit Profile',
|
||||
},
|
||||
{
|
||||
title: 'Settings',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
29
Yi.Vue2.x/src/layouts/default/widgets/DrawerHeader.vue
Normal file
29
Yi.Vue2.x/src/layouts/default/widgets/DrawerHeader.vue
Normal file
@@ -0,0 +1,29 @@
|
||||
<template>
|
||||
<v-list-item class="mb-0 justify-space-between pl-3">
|
||||
<v-list-item-avatar>
|
||||
<v-img
|
||||
:src="
|
||||
require('@/assets/vmd.svg')"
|
||||
/>
|
||||
</v-list-item-avatar>
|
||||
|
||||
<v-list-item-content class="pl-2">
|
||||
<v-list-item-title class="text-h3">
|
||||
<strong class="mr-1 font-weight-black">Yi</strong>
|
||||
|
||||
<span class="primary--text">Framework</span>
|
||||
</v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
name: 'DefaultDrawerHeader',
|
||||
|
||||
// computed: { version: get('app/version') },
|
||||
}
|
||||
</script>
|
||||
31
Yi.Vue2.x/src/layouts/default/widgets/DrawerToggle.vue
Normal file
31
Yi.Vue2.x/src/layouts/default/widgets/DrawerToggle.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-btn
|
||||
class="ml-3 mr-4"
|
||||
elevation="1"
|
||||
fab
|
||||
small
|
||||
@click="$store.state.home.mini = !$store.state.home.mini"
|
||||
>
|
||||
<v-icon>
|
||||
{{ $store.state.home.mini ? 'mdi-format-list-bulleted' : 'mdi-dots-vertical' }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { sync } from 'vuex-pathify'
|
||||
|
||||
export default {
|
||||
|
||||
data:()=>({
|
||||
|
||||
}),
|
||||
name: 'DefaultDrawerToggle',
|
||||
|
||||
computed: {
|
||||
|
||||
// mini: sync('app/mini'),
|
||||
},
|
||||
}
|
||||
</script>
|
||||
17
Yi.Vue2.x/src/layouts/default/widgets/GoHome.vue
Normal file
17
Yi.Vue2.x/src/layouts/default/widgets/GoHome.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
min-width="0"
|
||||
text
|
||||
to="/"
|
||||
exact
|
||||
>
|
||||
<v-icon>mdi-view-dashboard</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultGoHome',
|
||||
}
|
||||
</script>
|
||||
62
Yi.Vue2.x/src/layouts/default/widgets/Notifications.vue
Normal file
62
Yi.Vue2.x/src/layouts/default/widgets/Notifications.vue
Normal file
@@ -0,0 +1,62 @@
|
||||
<template>
|
||||
<v-menu
|
||||
bottom
|
||||
left
|
||||
offset-y
|
||||
origin="top right"
|
||||
transition="scale-transition"
|
||||
>
|
||||
<template v-slot:activator="{ attrs, on }">
|
||||
<v-btn
|
||||
class="ml-2"
|
||||
min-width="0"
|
||||
text
|
||||
v-bind="attrs"
|
||||
v-on="on"
|
||||
>
|
||||
<v-badge
|
||||
bordered
|
||||
color="red"
|
||||
overlap
|
||||
>
|
||||
<template v-slot:badge>
|
||||
<span>5</span>
|
||||
</template>
|
||||
|
||||
<v-icon>mdi-bell</v-icon>
|
||||
</v-badge>
|
||||
</v-btn>
|
||||
</template>
|
||||
|
||||
<v-list
|
||||
flat
|
||||
nav
|
||||
>
|
||||
<app-bar-item
|
||||
v-for="(n, i) in notifications"
|
||||
:key="i"
|
||||
link
|
||||
>
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>{{ n }} </v-list-item-title>
|
||||
</v-list-item-content>
|
||||
</app-bar-item>
|
||||
</v-list>
|
||||
</v-menu>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultNotifications',
|
||||
|
||||
data: () => ({
|
||||
notifications: [
|
||||
'临时消息1，请检查邮箱',
|
||||
'临时消息2，请检查邮箱',
|
||||
'临时消息3，请检查邮箱',
|
||||
'临时消息4，请检查邮箱',
|
||||
'临时消息5，请检查邮箱',
|
||||
],
|
||||
}),
|
||||
}
|
||||
</script>
|
||||
31
Yi.Vue2.x/src/layouts/default/widgets/Search.vue
Normal file
31
Yi.Vue2.x/src/layouts/default/widgets/Search.vue
Normal file
@@ -0,0 +1,31 @@
|
||||
<template>
|
||||
<v-text-field
|
||||
placeholder="全站搜索"
|
||||
class="mr-16"
|
||||
color="secondary"
|
||||
hide-details
|
||||
style="max-width: 400px"
|
||||
>
|
||||
<template
|
||||
v-if="$vuetify.breakpoint.mdAndUp"
|
||||
v-slot:append-outer
|
||||
>
|
||||
<v-btn
|
||||
class="mt-n2 ml-n2"
|
||||
fab
|
||||
small
|
||||
elevation="2"
|
||||
height="44"
|
||||
width="44"
|
||||
>
|
||||
<v-icon>mdi-magnify</v-icon>
|
||||
</v-btn>
|
||||
</template>
|
||||
</v-text-field>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'DefaultSearch',
|
||||
}
|
||||
</script>
|
||||
38
Yi.Vue2.x/src/layouts/login/Index.vue
Normal file
38
Yi.Vue2.x/src/layouts/login/Index.vue
Normal file
@@ -0,0 +1,38 @@
|
||||
<template>
|
||||
<v-app>
|
||||
<div class="auth-wrapper auth-v1">
|
||||
|
||||
<div class="auth-inner">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
<!-- background triangle shape -->
|
||||
<img
|
||||
class="auth-mask-bg"
|
||||
height="173"
|
||||
:src="
|
||||
require(`@/assets/mask-${$vuetify.theme.dark ? 'dark' : 'light'}.png`)
|
||||
"
|
||||
/>
|
||||
|
||||
<!-- tree -->
|
||||
<v-img
|
||||
class="auth-tree"
|
||||
width="247"
|
||||
height="185"
|
||||
src="@/assets/tree.png"
|
||||
></v-img>
|
||||
|
||||
<!-- tree -->
|
||||
<v-img
|
||||
class="auth-tree-3"
|
||||
width="377"
|
||||
height="289"
|
||||
src="@/assets/tree-3.png"
|
||||
></v-img>
|
||||
</div>
|
||||
</v-app>
|
||||
</template>
|
||||
<style lang="scss">
|
||||
@import "@/styles/auth.scss";
|
||||
</style>
|
||||
24
Yi.Vue2.x/src/main.js
Normal file
24
Yi.Vue2.x/src/main.js
Normal file
@@ -0,0 +1,24 @@
|
||||
import Vue from 'vue'
|
||||
import App from './App.vue'
|
||||
import router from './router'
|
||||
import vuetify from './plugins/vuetify'
|
||||
import VuetifyDialog from 'vuetify-dialog'
|
||||
import 'vuetify-dialog/dist/vuetify-dialog.css'
|
||||
import './plugins'
|
||||
import "./permission"
|
||||
import store from './store/index'
|
||||
|
||||
Vue.config.productionTip = false
|
||||
Vue.use(VuetifyDialog, {
|
||||
context: {
|
||||
vuetify
|
||||
}
|
||||
});
|
||||
let vm = new Vue({
|
||||
router,
|
||||
store,
|
||||
vuetify,
|
||||
render: function(h) { return h(App) }
|
||||
}).$mount('#app')
|
||||
|
||||
export default vm;
|
||||
18
Yi.Vue2.x/src/permission.js
Normal file
18
Yi.Vue2.x/src/permission.js
Normal file
@@ -0,0 +1,18 @@
|
||||
import router from './router/index'
|
||||
import store from './store/index'
|
||||
// import accountApi from '@/api/accountApi'
|
||||
|
||||
|
||||
router.beforeEach((to, from, next) => {
|
||||
const user = store.state.user.user; //获取是有user
|
||||
if (!user) { //如果没有登入
|
||||
if (to.path == '/login/' || to.path == '/register/' || to.path == '/reset_password/' || to.path == '/qq/') {
|
||||
next();
|
||||
} else {
|
||||
next({ path: '/login/' });
|
||||
}
|
||||
} else {
|
||||
next();
|
||||
}
|
||||
|
||||
})
|
||||
20
Yi.Vue2.x/src/plugins/app.js
Normal file
20
Yi.Vue2.x/src/plugins/app.js
Normal file
@@ -0,0 +1,20 @@
|
||||
/**
|
||||
* plugins/app.js
|
||||
*
|
||||
* Automatically loads and bootstraps files
|
||||
* in the `./src/components/` folder.
|
||||
*/
|
||||
|
||||
// Imports
|
||||
import Vue from 'vue'
|
||||
|
||||
const requireComponent = require.context('@/components', true, /\.vue$/)
|
||||
|
||||
for (const file of requireComponent.keys()) {
|
||||
const componentConfig = requireComponent(file)
|
||||
|
||||
Vue.component(
|
||||
componentConfig.default.name,
|
||||
componentConfig.default || componentConfig,
|
||||
)
|
||||
}
|
||||
4
Yi.Vue2.x/src/plugins/chartist.js
Normal file
4
Yi.Vue2.x/src/plugins/chartist.js
Normal file
@@ -0,0 +1,4 @@
|
||||
import Vue from 'vue'
|
||||
import 'chartist/dist/chartist.min.css'
|
||||
|
||||
Vue.use(require('vue-chartist'))
|
||||
6
Yi.Vue2.x/src/plugins/index.js
Normal file
6
Yi.Vue2.x/src/plugins/index.js
Normal file
@@ -0,0 +1,6 @@
|
||||
// Automatically included in './src/main.js'
|
||||
|
||||
import './app'
|
||||
import './chartist'
|
||||
// import './webfontloader'
|
||||
// import './vue-meta'
|
||||
30
Yi.Vue2.x/src/plugins/vuetify.js
Normal file
30
Yi.Vue2.x/src/plugins/vuetify.js
Normal file
@@ -0,0 +1,30 @@
|
||||
// Vuetify Documentation https://vuetifyjs.com
|
||||
|
||||
import Vue from 'vue'
|
||||
import Vuetify from 'vuetify/lib/framework'
|
||||
import ripple from 'vuetify/lib/directives/ripple'
|
||||
|
||||
Vue.use(Vuetify, { directives: { ripple } })
|
||||
|
||||
const theme = {
|
||||
primary: '#E91E63',
|
||||
secondary: '#9C27b0',
|
||||
accent: '#e91e63',
|
||||
info: '#00CAE3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FB8C00',
|
||||
error: '#FF5252',
|
||||
}
|
||||
|
||||
export default new Vuetify({
|
||||
breakpoint: { mobileBreakpoint: 960 },
|
||||
icons: {
|
||||
values: { expand: 'mdi-menu-down' },
|
||||
},
|
||||
theme: {
|
||||
themes: {
|
||||
dark: theme,
|
||||
light: theme,
|
||||
},
|
||||
},
|
||||
})
|
||||
45
Yi.Vue2.x/src/router/index.js
Normal file
45
Yi.Vue2.x/src/router/index.js
Normal file
@@ -0,0 +1,45 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
|
||||
|
||||
import { trailingSlash } from '@/util/helpers'
|
||||
import {
|
||||
layout,
|
||||
route,
|
||||
} from '@/util/routes'
|
||||
Vue.use(VueRouter)
|
||||
|
||||
|
||||
|
||||
const router = new VueRouter({
|
||||
mode: 'history',
|
||||
base: process.env.BASE_URL,
|
||||
scrollBehavior: (to, from, savedPosition) => {
|
||||
if (to.hash) return { selector: to.hash }
|
||||
if (savedPosition) return savedPosition
|
||||
|
||||
return { x: 0, y: 0 }
|
||||
},
|
||||
routes: [
|
||||
layout('Default', [
|
||||
route('Index'),
|
||||
route('AdmUser', null, 'AdmUser'),
|
||||
route('AdmRole', null, 'AdmRole'),
|
||||
route('AdmMenu', null, 'AdmMenu'),
|
||||
route('AdmMould', null, 'AdmMould'),
|
||||
route('AdmRoleMenu', null, 'AdmRoleMenu'),
|
||||
route('userInfo', null, 'userInfo'),
|
||||
route('Pan',null,'pan'),
|
||||
route('PanInfo',null,'PanInfo')
|
||||
]),
|
||||
layout('Login', [
|
||||
route('login', null, 'login'),
|
||||
route('register', null, 'register')
|
||||
])
|
||||
|
||||
]
|
||||
})
|
||||
router.beforeEach((to, from, next) => {
|
||||
return to.path.endsWith('/') ? next() : next(trailingSlash(to.path))
|
||||
})
|
||||
export default router
|
||||
20
Yi.Vue2.x/src/store/index.js
Normal file
20
Yi.Vue2.x/src/store/index.js
Normal file
@@ -0,0 +1,20 @@
|
||||
import Vue from 'vue'
|
||||
import Vuex from 'vuex'
|
||||
import home from './modules/home'
|
||||
import user from './modules/user'
|
||||
import theme from './modules/theme'
|
||||
import loader from './modules/loader'
|
||||
import pan from './modules/pan'
|
||||
Vue.use(Vuex);
|
||||
|
||||
//实例化
|
||||
const store = new Vuex.Store({
|
||||
modules: {
|
||||
home,
|
||||
user,
|
||||
theme,
|
||||
loader,
|
||||
pan
|
||||
}
|
||||
})
|
||||
export default store
|
||||
56
Yi.Vue2.x/src/store/modules/home.js
Normal file
56
Yi.Vue2.x/src/store/modules/home.js
Normal file
@@ -0,0 +1,56 @@
|
||||
const state = {
|
||||
drawer: null,
|
||||
drawerImage: true,
|
||||
mini: false,
|
||||
items: [{
|
||||
title: 'Dashboard',
|
||||
icon: 'mdi-view-dashboard',
|
||||
to: '/',
|
||||
},
|
||||
{
|
||||
title: 'User Profile',
|
||||
icon: 'mdi-account',
|
||||
to: '/components/profile/',
|
||||
},
|
||||
{
|
||||
title: 'Regular Tables',
|
||||
icon: 'mdi-clipboard-outline',
|
||||
to: '/tables/regular/',
|
||||
},
|
||||
{
|
||||
title: 'Typography',
|
||||
icon: 'mdi-format-font',
|
||||
to: '/components/typography/',
|
||||
},
|
||||
{
|
||||
title: 'Icons',
|
||||
icon: 'mdi-chart-bubble',
|
||||
to: '/components/icons/',
|
||||
},
|
||||
{
|
||||
title: 'Google Maps',
|
||||
icon: 'mdi-map-marker',
|
||||
to: '/maps/google/',
|
||||
},
|
||||
{
|
||||
title: 'Notifications',
|
||||
icon: 'mdi-bell',
|
||||
to: '/components/notifications/',
|
||||
},
|
||||
],
|
||||
}
|
||||
|
||||
const mutations = { //变化//载荷
|
||||
SetDrawerImage(state, drawerImage) {
|
||||
state.drawerImage = drawerImage
|
||||
}
|
||||
}
|
||||
|
||||
//在action中可以配合axios进行权限判断
|
||||
const actions = { //动作
|
||||
|
||||
}
|
||||
const getters = {}
|
||||
|
||||
|
||||
export default { state, mutations, actions, getters }
|
||||
34
Yi.Vue2.x/src/store/modules/loader.js
Normal file
34
Yi.Vue2.x/src/store/modules/loader.js
Normal file
@@ -0,0 +1,34 @@
|
||||
const state = { //状态
|
||||
load: false
|
||||
}
|
||||
|
||||
const mutations = { //变化//载荷
|
||||
OPEN(state) {
|
||||
state.load = true;
|
||||
},
|
||||
CLOSE(state) {
|
||||
state.load = false;
|
||||
},
|
||||
}
|
||||
|
||||
//在action中可以配合axios进行权限判断
|
||||
const actions = { //动作
|
||||
openLoad(context) {
|
||||
context.commit('OPEN')
|
||||
},
|
||||
closeLoad(context) {
|
||||
context.commit('CLOSE')
|
||||
}
|
||||
}
|
||||
|
||||
// const getters = { //类似与计算属性 派生属性
|
||||
// msg(state) {
|
||||
// if (state.count > 80) {
|
||||
// return "成绩优异"
|
||||
// } else {
|
||||
// return "成绩不合格"
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
||||
export default { state, mutations, actions }
|
||||
36
Yi.Vue2.x/src/store/modules/pan.js
Normal file
36
Yi.Vue2.x/src/store/modules/pan.js
Normal file
@@ -0,0 +1,36 @@
|
||||
const state = {
|
||||
basePath: "",
|
||||
extendPath:""
|
||||
}
|
||||
|
||||
const mutations = { //变化//载荷
|
||||
SetExtendPath(state, extendPath) {
|
||||
state.extendPath = extendPath
|
||||
},
|
||||
|
||||
SetBasePath(state, basePath) {
|
||||
state.basePath = basePath
|
||||
}
|
||||
}
|
||||
|
||||
//在action中可以配合axios进行权限判断
|
||||
const actions = { //动作
|
||||
Set_ExtendPath(context,extendPath) {
|
||||
context.commit('SetExtendPath',extendPath)
|
||||
},
|
||||
Set_BasePath(context,basePath) {
|
||||
context.commit('SetBasePath',basePath)
|
||||
},
|
||||
Add_ExtendPath(context,extendPath) {
|
||||
context.commit('SetExtendPath',context.state.extendPath+"/"+extendPath)
|
||||
},
|
||||
}
|
||||
const getters = {
|
||||
path: state => {
|
||||
return state.basePath+state.extendPath;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default { state, mutations, actions, getters }
|
||||
33
Yi.Vue2.x/src/store/modules/theme.js
Normal file
33
Yi.Vue2.x/src/store/modules/theme.js
Normal file
@@ -0,0 +1,33 @@
|
||||
import vuetify from '../../plugins/vuetify';
|
||||
const state = { //状态
|
||||
light: {
|
||||
primary: '#1976D2',
|
||||
secondary: '#424242',
|
||||
accent: '#82B1FF',
|
||||
error: '#FF5252',
|
||||
info: '#2196F3',
|
||||
success: '#4CAF50',
|
||||
warning: '#FFC107',
|
||||
cyan: "#FAB2B1",
|
||||
blue: "#2196F3"
|
||||
},
|
||||
dark: {}
|
||||
}
|
||||
|
||||
const mutations = { //变化//载荷
|
||||
SET_Light(state, n) {
|
||||
state.light = n
|
||||
vuetify.framework.theme.themes.light = n
|
||||
},
|
||||
}
|
||||
|
||||
//在action中可以配合axios进行权限判断
|
||||
const actions = { //动作
|
||||
set_light(context, n) {
|
||||
context.commit('SET_Light', n)
|
||||
},
|
||||
|
||||
}
|
||||
|
||||
|
||||
export default { state, mutations, actions }
|
||||
153
Yi.Vue2.x/src/store/modules/user.js
Normal file
153
Yi.Vue2.x/src/store/modules/user.js
Normal file
@@ -0,0 +1,153 @@
|
||||
import { getToken, setToken, getUser, setUser, removeToken } from '../../util/usertoken'
|
||||
import accountApi from "@/api/accountApi"
|
||||
|
||||
//再导入axion请求
|
||||
const state = { //状态
|
||||
token: getToken(),
|
||||
user: getUser(),
|
||||
dark: false,
|
||||
drawer: {
|
||||
image: 0,
|
||||
gradient: 1,
|
||||
mini: false,
|
||||
},
|
||||
gradients: [
|
||||
'rgba(0, 0, 0, .7), rgba(0, 0, 0, .7)',
|
||||
'rgba(228, 226, 226, 1), rgba(255, 255, 255, 0.7)',
|
||||
'rgba(244, 67, 54, .8), rgba(244, 67, 54, .8)',
|
||||
],
|
||||
images: [
|
||||
'https://s1.ax1x.com/2022/03/26/qdNnbD.jpg',
|
||||
'https://s1.ax1x.com/2022/03/26/qdNMUH.jpg',
|
||||
'https://s1.ax1x.com/2022/03/26/qdNKVe.jpg',
|
||||
'https://s1.ax1x.com/2022/03/26/qdNmDO.jpg'
|
||||
],
|
||||
notifications: [],
|
||||
rtl: false
|
||||
}
|
||||
|
||||
const mutations = { //变化//载荷
|
||||
SET_TOKEN(state, token) {
|
||||
state.token = token
|
||||
setToken(token)
|
||||
},
|
||||
SET_USER(state, user) {
|
||||
state.user = user
|
||||
setUser(user)
|
||||
},
|
||||
SetGradient(state, gradient) {
|
||||
state.drawer.gradient = gradient
|
||||
},
|
||||
SetImage(state, image) {
|
||||
state.drawer.image = image
|
||||
}
|
||||
}
|
||||
|
||||
//在action中可以配合axios进行权限判断
|
||||
const actions = { //动作
|
||||
setIcon({ commit, state }, icon) {
|
||||
state.user.icon = icon
|
||||
commit('SET_USER', state.user)
|
||||
},
|
||||
// qqUpdate({ state }, openid) {
|
||||
// return new Promise((resolv, reject) => {
|
||||
// qqApi.qqupdate(openid, state.user.id).then(resp => {
|
||||
// resolv(resp)
|
||||
// }).catch(error => {
|
||||
// reject(error)
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
|
||||
// qqLogin({ commit }, openid) {
|
||||
// return new Promise((resolv, reject) => {
|
||||
// qqApi.qqlogin(openid).then(resp => {
|
||||
// if (resp.status) {
|
||||
// commit('SET_TOKEN', resp.data.token)
|
||||
// commit('SET_USER', resp.data.user)
|
||||
// }
|
||||
// resolv(resp)
|
||||
// }).catch(error => {
|
||||
// reject(error)
|
||||
// })
|
||||
// })
|
||||
// },
|
||||
|
||||
Login({ commit }, form) {
|
||||
return new Promise((resolv, reject) => {
|
||||
accountApi.login(form.username.trim(), form.password.trim()).then(resp => {
|
||||
if (resp.status) {
|
||||
commit('SET_TOKEN', resp.data.token)
|
||||
commit('SET_USER', resp.data.user)
|
||||
}
|
||||
resolv(resp)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
|
||||
|
||||
Register({ commit }, form) {
|
||||
return new Promise((resolv, reject) => {
|
||||
accountApi.register(form.username.trim(), form.password.trim(), form.email.trim(), form.code.trim()).then(resp => {
|
||||
resolv(resp)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
Logged({ commit }) {
|
||||
return new Promise((resolv, reject) => {
|
||||
accountApi.logged().then(resp => {
|
||||
resolv(resp)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
},
|
||||
|
||||
// GetUserInfo({ commit, state }) {
|
||||
// return new Promise((resolv, reject) => {
|
||||
// // getUserInfo(state.token).then(response => {
|
||||
// // commit('SET_USER', response.data)
|
||||
// // resolve(response)
|
||||
// // }).catch(error=>{
|
||||
// // reject(error)
|
||||
// // })
|
||||
// })
|
||||
// },
|
||||
Logout({ commit, state }) {
|
||||
return new Promise((resolv, reject) => {
|
||||
accountApi.logout().then(response => {
|
||||
commit('SET_TOKEN', '')
|
||||
commit('SET_USER', null)
|
||||
removeToken()
|
||||
resolv(response)
|
||||
}).catch(error => {
|
||||
reject(error)
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
const getters = { //类似与计算属性 派生属性
|
||||
dark: (state, getters) => {
|
||||
return (
|
||||
state.dark ||
|
||||
getters.gradient.indexOf('255, 255, 255') === -1
|
||||
)
|
||||
},
|
||||
gradient: state => {
|
||||
return state.gradients[state.drawer.gradient]
|
||||
},
|
||||
image: state => {
|
||||
return state.drawer.image === '' ? state.drawer.image : state.images[state.drawer.image]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
export default { state, mutations, actions, getters }
|
||||
55
Yi.Vue2.x/src/styles/auth.scss
Normal file
55
Yi.Vue2.x/src/styles/auth.scss
Normal file
@@ -0,0 +1,55 @@
|
||||
.auth-wrapper {
|
||||
display: flex;
|
||||
min-height: calc(var(--vh, 1vh) * 100);
|
||||
width: 100%;
|
||||
flex-basis: 100%;
|
||||
align-items: center;
|
||||
background-color: #F4F5FA;
|
||||
// common style for both v1 and v2
|
||||
a {
|
||||
text-decoration: unset;
|
||||
}
|
||||
// auth v1
|
||||
&.auth-v1 {
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
overflow: hidden;
|
||||
padding: 1.5rem;
|
||||
.auth-mask-bg {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.auth-tree,
|
||||
.auth-tree-3 {
|
||||
position: absolute;
|
||||
}
|
||||
.auth-tree {
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.auth-tree-3 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
}
|
||||
// auth card
|
||||
.auth-inner {
|
||||
width: 28rem;
|
||||
z-index: 1;
|
||||
.auth-card {
|
||||
padding: 0.9375rem 0.875rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 600px) {
|
||||
// auth bg and tree hide in sm screen
|
||||
.auth-v1 {
|
||||
.auth-tree,
|
||||
.auth-tree-3,
|
||||
.auth-mask-bg {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
26
Yi.Vue2.x/src/styles/overrides.sass
Normal file
26
Yi.Vue2.x/src/styles/overrides.sass
Normal file
@@ -0,0 +1,26 @@
|
||||
.text-mono
|
||||
font-family: monospace
|
||||
|
||||
// Helpers
|
||||
.flex-1-1-auto
|
||||
flex: 1 1 auto !important
|
||||
|
||||
.flex-1-0-auto
|
||||
flex: 1 0 auto !important
|
||||
|
||||
.flex-0-1-auto
|
||||
flex: 0 1 auto !important
|
||||
|
||||
.flex-0-0-auto
|
||||
flex: 0 0 auto !important
|
||||
|
||||
.position-relative
|
||||
position: relative !important
|
||||
|
||||
.overflow-y-scroll
|
||||
overflow-y: scroll
|
||||
|
||||
table
|
||||
> thead > tr > th,
|
||||
> tbody > tr > td
|
||||
font-weight: 300 !important
|
||||
106
Yi.Vue2.x/src/styles/variables.scss
Normal file
106
Yi.Vue2.x/src/styles/variables.scss
Normal file
@@ -0,0 +1,106 @@
|
||||
// reduce button default elevation
|
||||
// default background color is #EEEEEE
|
||||
|
||||
$btn-sizes: (
|
||||
'small': 28,
|
||||
'default': 41,
|
||||
'large': 54
|
||||
);
|
||||
|
||||
$btn-font-sizes: (
|
||||
'default': .75rem
|
||||
);
|
||||
|
||||
$btn-font-weight: 400;
|
||||
$btn-letter-spacing: normal;
|
||||
$material-light: (
|
||||
'background': #EEEEEE,
|
||||
'text': (
|
||||
'primary': #333333,
|
||||
'secondary': #999999
|
||||
)
|
||||
);
|
||||
$btn-icon-font-size: 1.0625rem !important;
|
||||
|
||||
$list-item-min-height: 48px;
|
||||
|
||||
$blockquote-font-size: 1.25rem;
|
||||
|
||||
$card-border-radius: 6px;
|
||||
$card-text-font-weight: 300;
|
||||
$card-elevation: 1;
|
||||
|
||||
$data-table-regular-header-font-size: 1.0625rem;
|
||||
|
||||
$shadow-key-umbra: (
|
||||
1: (0 1px 4px 0 rgba(0,0,0,.14)),
|
||||
12: (0 16px 38px -12px rgba(0,0,0,.56))
|
||||
);
|
||||
|
||||
$shadow-key-penumbra: (
|
||||
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||
12: (0 4px 25px 0 rgba(0,0,0,.12))
|
||||
);
|
||||
|
||||
$shadow-key-ambient: (
|
||||
1: (0 0 0 0 rgba(0,0,0,0)),
|
||||
12: (0 8px 10px -5px rgba(0,0,0,.2))
|
||||
);
|
||||
|
||||
$headings: (
|
||||
'h1': (
|
||||
'size': 3.3125rem,
|
||||
'line-height': 1.15em,
|
||||
'weight': 300
|
||||
),
|
||||
'h2': (
|
||||
'size': 2.25rem,
|
||||
'line-height': 1.5em,
|
||||
'weight': 300
|
||||
),
|
||||
'h3': (
|
||||
'size': 1.5625rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h4': (
|
||||
'size': 1.125rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h5': (
|
||||
'size': 1.0625rem,
|
||||
'line-height': 1.4em,
|
||||
'weight': 300
|
||||
),
|
||||
'h6': (
|
||||
'size': .75rem,
|
||||
'line-height': 1.5em,
|
||||
'text-transform': uppercase,
|
||||
'weight': 500
|
||||
),
|
||||
'subtitle-1': (
|
||||
'size': 0.875rem,
|
||||
'weight': 300
|
||||
),
|
||||
'subtitle-2': (
|
||||
'size': 0.875rem,
|
||||
'line-height': 1.5em !important,
|
||||
'weight': 300
|
||||
),
|
||||
'caption': (
|
||||
'size': 0.8125rem,
|
||||
'weight': 300
|
||||
),
|
||||
'overline': (
|
||||
'letter-spacing': normal,
|
||||
'line-height': 0.625rem,
|
||||
'size': 0.625rem,
|
||||
'weight': 500
|
||||
)
|
||||
);
|
||||
|
||||
// Tabs
|
||||
$tab-font-size: .775rem;
|
||||
$tab-font-weight: 500;
|
||||
$tabs-item-letter-spacing: normal;
|
||||
13
Yi.Vue2.x/src/util/dialog.js
Normal file
13
Yi.Vue2.x/src/util/dialog.js
Normal file
@@ -0,0 +1,13 @@
|
||||
function notify(resp) {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default { notify };
|
||||
54
Yi.Vue2.x/src/util/getMould.js
Normal file
54
Yi.Vue2.x/src/util/getMould.js
Normal file
@@ -0,0 +1,54 @@
|
||||
var start = true;
|
||||
|
||||
function getUrl(menuList, menuStr) {
|
||||
|
||||
if (start) {
|
||||
for (var i = 0; i < menuList.length; i++) {
|
||||
if (menuList[i].menu_name == menuStr) {
|
||||
start = false;
|
||||
console.log(handUrl(menuList[i]))
|
||||
return handUrl(menuList[i])
|
||||
} else {
|
||||
if (menuList[i].children != undefined && start) {
|
||||
getUrl(menuList[i].children, menuStr);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
function handUrl(menu) {
|
||||
var axiosUrls = {
|
||||
get: "123",
|
||||
update: "123",
|
||||
del: "123",
|
||||
add: "123",
|
||||
};
|
||||
const myMenu = menu.children;
|
||||
myMenu.forEach(item => {
|
||||
const myName = item.mould.mould_name;
|
||||
const myUrl = item.mould.url;
|
||||
|
||||
switch (myName) {
|
||||
case 'get':
|
||||
axiosUrls.get = myUrl;
|
||||
break;
|
||||
case 'update':
|
||||
axiosUrls.update = myUrl;
|
||||
break;
|
||||
case 'del':
|
||||
axiosUrls.del = myUrl;
|
||||
break;
|
||||
case 'add':
|
||||
axiosUrls.add = myUrl;
|
||||
break;
|
||||
}
|
||||
});
|
||||
return axiosUrls;
|
||||
}
|
||||
|
||||
export {
|
||||
getUrl,
|
||||
handUrl
|
||||
}
|
||||
11
Yi.Vue2.x/src/util/globals.js
Normal file
11
Yi.Vue2.x/src/util/globals.js
Normal file
@@ -0,0 +1,11 @@
|
||||
const EN_LOCALE_ONLY = process.env.EN_LOCALE_ONLY === 'true'
|
||||
const IN_BROWSER = typeof window !== 'undefined'
|
||||
const IS_DEBUG = process.env.DEBUG === 'true'
|
||||
const IS_PROD = process.env.NODE_ENV === 'production'
|
||||
|
||||
module.exports = {
|
||||
EN_LOCALE_ONLY,
|
||||
IN_BROWSER,
|
||||
IS_DEBUG,
|
||||
IS_PROD,
|
||||
}
|
||||
11
Yi.Vue2.x/src/util/helpers.js
Normal file
11
Yi.Vue2.x/src/util/helpers.js
Normal file
@@ -0,0 +1,11 @@
|
||||
export function leadingSlash (str) {
|
||||
return str.startsWith('/') ? str : '/' + str
|
||||
}
|
||||
|
||||
export function trailingSlash (str) {
|
||||
return str.endsWith('/') ? str : str + '/'
|
||||
}
|
||||
|
||||
export const wait = timeout => {
|
||||
return new Promise(resolve => setTimeout(resolve, timeout))
|
||||
}
|
||||
16
Yi.Vue2.x/src/util/myaction.js
Normal file
16
Yi.Vue2.x/src/util/myaction.js
Normal file
@@ -0,0 +1,16 @@
|
||||
const actionList = [
|
||||
"用户管理",
|
||||
"角色管理",
|
||||
"权限管理",
|
||||
"板块管理",
|
||||
"等级管理",
|
||||
"主题管理",
|
||||
"设置管理",
|
||||
"横幅管理",
|
||||
"版本管理",
|
||||
"道具管理",
|
||||
"商城管理",
|
||||
"日志管理",
|
||||
"类型管理"
|
||||
];
|
||||
export default { actionList };
|
||||
85
Yi.Vue2.x/src/util/myaxios.js
Normal file
85
Yi.Vue2.x/src/util/myaxios.js
Normal file
@@ -0,0 +1,85 @@
|
||||
import axios from 'axios'
|
||||
import store from '../store/index'
|
||||
import vm from '../main'
|
||||
// import VuetifyDialogPlugin from 'vuetify-dialog/nuxt/index';
|
||||
const myaxios = axios.create({
|
||||
// baseURL:'/'//
|
||||
baseURL: process.env.VUE_APP_BASE_API, // /dev-apis
|
||||
timeout: 50000,
|
||||
headers: {
|
||||
'Authorization': 'Bearer ' + ""
|
||||
},
|
||||
})
|
||||
// 请求拦截器
|
||||
myaxios.interceptors.request.use(function(config) {
|
||||
|
||||
config.headers.Authorization = 'Bearer ' + store.state.user.token;
|
||||
store.dispatch("openLoad");
|
||||
return config;
|
||||
}, function(error) {
|
||||
return Promise.reject(error);
|
||||
});
|
||||
|
||||
// 响应拦截器
|
||||
myaxios.interceptors.response.use(async function(response) {
|
||||
const resp = response.data
|
||||
if (resp.code == undefined && resp.msg == undefined) {
|
||||
vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else if (resp.code == 401) {
|
||||
const res = await vm.$dialog.error({
|
||||
text: `错误代码：${resp.code}，原因：${resp.msg}<br>是否重新进行登录？`,
|
||||
title: '错误',
|
||||
actions: {
|
||||
'false': '取消',
|
||||
'true': '跳转'
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
vm.$router.push({ path: "/login" });
|
||||
}
|
||||
|
||||
} else if (resp.code !== 200) {
|
||||
vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.msg}`, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
|
||||
store.dispatch("closeLoad");
|
||||
return resp;
|
||||
}, async function(error) {
|
||||
const resp = error.response.data
|
||||
if (resp.code == undefined && resp.msg == undefined) {
|
||||
vm.$dialog.notify.error("错误代码：无，原因：与服务器失去连接", {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else if (resp.code == 401) {
|
||||
const res = await vm.$dialog.error({
|
||||
text: `错误代码：${resp.code}，原因：${resp.msg}<br>是否重新进行登录？`,
|
||||
title: '错误',
|
||||
actions: {
|
||||
'false': '取消',
|
||||
'true': '跳转'
|
||||
}
|
||||
});
|
||||
if (res) {
|
||||
vm.$store.dispatch("Logout").then((resp) => {
|
||||
vm.$router.push({ path: "/login" });
|
||||
});
|
||||
}
|
||||
|
||||
} else if (resp.code !== 200) {
|
||||
vm.$dialog.notify.error(`错误代码：${resp.code}，原因：${resp.msg}`, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
|
||||
store.dispatch("closeLoad");
|
||||
return Promise.reject(error);
|
||||
});
|
||||
export default myaxios
|
||||
9
Yi.Vue2.x/src/util/myqq.js
Normal file
9
Yi.Vue2.x/src/util/myqq.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const myqqLogin = {
|
||||
appId: "101951505",
|
||||
redirectURI: "https://jiftcc.com/qq?state=0",
|
||||
};
|
||||
const myqqUpdate = {
|
||||
appId: "101951505",
|
||||
redirectURI: "https://jiftcc.com/qq?state=1",
|
||||
};
|
||||
export default { myqqLogin, myqqUpdate };
|
||||
75
Yi.Vue2.x/src/util/routes.js
Normal file
75
Yi.Vue2.x/src/util/routes.js
Normal file
@@ -0,0 +1,75 @@
|
||||
// Imports
|
||||
import { kebabCase } from 'lodash'
|
||||
import { leadingSlash, trailingSlash } from '@/util/helpers'
|
||||
|
||||
export function abort(code = 404) {
|
||||
return {
|
||||
name: 'FourOhFour',
|
||||
path: '*',
|
||||
component: () => error(code),
|
||||
}
|
||||
}
|
||||
|
||||
export function error(code = 404) {
|
||||
return import (
|
||||
/* webpackChunkName: "error-[request]" */
|
||||
`@/views/${code}.vue`
|
||||
)
|
||||
}
|
||||
|
||||
export function layout(layout = 'Default', children, path = '') {
|
||||
const dir = kebabCase(layout)
|
||||
|
||||
return {
|
||||
children,
|
||||
component: () =>
|
||||
import (
|
||||
/* webpackChunkName: "layout-[request]" */
|
||||
`@/layouts/${dir}/Index`
|
||||
),
|
||||
path,
|
||||
}
|
||||
}
|
||||
|
||||
export function redirect(
|
||||
path = '*',
|
||||
rhandler,
|
||||
) {
|
||||
if (typeof path === 'function') {
|
||||
rhandler = path
|
||||
path = '*'
|
||||
}
|
||||
|
||||
return {
|
||||
path,
|
||||
redirect: to => {
|
||||
const rpath = rhandler(to)
|
||||
const url = rpath !== '' ?
|
||||
leadingSlash(trailingSlash(rpath)) :
|
||||
rpath
|
||||
|
||||
return `/${url}`
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export function route(name, component, path = '') {
|
||||
component = Object(component) === component ?
|
||||
component : { default: name.replace(' ', '') }
|
||||
|
||||
const components = {}
|
||||
|
||||
for (const [key, value] of Object.entries(component)) {
|
||||
components[key] = () =>
|
||||
import (
|
||||
/* webpackChunkName: "views-[request]" */
|
||||
`@/views/${value}`
|
||||
)
|
||||
}
|
||||
|
||||
return {
|
||||
name,
|
||||
components,
|
||||
path,
|
||||
}
|
||||
}
|
||||
34
Yi.Vue2.x/src/util/signalR.js
Normal file
34
Yi.Vue2.x/src/util/signalR.js
Normal file
@@ -0,0 +1,34 @@
|
||||
//引入安装的signalr包
|
||||
import * as signalR from '@microsoft/signalr'
|
||||
|
||||
const signal = new signalR.HubConnectionBuilder() //服务器地址
|
||||
.withUrl([process.env.VUE_APP_BASE_API] + '/chat', {})
|
||||
.build()
|
||||
|
||||
/* const signalr = function () {
|
||||
var hub
|
||||
if (hub === undefined) {
|
||||
hub = signal
|
||||
}
|
||||
return hub
|
||||
} */
|
||||
// 自动重连
|
||||
// async function start() {
|
||||
// try {
|
||||
// await signal.start()
|
||||
// console.log('connected')
|
||||
// } catch (err) {
|
||||
// console.log(err)
|
||||
// setTimeout(() => start(), 5000)
|
||||
// }
|
||||
// }
|
||||
|
||||
// signal.onclose(async() => {
|
||||
// await start()
|
||||
// })
|
||||
// //将创建的signal赋值给Vue实例
|
||||
export default {
|
||||
install: function(Vue) {
|
||||
Vue.prototype.signalr = signal
|
||||
}
|
||||
}
|
||||
18
Yi.Vue2.x/src/util/usertoken.js
Normal file
18
Yi.Vue2.x/src/util/usertoken.js
Normal file
@@ -0,0 +1,18 @@
|
||||
const TOKEN_KEY = "token_key"
|
||||
const USER_KEY = "user_key"
|
||||
export function getToken() {
|
||||
return localStorage.getItem(TOKEN_KEY)
|
||||
}
|
||||
export function setToken(token) {
|
||||
return localStorage.setItem(TOKEN_KEY, token)
|
||||
}
|
||||
export function getUser() {
|
||||
return JSON.parse(localStorage.getItem(USER_KEY))
|
||||
}
|
||||
export function setUser(user) {
|
||||
return localStorage.setItem(USER_KEY, JSON.stringify(user))
|
||||
}
|
||||
export function removeToken() {
|
||||
localStorage.removeItem(TOKEN_KEY)
|
||||
localStorage.removeItem(USER_KEY)
|
||||
}
|
||||
25
Yi.Vue2.x/src/views/AdmMenu.vue
Normal file
25
Yi.Vue2.x/src/views/AdmMenu.vue
Normal file
@@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
菜单管理 — <small class="text-body-1">菜单可分配一个接口</small>
|
||||
</template>
|
||||
<ccTreeview></ccTreeview>
|
||||
</material-card>
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
created() {
|
||||
|
||||
},
|
||||
data: () => ({
|
||||
|
||||
}),
|
||||
methods: {
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
39
Yi.Vue2.x/src/views/AdmMould.vue
Normal file
39
Yi.Vue2.x/src/views/AdmMould.vue
Normal file
@@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
接口管理 — <small class="text-body-1">接口可被菜单拥有</small>
|
||||
</template>
|
||||
<ccTable
|
||||
:defaultItem="defaultItem"
|
||||
:headers="headers"
|
||||
:axiosUrls="axiosUrls"
|
||||
></ccTable>
|
||||
</material-card>
|
||||
</template>
|
||||
<script>
|
||||
import userApi from "../api/userApi"
|
||||
export default {
|
||||
created(){this.init()},
|
||||
methods:{
|
||||
init(){
|
||||
userApi.GetAxiosByRouter(this.$route.path).then(resp=>{
|
||||
this.axiosUrls=resp.data;
|
||||
})
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
axiosUrls: {
|
||||
},
|
||||
headers: [
|
||||
{ text: "编号", align: "start", value: "id" },
|
||||
{ text: "接口名", value: "mould_name", sortable: false },
|
||||
{ text: "接口地址", value: "url", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
defaultItem: {
|
||||
mould_name: "get",
|
||||
url: "/get/gettest",
|
||||
},
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
45
Yi.Vue2.x/src/views/AdmRole.vue
Normal file
45
Yi.Vue2.x/src/views/AdmRole.vue
Normal file
@@ -0,0 +1,45 @@
|
||||
<template>
|
||||
<material-card color="primary" icon="mdi-account-tie">
|
||||
<template #title>
|
||||
角色管理 — <small class="text-body-1">角色可分配多个菜单</small>
|
||||
</template>
|
||||
<ccTable
|
||||
:defaultItem="defaultItem"
|
||||
:headers="headers"
|
||||
:axiosUrls="axiosUrls"
|
||||
>
|
||||
</ccTable>
|
||||
</material-card>
|
||||
</template>
|
||||
<script>
|
||||
import userApi from "../api/userApi"
|
||||
export default {
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
userApi.GetAxiosByRouter(this.$route.path).then(resp=>{
|
||||
this.axiosUrls=resp.data;
|
||||
})
|
||||
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
start: true,
|
||||
axiosUrls: {
|
||||
},
|
||||
headers: [
|
||||
{ text: "编号", align: "start", value: "id" },
|
||||
{ text: "角色名", value: "role_name", sortable: false },
|
||||
{ text: "云盘地址", value: "file_path", sortable: false },
|
||||
{ text: "简介", value: "introduce", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
defaultItem: {
|
||||
role_name: "",
|
||||
introduce: "",
|
||||
},
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
120
Yi.Vue2.x/src/views/AdmRoleMenu.vue
Normal file
120
Yi.Vue2.x/src/views/AdmRoleMenu.vue
Normal file
@@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
角色菜单分配管理 —
|
||||
<small class="text-body-1"
|
||||
>你可以在这里多角色分配多菜单/选中一个可查看</small
|
||||
> </template
|
||||
>
|
||||
<v-divider></v-divider>
|
||||
<app-btn dark class="ma-4" @click="showAll"> 展开全部</app-btn>
|
||||
<app-btn class="my-4 mr-4" @click="setMenu">确定分配</app-btn
|
||||
>
|
||||
|
||||
<app-btn class="my-4" color="secondary" @click="clear">清空选择</app-btn></material-card
|
||||
>
|
||||
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="4" lg="4">
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<v-treeview
|
||||
|
||||
|
||||
selectable
|
||||
:items="RoleItems"
|
||||
v-model="selectionRole"
|
||||
return-object
|
||||
open-all
|
||||
hoverable
|
||||
item-text="role_name"
|
||||
>
|
||||
</v-treeview>
|
||||
</v-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="8" lg="8">
|
||||
<v-card class="mx-auto" width="100%">
|
||||
<v-treeview
|
||||
ref="tree"
|
||||
open-on-click
|
||||
selectable
|
||||
:items="Menuitems"
|
||||
selection-type="independent"
|
||||
v-model="selectionMenu"
|
||||
return-object
|
||||
open-all
|
||||
hoverable
|
||||
item-text="menu_name"
|
||||
>
|
||||
<template v-slot:append="{ item }">
|
||||
<v-btn>id:{{ item.id }}</v-btn>
|
||||
</template>
|
||||
</v-treeview>
|
||||
</v-card></v-col
|
||||
>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import roleApi from "../api/roleApi";
|
||||
import menuApi from "../api/menuApi";
|
||||
export default {
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
selectionRole: {
|
||||
handler(val, oldVal) {
|
||||
if (val.length == 1) {
|
||||
roleApi.GetTopMenusByRoleId(val[0].id).then((resp) => {
|
||||
this.selectionMenu = resp.data;
|
||||
});
|
||||
}
|
||||
},
|
||||
deep: true,
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
showAll(){
|
||||
this.$refs.tree.updateAll(true);
|
||||
},
|
||||
clear() {
|
||||
this.selectionMenu = [];
|
||||
this.selectionRole = [];
|
||||
},
|
||||
setMenu() {
|
||||
var roleIds = [];
|
||||
var menuIds = [];
|
||||
this.selectionRole.forEach((ele) => {
|
||||
roleIds.push(ele.id);
|
||||
});
|
||||
this.selectionMenu.forEach((ele) => {
|
||||
menuIds.push(ele.id);
|
||||
});
|
||||
roleApi.setMenuByRole(roleIds, menuIds).then((resp) => {
|
||||
this.$dialog.notify.info(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
});
|
||||
},
|
||||
init() {
|
||||
roleApi.getRole().then((resp) => {
|
||||
this.RoleItems = resp.data;
|
||||
});
|
||||
|
||||
menuApi.GetMenuInMould().then((resp) => {
|
||||
this.Menuitems = [resp.data];
|
||||
});
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
selectionMenu: [],
|
||||
selectionRole: [],
|
||||
RoleItems: [],
|
||||
Menuitems: [],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
121
Yi.Vue2.x/src/views/AdmUser.vue
Normal file
121
Yi.Vue2.x/src/views/AdmUser.vue
Normal file
@@ -0,0 +1,121 @@
|
||||
<template>
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
用户管理 — <small class="text-body-1">用户可拥有多个角色</small>
|
||||
</template>
|
||||
<ccCombobox
|
||||
headers="设置角色"
|
||||
:items="roleItems"
|
||||
@select="getSelect"
|
||||
itemText="role_name"
|
||||
>
|
||||
<template v-slot:save>
|
||||
<v-btn @click="setRole" color="blue darken-1" text> 保存</v-btn>
|
||||
</template>
|
||||
</ccCombobox>
|
||||
<ccTable
|
||||
:defaultItem="defaultItem"
|
||||
:headers="headers"
|
||||
:axiosUrls="axiosUrls"
|
||||
@selected="getTableSelect"
|
||||
>
|
||||
<template v-slot:action="{ item }">
|
||||
<v-icon small class="mr-2" @click="showItem(item)"> mdi-eye </v-icon>
|
||||
</template>
|
||||
</ccTable>
|
||||
</material-card>
|
||||
</template>
|
||||
<script>
|
||||
import userApi from "../api/userApi";
|
||||
import roleApi from "../api/roleApi";
|
||||
export default {
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
async showItem(item) {
|
||||
var strInfo = "";
|
||||
roleApi.GetRolesByUserId(item.id).then(async (resp) => {
|
||||
const roleData = resp.data;
|
||||
strInfo += "拥有的角色:<br>";
|
||||
roleData.forEach((u) => {
|
||||
strInfo += u.role_name + "<br>";
|
||||
});
|
||||
|
||||
strInfo += "<hr>";
|
||||
Object.keys(item).forEach(async function (key) {
|
||||
strInfo += key + ":" + item[key] + "<br>";
|
||||
});
|
||||
|
||||
await this.$dialog.confirm({
|
||||
text: strInfo,
|
||||
title: "信息详情",
|
||||
actions: {
|
||||
true: "关闭",
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
init() {
|
||||
userApi.GetAxiosByRouter(this.$route.path).then((resp) => {
|
||||
this.axiosUrls = resp.data;
|
||||
});
|
||||
roleApi.getRole().then((resp) => {
|
||||
this.roleItems = resp.data;
|
||||
});
|
||||
},
|
||||
setRole() {
|
||||
var userIds = [];
|
||||
var roleIds = [];
|
||||
this.TableSelect.forEach((item) => {
|
||||
userIds.push(item.id);
|
||||
});
|
||||
this.select.forEach((item) => {
|
||||
roleIds.push(item.id);
|
||||
});
|
||||
userApi.SetRoleByUser(userIds, roleIds).then((resp) => {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
});
|
||||
},
|
||||
getTableSelect(data) {
|
||||
this.TableSelect = data;
|
||||
},
|
||||
|
||||
getSelect(data) {
|
||||
this.select = data;
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
TableSelect: [],
|
||||
select: [],
|
||||
roleItems: [],
|
||||
axiosUrls: {},
|
||||
headers: [
|
||||
{ text: "编号", align: "start", value: "id" },
|
||||
{ text: "用户名", value: "username", sortable: false },
|
||||
{ text: "密码", value: "password", sortable: false },
|
||||
{ text: "图标", value: "icon", sortable: false },
|
||||
{ text: "昵称", value: "nick", sortable: true },
|
||||
{ text: "邮箱", value: "email", sortable: true },
|
||||
{ text: "IP", value: "ip", sortable: false },
|
||||
{ text: "年龄", value: "age", sortable: false },
|
||||
{ text: "地址", value: "address", sortable: false },
|
||||
{ text: "电话", value: "phone", sortable: false },
|
||||
{ text: "操作", value: "actions", sortable: false },
|
||||
],
|
||||
defaultItem: {
|
||||
username: "test",
|
||||
password: "123",
|
||||
icon: "mdi-lock",
|
||||
nick: "橙子",
|
||||
age: 18,
|
||||
address: "中国",
|
||||
phone: "",
|
||||
},
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
442
Yi.Vue2.x/src/views/Index.vue
Normal file
442
Yi.Vue2.x/src/views/Index.vue
Normal file
@@ -0,0 +1,442 @@
|
||||
<template>
|
||||
<v-container
|
||||
id="dashboard-view"
|
||||
fluid
|
||||
tag="section"
|
||||
>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="(chart, i) in charts"
|
||||
:key="`chart-${i}`"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="4"
|
||||
>
|
||||
<material-chart-card
|
||||
:color="chart.color"
|
||||
:data="chart.data"
|
||||
:options="chart.options"
|
||||
:responsive-options="chart.responsiveOptions"
|
||||
:title="chart.title"
|
||||
:type="chart.type"
|
||||
>
|
||||
<template #subtitle>
|
||||
<div class="font-weight-light text--secondary">
|
||||
<div v-html="chart.subtitle" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #actions>
|
||||
<v-icon
|
||||
class="mr-1"
|
||||
small
|
||||
>
|
||||
mdi-clock-outline
|
||||
</v-icon>
|
||||
|
||||
<span
|
||||
class="text-caption grey--text font-weight-light"
|
||||
v-text="chart.time"
|
||||
/>
|
||||
</template>
|
||||
</material-chart-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
v-for="({ actionIcon, actionText, ...attrs }, i) in stats"
|
||||
:key="i"
|
||||
cols="12"
|
||||
md="6"
|
||||
lg="3"
|
||||
>
|
||||
<material-stat-card v-bind="attrs">
|
||||
<template #actions>
|
||||
<v-icon
|
||||
class="mr-2"
|
||||
small
|
||||
v-text="actionIcon"
|
||||
/>
|
||||
<div class="text-truncate">
|
||||
{{ actionText }}
|
||||
</div>
|
||||
</template>
|
||||
</material-stat-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<material-card
|
||||
color="orange"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<div class="pa-8 white--text">
|
||||
<div class="text-h4 font-weight-light">
|
||||
Employees Stats
|
||||
</div>
|
||||
<div class="text-caption">
|
||||
New employees on 15th September, 2016
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<v-card-text>
|
||||
<v-data-table
|
||||
:headers="headers"
|
||||
:items="items"
|
||||
/>
|
||||
</v-card-text>
|
||||
</material-card>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="12"
|
||||
md="6"
|
||||
>
|
||||
<material-card
|
||||
color="accent"
|
||||
full-header
|
||||
>
|
||||
<template #heading>
|
||||
<v-tabs
|
||||
v-model="tabs"
|
||||
background-color="transparent"
|
||||
slider-color="white"
|
||||
class="pa-8"
|
||||
>
|
||||
<span
|
||||
class="subheading font-weight-light mx-3"
|
||||
style="align-self: center"
|
||||
>Tasks:</span>
|
||||
<v-tab class="mr-3">
|
||||
<v-icon class="mr-2">
|
||||
mdi-bug
|
||||
</v-icon>
|
||||
Bugs
|
||||
</v-tab>
|
||||
<v-tab class="mr-3">
|
||||
<v-icon class="mr-2">
|
||||
mdi-code-tags
|
||||
</v-icon>
|
||||
Website
|
||||
</v-tab>
|
||||
<v-tab>
|
||||
<v-icon class="mr-2">
|
||||
mdi-cloud
|
||||
</v-icon>
|
||||
Server
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
</template>
|
||||
<v-tabs-items
|
||||
v-model="tabs"
|
||||
background-color="transparent"
|
||||
>
|
||||
<v-tab-item
|
||||
v-for="n in 3"
|
||||
:key="n"
|
||||
>
|
||||
<v-card-text>
|
||||
<template v-for="(task, i) in tasks[tabs]">
|
||||
<v-row
|
||||
:key="i"
|
||||
align="center"
|
||||
class="flex-nowrap"
|
||||
>
|
||||
<v-col cols="1">
|
||||
<v-list-item-action>
|
||||
<v-simple-checkbox
|
||||
v-model="task.value"
|
||||
color="secondary"
|
||||
/>
|
||||
</v-list-item-action>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
class="font-weight-light"
|
||||
cols="8"
|
||||
v-text="task.text"
|
||||
/>
|
||||
|
||||
<v-col
|
||||
cols="auto"
|
||||
class="text-right"
|
||||
>
|
||||
<v-icon class="mx-1">
|
||||
mdi-pencil
|
||||
</v-icon>
|
||||
|
||||
<v-icon
|
||||
class="mx-1"
|
||||
color="error"
|
||||
>
|
||||
mdi-close
|
||||
</v-icon>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
</v-card-text>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
</material-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
// Utilities
|
||||
// import { get } from 'vuex-pathify'
|
||||
import Vue from 'vue'
|
||||
|
||||
const lineSmooth = Vue.chartist.Interpolation.cardinal({
|
||||
tension: 0,
|
||||
})
|
||||
|
||||
export default {
|
||||
name: 'DashboardView',
|
||||
|
||||
data: () => ({
|
||||
charts: [{
|
||||
type: 'Bar',
|
||||
color: 'primary',
|
||||
title: 'Website Views',
|
||||
subtitle: 'Last Campaign Performance',
|
||||
time: 'updated 10 minutes ago',
|
||||
data: {
|
||||
labels: ['Ja', 'Fe', 'Ma', 'Ap', 'Mai', 'Ju', 'Jul', 'Au', 'Se', 'Oc', 'No', 'De'],
|
||||
series: [
|
||||
[542, 443, 320, 780, 553, 453, 326, 434, 568, 610, 756, 895],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
axisX: {
|
||||
showGrid: false,
|
||||
},
|
||||
low: 0,
|
||||
high: 1000,
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 5,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
responsiveOptions: [
|
||||
['screen and (max-width: 640px)', {
|
||||
seriesBarDistance: 5,
|
||||
axisX: {
|
||||
labelInterpolationFnc: function (value) {
|
||||
return value[0]
|
||||
},
|
||||
},
|
||||
}],
|
||||
],
|
||||
}, {
|
||||
type: 'Line',
|
||||
color: 'success',
|
||||
title: 'Daily Sales',
|
||||
subtitle: '<i class="mdi mdi-arrow-up green--text"></i><span class="green--text">55%</span> increase in today\'s sales',
|
||||
time: 'updated 4 minutes ago',
|
||||
data: {
|
||||
labels: ['12am', '3pm', '6pm', '9pm', '12pm', '3am', '6am', '9am'],
|
||||
series: [
|
||||
[230, 750, 450, 300, 280, 240, 200, 190],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
lineSmooth,
|
||||
low: 0,
|
||||
high: 1000, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
}, {
|
||||
type: 'Line',
|
||||
color: 'info',
|
||||
title: 'Completed Tasks',
|
||||
subtitle: 'Last Campaign Performance',
|
||||
time: 'campaign sent 26 minutes ago',
|
||||
data: {
|
||||
labels: ['M', 'T', 'W', 'T', 'F', 'S', 'S'],
|
||||
series: [
|
||||
[12, 17, 7, 17, 23, 18, 38],
|
||||
],
|
||||
},
|
||||
options: {
|
||||
lineSmooth,
|
||||
low: 0,
|
||||
high: 50, // creative tim: we recommend you to set the high sa the biggest value + something for a better look
|
||||
chartPadding: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
},
|
||||
},
|
||||
}],
|
||||
headers: [
|
||||
{
|
||||
sortable: false,
|
||||
text: 'ID',
|
||||
value: 'id',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Name',
|
||||
value: 'name',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Salary',
|
||||
value: 'salary',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'Country',
|
||||
value: 'country',
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
sortable: false,
|
||||
text: 'City',
|
||||
value: 'city',
|
||||
align: 'right',
|
||||
},
|
||||
],
|
||||
items: [
|
||||
{
|
||||
id: 1,
|
||||
name: 'Dakota Rice',
|
||||
country: 'Niger',
|
||||
city: 'Oud-Tunrhout',
|
||||
salary: '$35,738',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
name: 'Minerva Hooper',
|
||||
country: 'Curaçao',
|
||||
city: 'Sinaai-Waas',
|
||||
salary: '$23,738',
|
||||
},
|
||||
{
|
||||
id: 3,
|
||||
name: 'Sage Rodriguez',
|
||||
country: 'Netherlands',
|
||||
city: 'Overland Park',
|
||||
salary: '$56,142',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: 'Philip Chanley',
|
||||
country: 'Korea, South',
|
||||
city: 'Gloucester',
|
||||
salary: '$38,735',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: 'Doris Greene',
|
||||
country: 'Malawi',
|
||||
city: 'Feldkirchen in Kārnten',
|
||||
salary: '$63,542',
|
||||
},
|
||||
],
|
||||
stats: [
|
||||
{
|
||||
actionIcon: 'mdi-alert',
|
||||
actionText: 'Get More Space...',
|
||||
color: '#FD9A13',
|
||||
icon: 'mdi-sofa-single',
|
||||
title: 'Bookings',
|
||||
value: '184',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-tag',
|
||||
actionText: 'Tracked from Google Analytics',
|
||||
color: 'primary',
|
||||
icon: 'mdi-chart-bar',
|
||||
title: 'Website Visits',
|
||||
value: '75.521',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-calendar-range',
|
||||
actionText: 'Last 24 Hours',
|
||||
color: 'success',
|
||||
icon: 'mdi-store',
|
||||
title: 'Revenue',
|
||||
value: '$34,245',
|
||||
},
|
||||
{
|
||||
actionIcon: 'mdi-history',
|
||||
actionText: 'Just Updated',
|
||||
color: 'info',
|
||||
icon: 'mdi-twitter',
|
||||
title: 'Followers',
|
||||
value: '+245',
|
||||
},
|
||||
],
|
||||
tabs: 0,
|
||||
tasks: {
|
||||
0: [
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Create 4 Invisible User Experiences you Never Knew About',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
1: [
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: false,
|
||||
},
|
||||
],
|
||||
2: [
|
||||
{
|
||||
text: 'Lines From Great Russian Literature? Or E-mails From My Boss?',
|
||||
value: false,
|
||||
},
|
||||
{
|
||||
text: 'Flooded: One year later, assessing what was lost and what was found when a ravaging rain swept through metro Detroit',
|
||||
value: true,
|
||||
},
|
||||
{
|
||||
text: 'Sign contract for "What are conference organizers afraid of?"',
|
||||
value: true,
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
|
||||
computed: {
|
||||
// sales: get('sales/sales'),
|
||||
// totalSales () {
|
||||
// return this.sales.reduce((acc, val) => acc + val.salesInM, 0)
|
||||
// },
|
||||
},
|
||||
}
|
||||
</script>
|
||||
51
Yi.Vue2.x/src/views/Pan.vue
Normal file
51
Yi.Vue2.x/src/views/Pan.vue
Normal file
@@ -0,0 +1,51 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
企业云盘 — <small class="text-body-1">选择你的角色空间</small>
|
||||
</template>
|
||||
</material-card>
|
||||
</v-col>
|
||||
<v-col cols="6" xl="1" sm="3" v-for="item in roleNameList" :key="item" class="text-center" @click="toInfo(item.id,item.file_path)">
|
||||
|
||||
<v-card>
|
||||
<v-icon size="100">mdi-briefcase-account</v-icon>
|
||||
</v-card>
|
||||
<v-chip class="ma-2" color="primary" text-color="white">
|
||||
{{item.role_name}}
|
||||
</v-chip>
|
||||
</v-col>
|
||||
<v-col cols="6">
|
||||
<v-card> </v-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import userApi from "../api/userApi";
|
||||
export default {
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
|
||||
methods: {
|
||||
toInfo(roleId,filePath)
|
||||
{
|
||||
this.$store.dispatch("Set_BasePath", filePath);
|
||||
this.$router.push(`/paninfo?roleId=${roleId}`);
|
||||
},
|
||||
init(){
|
||||
userApi.GetUserInRolesByHttpUser().then(response=>{
|
||||
const resp=response.data;
|
||||
this.roleNameList=resp.roles
|
||||
})
|
||||
}
|
||||
},
|
||||
data: () => ({
|
||||
roleNameList:[],
|
||||
selected: [],
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
|
||||
115
Yi.Vue2.x/src/views/PanInfo.vue
Normal file
115
Yi.Vue2.x/src/views/PanInfo.vue
Normal file
@@ -0,0 +1,115 @@
|
||||
<template>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
XX-云盘空间 — <small class="text-body-1">浏览属于你的空间</small>
|
||||
</template>
|
||||
|
||||
<v-divider></v-divider>
|
||||
<router-link to="/pan">
|
||||
<app-btn dark class="ma-4">返回 </app-btn></router-link
|
||||
>
|
||||
<app-btn class="my-4 mr-4">全部选中</app-btn>
|
||||
<app-btn class="my-4 mr-4">清空选中</app-btn>
|
||||
|
||||
<app-btn class="my-4" color="secondary" @click="download"
|
||||
>批量下载</app-btn
|
||||
></material-card
|
||||
>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="6"
|
||||
xl="1"
|
||||
sm="3"
|
||||
v-for="i in dirList"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
>
|
||||
<v-card>
|
||||
<v-icon size="100" @click="enter(i)">mdi-briefcase-account</v-icon>
|
||||
</v-card>
|
||||
<v-chip class="ma-2" text-color="white">
|
||||
<v-checkbox
|
||||
v-model="selected"
|
||||
color="primary"
|
||||
:label="i"
|
||||
:value="i"
|
||||
></v-checkbox>
|
||||
</v-chip>
|
||||
</v-col>
|
||||
|
||||
<v-col
|
||||
cols="6"
|
||||
xl="1"
|
||||
sm="3"
|
||||
v-for="i in fileList"
|
||||
:key="i"
|
||||
class="text-center"
|
||||
>
|
||||
<v-card>
|
||||
<v-icon size="100">mdi-badge-account-outline</v-icon>
|
||||
</v-card>
|
||||
<v-chip class="ma-2" text-color="white">
|
||||
<v-checkbox
|
||||
v-model="selected"
|
||||
color="primary"
|
||||
:label="i"
|
||||
:value="i"
|
||||
></v-checkbox>
|
||||
</v-chip>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</template>
|
||||
<script>
|
||||
import panApi from "../api/panApi";
|
||||
export default {
|
||||
data: () => ({
|
||||
dirList: [],
|
||||
fileList: [],
|
||||
selected: [],
|
||||
baseurl:""
|
||||
}),
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
destroyed(){
|
||||
this.$store.dispatch("Set_ExtendPath","");
|
||||
},
|
||||
mounted() {
|
||||
this.baseurl = process.env.VUE_APP_BASE_API;
|
||||
},
|
||||
methods: {
|
||||
download()
|
||||
{
|
||||
panApi.Download(this.$store.getters.path,this.selected) .then(res => {
|
||||
console.log(res.data)
|
||||
//这里linux有问题，可能是nginx的问题，先直接写网关
|
||||
window.open("http://ccnetcore.com:19000/api/file/get/"+res.data);
|
||||
})
|
||||
},
|
||||
enter(enterName) {
|
||||
this.$store.dispatch("Add_ExtendPath", enterName);
|
||||
// console.log(this.$store.state.pan.extendPath);
|
||||
this.init();
|
||||
},
|
||||
|
||||
init() {
|
||||
this.selected=[];
|
||||
// this.$store.dispatch("Set_ExtendPath","");
|
||||
// console.log(this.$store.state.pan.basePath);
|
||||
// console.log(this.$store.state.pan.extendPath);
|
||||
// console.log(this.$store.getters.path);
|
||||
|
||||
panApi.GetPanFiles(this.$store.getters.path).then((response) => {
|
||||
const resp = response.data;
|
||||
|
||||
this.dirList = resp.dirList;
|
||||
this.fileList = resp.fileList;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
153
Yi.Vue2.x/src/views/login.vue
Normal file
153
Yi.Vue2.x/src/views/login.vue
Normal file
@@ -0,0 +1,153 @@
|
||||
<template>
|
||||
<v-card class="auth-card">
|
||||
<!-- logo -->
|
||||
<v-card-title class="d-flex align-center justify-center py-7">
|
||||
<router-link to="/" class="d-flex align-center">
|
||||
<v-img
|
||||
:src="require('@/assets/logo.svg')"
|
||||
max-height="30px"
|
||||
max-width="30px"
|
||||
alt="logo"
|
||||
contain
|
||||
class="me-3"
|
||||
></v-img>
|
||||
<h2 class="text-2xl font-weight-semibold">Yi-Framework</h2>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<!-- title -->
|
||||
<v-card-text>
|
||||
<p class="text-2xl font-weight-semibold text--primary mb-2">
|
||||
欢迎来到CCNetCore! 👋🏻
|
||||
</p>
|
||||
<p class="mb-2">登入你的用户，开始畅游一切</p>
|
||||
</v-card-text>
|
||||
|
||||
<!-- login form -->
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
v-model="form.username"
|
||||
outlined
|
||||
label="用户"
|
||||
placeholder="123456789@qq.com"
|
||||
counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.password"
|
||||
outlined
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
label="密码"
|
||||
placeholder="············"
|
||||
:append-icon="isPasswordVisible ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="isPasswordVisible = !isPasswordVisible"
|
||||
></v-text-field>
|
||||
|
||||
<div class="d-flex align-center justify-space-between flex-wrap">
|
||||
<v-checkbox label="记住密码" hide-details class="me-3 mt-1">
|
||||
</v-checkbox>
|
||||
|
||||
<!-- forgot link -->
|
||||
<a href="javascript:void(0)" class="mt-1"> 忘记密码? </a>
|
||||
</div>
|
||||
|
||||
<v-btn block color="primary" @click="login" class="mt-6" :loading="loader" :disabled="btn_dis"> 登录 </v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<!-- create new account -->
|
||||
<v-card-text class="d-flex align-center justify-center flex-wrap mt-2">
|
||||
<span class="me-2"> 没有我们的账号? </span>
|
||||
<router-link :to="{ path: '/register' }"> 注册账号 </router-link>
|
||||
</v-card-text>
|
||||
|
||||
<!-- divider -->
|
||||
<v-card-text class="d-flex align-center mt-2">
|
||||
<v-divider></v-divider>
|
||||
<span class="mx-5">or</span>
|
||||
<v-divider></v-divider>
|
||||
</v-card-text>
|
||||
|
||||
<!-- social links -->
|
||||
<v-card-actions class="d-flex justify-center ">
|
||||
<v-btn v-for="link in socialLink" :key="link.icon" icon class="ms-1">
|
||||
<v-icon :color="$vuetify.theme.dark ? link.colorInDark : link.color">
|
||||
{{ link.icon }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
created(){
|
||||
this.enterSearch();
|
||||
},
|
||||
data: () => ({
|
||||
btn_dis:false,
|
||||
loader: null,
|
||||
socialLink: [
|
||||
{
|
||||
icon: "mdi-qqchat",
|
||||
color: "#8D5EE0",
|
||||
colorInDark: "#8D5EE0",
|
||||
},
|
||||
{
|
||||
icon: "mdi-facebook",
|
||||
color: "#4267b2",
|
||||
colorInDark: "#4267b2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-twitter",
|
||||
color: "#1da1f2",
|
||||
colorInDark: "#1da1f2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-github",
|
||||
color: "#272727",
|
||||
colorInDark: "#fff",
|
||||
},
|
||||
{
|
||||
icon: "mdi-google",
|
||||
color: "#db4437",
|
||||
colorInDark: "#db4437",
|
||||
},
|
||||
],
|
||||
|
||||
isPasswordVisible: false,
|
||||
form: {
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
}),
|
||||
methods: {
|
||||
enterSearch() {
|
||||
|
||||
document.onkeydown = (e) => {
|
||||
//13表示回车键，baseURI是当前页面的地址，为了更严谨，也可以加别的，可以打印e看一下
|
||||
if (e.keyCode === 13 && e.target.baseURI.match("/")) {
|
||||
//回车后执行搜索方法
|
||||
this.login();
|
||||
}
|
||||
};
|
||||
},
|
||||
login() {
|
||||
this.loader = "true";
|
||||
this.btn_dis=true;
|
||||
this.$store.dispatch("Login", this.form).then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$router.push("/");
|
||||
} else {
|
||||
this.loader=null;
|
||||
this.btn_dis=false;
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
183
Yi.Vue2.x/src/views/register.vue
Normal file
183
Yi.Vue2.x/src/views/register.vue
Normal file
@@ -0,0 +1,183 @@
|
||||
<template>
|
||||
<v-card class="auth-card">
|
||||
<!-- logo -->
|
||||
<v-card-title class="d-flex align-center justify-center py-7">
|
||||
<router-link to="/" class="d-flex align-center">
|
||||
<v-img
|
||||
:src="require('@/assets/logo.svg')"
|
||||
max-height="30px"
|
||||
max-width="30px"
|
||||
alt="logo"
|
||||
contain
|
||||
class="me-3"
|
||||
></v-img>
|
||||
|
||||
<h2 class="text-2xl font-weight-semibold">Yi-Framework</h2>
|
||||
</router-link>
|
||||
</v-card-title>
|
||||
|
||||
<!-- title -->
|
||||
<v-card-text>
|
||||
<p class="text-2xl font-weight-semibold text--primary mb-1">
|
||||
注册-从这里开始 🚀
|
||||
</p>
|
||||
<p class="mb-1">加入我们，获得一个有趣的灵魂！</p>
|
||||
</v-card-text>
|
||||
|
||||
<!-- login form -->
|
||||
<v-card-text>
|
||||
<v-form>
|
||||
<v-text-field
|
||||
v-model="form.username"
|
||||
outlined
|
||||
label="用户名"
|
||||
placeholder="cc"
|
||||
class="mb-1"
|
||||
counter="20"
|
||||
></v-text-field>
|
||||
|
||||
<v-text-field
|
||||
v-model="form.phone"
|
||||
outlined
|
||||
label="电话"
|
||||
placeholder="12345678901"
|
||||
class="mb-1"
|
||||
>
|
||||
</v-text-field>
|
||||
|
||||
<v-row>
|
||||
<v-col cols="9">
|
||||
<v-text-field
|
||||
v-model="code"
|
||||
outlined
|
||||
label="验证码"
|
||||
placeholder="123456"
|
||||
class="mb-1"
|
||||
>
|
||||
</v-text-field>
|
||||
</v-col>
|
||||
<v-col cols="3">
|
||||
<v-btn color="secondary" @click="sendSMS" class="mb-1 mt-1" :disabled="is_en">验证码</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-text-field
|
||||
v-model="form.password"
|
||||
outlined
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
label="密码"
|
||||
placeholder="············"
|
||||
:append-icon="isPasswordVisible ? 'mdi-eye' : 'mdi-eye-off'"
|
||||
@click:append="isPasswordVisible = !isPasswordVisible"
|
||||
></v-text-field>
|
||||
|
||||
<v-checkbox hide-details class="mt-1">
|
||||
<template #label>
|
||||
<div class="d-flex align-center flex-wrap">
|
||||
<span class="me-2">我同意</span
|
||||
><a href="javascript:void(0)">协议 & 策略</a>
|
||||
</div>
|
||||
</template>
|
||||
</v-checkbox>
|
||||
|
||||
<v-btn block color="primary" class="mt-6" @click="register">
|
||||
注册
|
||||
</v-btn>
|
||||
</v-form>
|
||||
</v-card-text>
|
||||
|
||||
<!-- create new account -->
|
||||
<v-card-text class="d-flex align-center justify-center flex-wrap mt-2">
|
||||
<span class="me-2"> 已经存在账号? </span>
|
||||
<router-link :to="{ path: '/login' }"> 跳转登录 </router-link>
|
||||
</v-card-text>
|
||||
|
||||
<!-- divider -->
|
||||
<v-card-text class="d-flex align-center mt-2">
|
||||
<v-divider></v-divider>
|
||||
<span class="mx-5">or</span>
|
||||
<v-divider></v-divider>
|
||||
</v-card-text>
|
||||
|
||||
<!-- social link -->
|
||||
<v-card-actions class="d-flex justify-center">
|
||||
<v-btn v-for="link in socialLink" :key="link.icon" icon class="ms-1">
|
||||
<v-icon :color="$vuetify.theme.dark ? link.colorInDark : link.color">
|
||||
{{ link.icon }}
|
||||
</v-icon>
|
||||
</v-btn>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</template>
|
||||
<script>
|
||||
import accoutAPI from "../api/accountApi";
|
||||
export default {
|
||||
methods: {
|
||||
sendSMS() {
|
||||
this.is_en=true
|
||||
accoutAPI.SendSMS(this.form.phone).then(resp=>{
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
register() {
|
||||
accoutAPI
|
||||
.register(
|
||||
this.form.username,
|
||||
this.form.password,
|
||||
this.form.phone,
|
||||
this.code
|
||||
)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
this.$router.push("/login/");
|
||||
}
|
||||
});
|
||||
},
|
||||
},
|
||||
data: () => ({
|
||||
socialLink: [
|
||||
{
|
||||
icon: "mdi-qqchat",
|
||||
color: "#8D5EE0",
|
||||
colorInDark: "#8D5EE0",
|
||||
},
|
||||
{
|
||||
icon: "mdi-facebook",
|
||||
color: "#4267b2",
|
||||
colorInDark: "#4267b2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-twitter",
|
||||
color: "#1da1f2",
|
||||
colorInDark: "#1da1f2",
|
||||
},
|
||||
{
|
||||
icon: "mdi-github",
|
||||
color: "#272727",
|
||||
colorInDark: "#fff",
|
||||
},
|
||||
{
|
||||
icon: "mdi-google",
|
||||
color: "#db4437",
|
||||
colorInDark: "#db4437",
|
||||
},
|
||||
],
|
||||
isPasswordVisible: false,
|
||||
code: "",
|
||||
is_en:false,
|
||||
form: {
|
||||
phone: "",
|
||||
username: "",
|
||||
password: "",
|
||||
},
|
||||
}),
|
||||
};
|
||||
</script>
|
||||
348
Yi.Vue2.x/src/views/userInfo.vue
Normal file
348
Yi.Vue2.x/src/views/userInfo.vue
Normal file
@@ -0,0 +1,348 @@
|
||||
<template>
|
||||
<v-container id="user-profile-view" fluid tag="section">
|
||||
<v-row justify="center">
|
||||
<v-col cols="12" md="4">
|
||||
<app-card class="mt-4 text-center">
|
||||
<ccAvatar :size="128" class="rounded-circle elevation-6 mt-n12 d-inline-block"></ccAvatar>
|
||||
|
||||
<v-card-text class="text-center">
|
||||
<h6 class="text-h6 mb-2 text--secondary">
|
||||
{{ userInfo.username }}
|
||||
</h6>
|
||||
|
||||
<h4 class="text-h4 mb-3 text--primary">{{ userInfo.nick }}</h4>
|
||||
|
||||
<p class="text--secondary">{{ userInfo.introduction }}</p>
|
||||
<input
|
||||
type="file"
|
||||
ref="imgFile"
|
||||
@change="uploadImage()"
|
||||
class="d-none"
|
||||
/>
|
||||
<v-btn class="mr-4" @click="choiceImg" color="primary" min-width="100" rounded>
|
||||
编辑头像
|
||||
</v-btn>
|
||||
<v-btn color="primary" min-width="100" rounded> 绑定QQ </v-btn>
|
||||
</v-card-text>
|
||||
</app-card>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="8">
|
||||
<material-card color="primary" icon="mdi-account-outline">
|
||||
<template #title>
|
||||
用户信息 — <small class="text-body-1">编辑属于你的一切</small>
|
||||
</template>
|
||||
|
||||
<v-form>
|
||||
<v-tabs class="pl-4" v-model="tab">
|
||||
<v-tab href="#tab-1">
|
||||
账户信息
|
||||
<v-icon>mdi-phone</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-2">
|
||||
额外信息
|
||||
<v-icon>mdi-account-box</v-icon>
|
||||
</v-tab>
|
||||
|
||||
<v-tab href="#tab-3">
|
||||
修改密码
|
||||
<v-icon>mdi-account-box</v-icon>
|
||||
</v-tab>
|
||||
</v-tabs>
|
||||
|
||||
<v-tabs-items v-model="tab">
|
||||
<v-tab-item :value="'tab-1'">
|
||||
<v-card class="py-0">
|
||||
<v-card-text>
|
||||
<div>Account Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
color="purple"
|
||||
label="用户名"
|
||||
v-model="editInfo.username"
|
||||
disabled
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
color="purple"
|
||||
label="昵称"
|
||||
v-model="editInfo.nick"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="4">
|
||||
<v-text-field
|
||||
color="purple"
|
||||
label="邮箱"
|
||||
v-model="editInfo.email"
|
||||
/>
|
||||
</v-col>
|
||||
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
color="purple"
|
||||
label="住址"
|
||||
v-model="editInfo.address"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12" md="6">
|
||||
<v-text-field
|
||||
color="purple"
|
||||
label="电话"
|
||||
type="number"
|
||||
v-model="editInfo.phone"
|
||||
/>
|
||||
</v-col>
|
||||
<v-col cols="12">
|
||||
<v-textarea
|
||||
v-model="editInfo.introduction"
|
||||
color="purple"
|
||||
label="简介"
|
||||
value="空空如也，Ta什么也没有留下"
|
||||
/>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item :value="'tab-2'">
|
||||
<v-card class="py-0 mx-auto">
|
||||
<v-card-text>
|
||||
<div>Extra Information</div>
|
||||
<v-row>
|
||||
<v-col cols="12">
|
||||
<v-list two-line>
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-phone </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>等级：</v-list-item-title>
|
||||
<v-list-item-subtitle>100</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>经验：</v-list-item-title>
|
||||
<v-list-item-subtitle>1000</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
|
||||
<v-list-item-icon>
|
||||
<v-icon>mdi-message-text</v-icon>
|
||||
</v-list-item-icon>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-lock </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有角色：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="item in editInfo.roles"
|
||||
:key="item.id"
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>{{ item.role_name }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>拥有菜单：</v-list-item-title>
|
||||
<v-list-item-subtitle>
|
||||
<v-row>
|
||||
<v-col
|
||||
v-for="item in menuInfo"
|
||||
:key="item.id"
|
||||
cols="6"
|
||||
sm="3"
|
||||
md="1"
|
||||
>{{ item.menu_name }}</v-col
|
||||
>
|
||||
</v-row>
|
||||
</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-divider inset></v-divider>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-icon>
|
||||
<v-icon color="secondary"> mdi-email </v-icon>
|
||||
</v-list-item-icon>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>等待更新：</v-list-item-title>
|
||||
<v-list-item-subtitle>1000</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
|
||||
<v-list-item-content>
|
||||
<v-list-item-title>等待更新：</v-list-item-title>
|
||||
<v-list-item-subtitle>500</v-list-item-subtitle>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
|
||||
<v-list-item>
|
||||
<v-list-item-action></v-list-item-action>
|
||||
<v-list-item-content>
|
||||
<v-btn dark color="primary" class="ml-0" dense>
|
||||
等待更新
|
||||
</v-btn>
|
||||
</v-list-item-content>
|
||||
</v-list-item>
|
||||
<v-divider inset></v-divider>
|
||||
</v-list>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
<v-tab-item :value="'tab-3'">
|
||||
<v-card>
|
||||
<v-card-text>
|
||||
<div>Password Information</div>
|
||||
<v-col cols="12">
|
||||
<v-text-field
|
||||
style="width: 80%"
|
||||
label="原密码"
|
||||
v-model="editInfo.password"
|
||||
outlined
|
||||
clearable
|
||||
></v-text-field>
|
||||
<v-text-field
|
||||
required
|
||||
style="width: 80%"
|
||||
:counter="120"
|
||||
v-model="newPassword"
|
||||
:disabled="dis_newPassword"
|
||||
label="新密码"
|
||||
></v-text-field>
|
||||
</v-col>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</v-tab-item>
|
||||
</v-tabs-items>
|
||||
|
||||
<v-col cols="12" class="text-right">
|
||||
<v-btn color="primary" class="ma-4" min-width="100"> 清空 </v-btn>
|
||||
<v-btn color="secondary" @click="save()" min-width="100">
|
||||
保存
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-form>
|
||||
</material-card>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import fileApi from "../api/fileApi";
|
||||
import userApi from "../api/userApi";
|
||||
import menuApi from "../api/menuApi";
|
||||
import accountApi from "../api/accountApi";
|
||||
export default {
|
||||
name: "UserProfileView",
|
||||
data: () => ({
|
||||
tab: "tab-1",
|
||||
userInfo: {},
|
||||
editInfo: {},
|
||||
newPassword: "",
|
||||
dis_newPassword: true,
|
||||
menuInfo: [],
|
||||
}),
|
||||
created() {
|
||||
this.init();
|
||||
},
|
||||
watch: {
|
||||
editInfo: {
|
||||
handler(val, oldVal) {
|
||||
if (val.password.length > 0) {
|
||||
this.dis_newPassword = false;
|
||||
} else {
|
||||
this.dis_newPassword = true;
|
||||
}
|
||||
},
|
||||
deep: true, //true 深度监听
|
||||
},
|
||||
},
|
||||
|
||||
methods: {
|
||||
save() {
|
||||
accountApi
|
||||
.changePassword(this.editInfo, this.newPassword)
|
||||
.then((resp) => {
|
||||
if (resp.status) {
|
||||
this.$dialog.notify.error(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
} else {
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
}
|
||||
this.init();
|
||||
});
|
||||
},
|
||||
init() {
|
||||
this.newPassword = "";
|
||||
userApi.GetUserInRolesByHttpUser().then((resp) => {
|
||||
this.userInfo = resp.data;
|
||||
this.userInfo.password = "";
|
||||
this.editInfo = Object.assign({}, this.userInfo);
|
||||
this.$store.commit('SET_USER',this.userInfo)
|
||||
});
|
||||
|
||||
|
||||
|
||||
|
||||
menuApi.GetTopMenusByHttpUser().then((resp) => {
|
||||
this.menuInfo = resp.data;
|
||||
});
|
||||
},
|
||||
choiceImg() {
|
||||
this.$refs.imgFile.dispatchEvent(new MouseEvent("click"));
|
||||
},
|
||||
uploadImage() {
|
||||
const file = this.$refs.imgFile.files[0];
|
||||
let formData = new FormData();
|
||||
formData.append("file", file);
|
||||
fileApi.EditIcon(formData).then(resp=>{
|
||||
this.init();
|
||||
this.$dialog.notify.success(resp.msg, {
|
||||
position: "top-right",
|
||||
timeout: 5000,
|
||||
});
|
||||
})
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
23
Yi.Vue2.x/vue.config.js
Normal file
23
Yi.Vue2.x/vue.config.js
Normal file
@@ -0,0 +1,23 @@
|
||||
module.exports = {
|
||||
// publicPath: './',
|
||||
transpileDependencies: [
|
||||
'vuetify'
|
||||
],
|
||||
devServer: {
|
||||
port: 6789,
|
||||
open: true,
|
||||
https: false,
|
||||
host: "localhost",
|
||||
proxy: {
|
||||
[process.env.VUE_APP_BASE_API]: {
|
||||
target: process.env.VUE_APP_SERVICE_URL,
|
||||
changeOrigin: true,
|
||||
pathRewrite: {
|
||||
['^' + process.env.VUE_APP_BASE_API]: ''
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
lintOnSave: false, //关闭格式检查
|
||||
productionSourceMap: false
|
||||
}
|
||||
Reference in New Issue
Block a user