xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

上传前端测试

Browse Source
This commit is contained in:
橙子
2021-10-10 17:10:35 +08:00
parent ac1d398e69
commit 945437a2eb
30 changed files with 11061 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
vuetify-test/.browserslistrc Normal file
View File

@@ -0,0 +1,3 @@
> 1%
last 2 versions
not dead

4
vuetify-test/.env.development Normal file
View File

@@ -0,0 +1,4 @@
#接口服务地址
VUE_APP_SERVICE_URL='https://localhost:44334'
#开发环境路径前缀
VUE_APP_BASE_API='/dev-apis'

2
vuetify-test/.env.production Normal file
View File

@@ -0,0 +1,2 @@
#生成环境路径前缀
VUE_APP_BASE_API='/prod-apis'

23
vuetify-test/.gitignore vendored Normal file
View 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
vuetify-test/README.md Normal file
View 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/).

10169
vuetify-test/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

24
vuetify-test/package.json Normal file
View File

@@ -0,0 +1,24 @@
{
"name": "vuetify-test",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build"
},
"dependencies": {
"axios": "^0.22.0",
"vue": "^2.6.11",
"vue-router": "^3.2.0",
"vuetify": "^2.4.0"
},
"devDependencies": {
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"sass": "~1.32.0",
"sass-loader": "^10.0.0",
"vue-cli-plugin-vuetify": "~2.4.2",
"vue-template-compiler": "^2.6.11",
"vuetify-loader": "^1.7.0"
}
}

BIN
vuetify-test/public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

19
vuetify-test/public/index.html Normal file
View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>

55
vuetify-test/src/App.vue Normal file
View File

@@ -0,0 +1,55 @@
<template>
<v-app>
<v-app-bar
app
color="primary"
dark
>
<div class="d-flex align-center">
<v-img
alt="Vuetify Logo"
class="shrink mr-2"
contain
src="https://cdn.vuetifyjs.com/images/logos/vuetify-logo-dark.png"
transition="scale-transition"
width="40"
/>
<v-img
alt="Vuetify Name"
class="shrink mt-1 hidden-sm-and-down"
contain
min-width="100"
src="https://cdn.vuetifyjs.com/images/logos/vuetify-name-dark.png"
width="100"
/>
</div>
<v-spacer></v-spacer>
<v-btn
href="https://github.com/vuetifyjs/vuetify/releases/latest"
target="_blank"
text
>
<span class="mr-2">Latest Release</span>
<v-icon>mdi-open-in-new</v-icon>
</v-btn>
</v-app-bar>
<v-main>
<router-view/>
</v-main>
</v-app>
</template>
<script>
export default {
name: 'App',
data: () => ({
//
}),
};
</script>

BIN
vuetify-test/src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

1
vuetify-test/src/assets/logo.svg Normal file
View 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>
Side by Side

After

Width:  |  Height:  |  Size: 539 B

98
vuetify-test/src/components/HelloWorld.vue Normal file
View File

@@ -0,0 +1,98 @@
<template>
<div>
<p>导航栏</p>
<v-card class="mx-auto" width="300">
<ccList :items="items"></ccList>
</v-card>
<p>表格</p>
<v-card class="mx-auto" width="1000">
<ccTable :defaultItem="defaultItem" :headers="headers" :axiosUrls="axiosUrls" ></ccTable>
</v-card>
</div>
</template>
<script>
import ccList from "./List.vue";
import ccTable from "./Table.vue"
export default {
components: {
ccList,
ccTable
},
data: () => ({
axiosUrls:{
get:"action/getactions",
update:"action/updateaction",
del:"action/delAllaction",
add:"action/addaction"
},
headers: [
{text: "编号",align: "start",value: "id"},
{ text: "权限名", value: "action_name", sortable: false },
{ text: "路由", value: "router", sortable: false },
{ text: "图标", value: "icon", sortable: false },
{ text: "排序", value: "sort", sortable: true },
{ text: "操作", value: "actions", sortable: false },
],
defaultItem: {
action_name: "test",
router: "/my/",
icon: "mdi-lock",
sort:"1"
},
items: [
{
title: "Dashboard",
icon: "mdi-view-dashboard",
to: "/",
items: [
{
title: "Dashboard",
icon: "mdi-view-dashboard",
to: "/",
items: [
{
title: "User Profile",
icon: "mdi-account",
to: "/components/profile/",
},
],
},
],
},
{
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/",
},
],
}),
};
</script>

38
vuetify-test/src/components/List.vue Normal file
View File

@@ -0,0 +1,38 @@
<template>
<v-list
expand
nav
v-bind="$attrs"
v-on="$listeners"
>
<template v-for="(item, i) in items">
<default-list-group
v-if="item.items"
: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>

88
vuetify-test/src/components/ListGroup.vue Normal file
View File

@@ -0,0 +1,88 @@
<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.title">
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</template>
<template v-for="(child, i) in item.items">
<default-list-group
v-if="child.items"
:key="`sub-group-${i}`"
:item="child"
/>
<default-list-item
v-if="!child.items"
:key="`child-${i}`"
:item="child"
/>
</template>
</v-list-group>
</template>
<script>
// Utilities
export default {
name: 'DefaultListGroup',
components: {
DefaultListItem: () => import('./ListItem'),
},
props: {
item: {
type: Object,
default: () => ({}),
},
},
computed: {
// gradient: get('user/drawer@gradient'),
group () {
return this.genGroup(this.item.items)
},
title () {
const matches = this.item.title.match(/\b(\w)/g)
return matches.join('')
},
},
methods: {
genGroup (items) {
return items.reduce((acc, cur) => {
if (!cur.to) return acc
acc.push(
cur.items
? this.genGroup(cur.items)
: cur.to.slice(1, -1),
)
return acc
}, []).join('|')
},
},
}
</script>

56
vuetify-test/src/components/ListItem.vue Normal file
View File

@@ -0,0 +1,56 @@
<template>
<v-list-item
:href="item.href"
:rel="item.href ? 'nofollow' : undefined"
:target="item.href ? '_blank' : undefined"
:to="item.to"
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.title">
<v-list-item-title v-text="item.title" />
</v-list-item-content>
</v-list-item>
</template>
<script>
export default {
name: 'DefaultListItem',
props: {
item: {
type: Object,
default: () => ({}),
},
},
computed: {
title () {
const matches = this.item.title.match(/\b(\w)/g)
return matches.join('')
},
},
}
</script>

213
vuetify-test/src/components/Table.vue Normal file
View File

@@ -0,0 +1,213 @@
<template>
<v-card>
<v-data-table
:headers="headers"
:items="desserts"
sort-by="calories"
class="elevation-1"
item-key="id"
show-select
v-model="selected"
:search="search"
>
<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 color="primary" dark class="mb-2 mx-2" @click="dialog = true">
添加新项
</v-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-btn color="red" dark class="mb-2" @click="deleteItem(null)">
删除所选
</v-btn>
<!-- 删除提示框 -->
<v-dialog v-model="dialogDelete" max-width="500px">
<v-card>
<v-card-title class="headline"
>你确定要删除此条记录吗？</v-card-title
>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn color="blue darken-1" text @click="closeDelete"
>取消</v-btn
>
<v-btn color="blue darken-1" text @click="deleteItemConfirm"
>确定</v-btn
>
<v-spacer></v-spacer>
</v-card-actions>
</v-card>
</v-dialog>
</v-toolbar>
</template>
<!-- 表格中的删除和修改 -->
<template v-slot:item.actions="{ item }">
<v-icon small class="mr-2" @click="editItem(item)"> mdi-pencil </v-icon>
<v-icon 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>
</v-card>
</template>
<script>
import itemApi from './TableApi.js'
export default {
props: {
defaultItem: {
type: Object,
},
headers: {
type: Array,
},
axiosUrls:{
type: Object,
}
},
data: () => ({
page: 1,
selected: [],
search: "",
dialog: false,
dialogDelete: false,
desserts: [],
editedIndex: -1,
editedItem: {},
}),
computed: {
formTitle() {
return this.editedIndex === -1 ? "添加数据" : "编辑数据";
},
},
watch: {
dialog(val) {
val || this.close();
},
dialogDelete(val) {
val || this.closeDelete();
},
},
created() {
this.initialize();
},
methods: {
initialize() {
itemApi.getItem(this.axiosUrls.get).then((resp) => {
const response = resp.data;
this.desserts = response;
});
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;
},
deleteItem(item) {
this.editedIndex = this.desserts.indexOf(item);
this.editedItem = Object.assign({}, item);
this.dialogDelete = true;
},
deleteItemConfirm() {
var Ids = [];
if (this.editedIndex > -1) {
Ids.push(this.editedItem.id);
} else {
this.selected.forEach(function (item) {
Ids.push(item.id);
});
}
alert("多行删除");
ItemApi.delItemList(this.axiosUrls.del,Ids).then(() => this.initialize());
this.closeDelete();
},
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) {
alert("多行更新");
ItemApi.updateItem(this.axiosUrls.update,this.editedItem).then(() => this.initialize());
} else {
alert("添加");
ItemApi.addItem(this.axiosUrls.add,this.editedItem).then(() => this.initialize());
}
this.close();
},
},
};
</script>

30
vuetify-test/src/components/TableApi.js Normal file
View File

@@ -0,0 +1,30 @@
import myaxios from '@/utils/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: 'cut',
data: data
})
},
delItemList(url, Ids) {
return myaxios({
url: url,
method: 'del',
data: Ids
})
},
}

12
vuetify-test/src/main.js Normal file
View File

@@ -0,0 +1,12 @@
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import vuetify from './plugins/vuetify'
Vue.config.productionTip = false
new Vue({
router,
vuetify,
render: function(h) { return h(App) }
}).$mount('#app')

7
vuetify-test/src/plugins/vuetify.js Normal file
View File

@@ -0,0 +1,7 @@
import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
Vue.use(Vuetify);
export default new Vuetify({
});

31
vuetify-test/src/router/index.js Normal file
View File

@@ -0,0 +1,31 @@
import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'
Vue.use(VueRouter)
const routes = [{
path: '/',
name: 'Home',
component: Home
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: function() {
return import ( /* webpackChunkName: "about" */ '../views/About.vue')
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router

13
vuetify-test/src/utils/dialog.js Normal file
View 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 };

16
vuetify-test/src/utils/myaction.js Normal file
View File

@@ -0,0 +1,16 @@
const actionList = [
"用户管理",
"角色管理",
"权限管理",
"板块管理",
"等级管理",
"主题管理",
"设置管理",
"横幅管理",
"版本管理",
"道具管理",
"商城管理",
"日志管理",
"类型管理"
];
export default { actionList };

36
vuetify-test/src/utils/myaxios.js Normal file
View File

@@ -0,0 +1,36 @@
import axios from 'axios'
// import store from '../store/index'
// 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(function(response) {
const resp = response.data
// store.dispatch("closeLoad");
return resp;
}, function(error) {
const resp = error.response.data
if (resp.code == undefined && resp.msg == undefined) {
alert(`错误代码：无，原因：与服务器失去连接`)
} else if (resp.code != 200) {
alert(`错误代码：${resp.code}，原因：${resp.msg}`)
}
// store.dispatch("closeLoad");
return Promise.reject(error);
});
export default myaxios

9
vuetify-test/src/utils/myqq.js Normal file
View 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 };

34
vuetify-test/src/utils/signalR.js Normal file
View 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
vuetify-test/src/utils/usertoken.js Normal file
View 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)
}

5
vuetify-test/src/views/About.vue Normal file
View File

@@ -0,0 +1,5 @@
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>

15
vuetify-test/src/views/Home.vue Normal file
View File

@@ -0,0 +1,15 @@
<template>
<hello-world />
</template>
<script>
import HelloWorld from '../components/HelloWorld'
export default {
name: 'Home',
components: {
HelloWorld,
},
}
</script>

23
vuetify-test/vue.config.js Normal file
View 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
}