上传前端测试
This commit is contained in:
橙子
98
vuetify-test/src/components/HelloWorld.vue
Normal file
98
vuetify-test/src/components/HelloWorld.vue
Normal 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
38
vuetify-test/src/components/List.vue
Normal 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
88
vuetify-test/src/components/ListGroup.vue
Normal 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
56
vuetify-test/src/components/ListItem.vue
Normal 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
213
vuetify-test/src/components/Table.vue
Normal 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
30
vuetify-test/src/components/TableApi.js
Normal 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
|
||||
})
|
||||
},
|
||||
}
|
||||
Reference in New Issue
Block a user