Skip to content
This repository was archived by the owner on Oct 17, 2023. It is now read-only.

Commit 923b2d5

Browse files
CksheuenCksheuen
committed
补充添加功能
补充添加功能（按需导入负面优化
1 parent 5839cf7 commit 923b2d5

11 files changed

+491
-37
lines changed

‎cksheuen/auto-imports.d.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
/* eslint-disable */
2+
/* prettier-ignore */
3+
// @ts-nocheck
4+
// noinspection JSUnusedGlobalSymbols
5+
// Generated by unplugin-auto-import
6+
export {}
7+
declare global {
8+
9+
}

‎cksheuen/components.d.ts

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable */
2+
/* prettier-ignore */
3+
// @ts-nocheck
4+
// Generated by unplugin-vue-components
5+
// Read more: https://github.com/vuejs/core/pull/3399
6+
export {}
7+
8+
declare module 'vue' {
9+
export interface GlobalComponents {
10+
DeleteBut: typeof import('./src/components/DeleteBut.vue')['default']
11+
Detail: typeof import('./src/components/Detail.vue')['default']
12+
ElButton: typeof import('element-plus/es')['ElButton']
13+
ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
14+
ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
15+
ElInput: typeof import('element-plus/es')['ElInput']
16+
ElPagination: typeof import('element-plus/es')['ElPagination']
17+
ElPopconfirm: typeof import('element-plus/es')['ElPopconfirm']
18+
ElTable: typeof import('element-plus/es')['ElTable']
19+
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
20+
RouterLink: typeof import('vue-router')['RouterLink']
21+
RouterView: typeof import('vue-router')['RouterView']
22+
Table: typeof import('./src/components/Table.vue')['default']
23+
}
24+
}

‎cksheuen/package.json

+2
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,8 @@
2424
"@vue/tsconfig": "^0.4.0",
2525
"npm-run-all2": "^6.0.6",
2626
"typescript": "~5.2.0",
27+
"unplugin-auto-import": "^0.16.6",
28+
"unplugin-vue-components": "^0.25.2",
2729
"vite": "^4.4.9",
2830
"vue-tsc": "^1.8.11"
2931
}

‎cksheuen/src/App.vue

+4-3
Original file line numberDiff line numberDiff line change
@@ -11,9 +11,10 @@ import { RouterLink, RouterView } from 'vue-router';
1111
padding: 0;
1212
margin: 0;
1313
}
14+
15+
html,
16+
body,
1417
#app {
1518
height: 100vh;
16-
overflow: hidden;
1719
background-color: rgb(245, 245, 245);
18-
}
19-
</style>
20+
}</style>

‎cksheuen/src/components/Detail.vue

+6-9
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
:before-close="handleClose">
44
<el-descriptions class="margin-top" title="Details" :column="3" border>
55
<template #extra>
6-
<el-button v-if="editState" @click="saveNewVal">Confirm</el-button>
6+
<el-button v-if="controlData.editState" @click="saveNewVal">Confirm</el-button>
77
<el-button type="primary" @click="changeEditState">Edit</el-button>
88
</template>
99
<el-descriptions-item v-for="item in controlData.dataKeyName">
@@ -13,12 +13,12 @@
1313
</div>
1414
</template>
1515
<el-input id="newVal" v-model="controlData.data[controlData.detaiIndex]![item]"
16-
v-if="editState && item != 'images' && item != 'thumbnail'" />
16+
v-if="controlData.editState && item != 'images' && item != 'thumbnail'" />
1717

18-
<div class="content" v-if="item != 'images' && item != 'thumbnail' && !editState">
18+
<div class="content" v-if="item != 'images' && item != 'thumbnail' && !controlData.editState">
1919
{{ controlData.data[controlData.detaiIndex]![item] }}
2020
</div>
21-
<img v-else-if="item != 'thumbnail' && !editState"
21+
<img v-else-if="item != 'thumbnail' && !controlData.editState"
2222
:src="controlData.data[controlData.detaiIndex]?.images[0]"
2323
:alt="controlData.data[controlData.detaiIndex]?.title">
2424
</el-descriptions-item>
@@ -33,22 +33,19 @@ import { useControlData } from '@/stores/useControlData';
3333
3434
const controlData = useControlData()
3535
36-
let editState = ref<boolean>(false)
37-
3836
const handleClose = () => {
3937
controlData.close()
38+
controlData.checkState(false)
4039
}
4140
4241
const changeEditState = () => {
43-
editState.value = !editState.value
44-
42+
controlData.checkState(!controlData.editState)
4543
}
4644
4745
const saveNewVal = () => {
4846
let domArr = document.querySelectorAll('#newVal')
4947
for (let i = 0; i < domArr.length; i++)
5048
controlData.editItem(i, (domArr[i] as HTMLInputElement).value)
51-
console.log(controlData);
5249
5350
changeEditState()
5451
}

‎cksheuen/src/components/Table.vue

+43-3
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,10 @@
11
<template>
2-
<el-table class="main" :data="getArr((currentPage - 1) * 5 + 1, currentPage * 5)" border stripe
3-
:default-sort="{ prop: 'date', order: 'descending' }">
2+
<div class="but">
3+
<el-button type="success" @click="addItem">Add</el-button>
4+
<el-button type="danger" @click="deleteItem">Delete</el-button>
5+
</div>
6+
<el-table class="main" :data="currentData" border stripe :default-sort="{ prop: 'date', order: 'descending' }"
7+
@selection-change="handleSelectionChange">
48

59
<el-table-column type="selection" width="55" />
610
<el-table-column fixed prop="id" label="id" sortable />
@@ -35,6 +39,11 @@ import { ref, computed } from 'vue'
3539
import { useControlData } from '@/stores/useControlData';
3640
3741
let currentPage = ref(1)
42+
let currentData = ref(computed(() => {
43+
return getArr((currentPage.value - 1) * 5 + 1, currentPage.value * 5)
44+
}))
45+
46+
let nowSelected: any = [];
3847
3948
const controlData = useControlData()
4049
controlData.setNewVal(js.products)
@@ -59,6 +68,31 @@ const getArr = (x: number, y: number) => {
5968
const emitDetail = (index: number) => {
6069
controlData.open(index)
6170
71+
}
72+
73+
const addItem = () => {
74+
controlData.pushNewItem()
75+
controlData.open(controlData.data.at(-1).id - 1)
76+
controlData.checkState(true)
77+
}
78+
79+
const handleSelectionChange = (val: any) => {
80+
nowSelected = []
81+
val.forEach((element: any, index: number) => {
82+
nowSelected[index] = element.id
83+
});
84+
}
85+
const deleteItem = () => {
86+
console.log(nowSelected);
87+
88+
nowSelected.forEach((id: number, index: number) => {
89+
console.log(id);
90+
91+
controlData.idDelItem(id)
92+
console.log(controlData.data);
93+
94+
});
95+
6296
}
6397
</script>
6498

@@ -67,11 +101,17 @@ const emitDetail = (index: number) => {
67101
display: inline-block;
68102
width: 90vw;
69103
margin-top: 75px;
70-
left: calc(50vw - 45vw);
104+
left: calc(5vw);
71105
}
72106
73107
.demo-pagination-block {
74108
margin-top: 10px;
75109
margin-left: 5vw;
76110
}
111+
112+
.but {
113+
position: absolute;
114+
top: 30px;
115+
left: calc(5vw);
116+
}
77117
</style>

‎cksheuen/src/main.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,14 @@
11
import { createApp } from 'vue';
22
import { createPinia } from 'pinia';
33

4-
import ElementPlus from 'element-plus'
5-
import 'element-plus/dist/index.css'
6-
74
import App from './App.vue';
85
import router from './router';
96

10-
117
const APP = createApp(App);
128

139
const pinia = createPinia();
1410

1511
APP.use(router);
16-
APP.use(ElementPlus);
1712
APP.use(pinia);
1813

19-
APP.mount('#app');
14+
APP.mount('#app');

‎cksheuen/src/stores/useControlData.ts

+33
Original file line numberDiff line numberDiff line change
@@ -18,21 +18,46 @@ interface Data {
1818

1919
export const useControlData = defineStore('useControlData', () => {
2020
let data = ref<Data[]>([]);
21+
let newItem: Data = {
22+
id: 0,
23+
title: '',
24+
description: '',
25+
price: 0,
26+
discountPercentage: 0,
27+
rating: 0,
28+
stock: 0,
29+
brand: '',
30+
category: '',
31+
thumbnail: '',
32+
images: [''],
33+
};
2134
let dataKeyName: any[] = [];
2235

2336
let detailState = ref<boolean>(false);
2437
let detaiIndex = ref<number>(0);
2538

39+
let editState = ref<boolean>(false);
40+
2641
function setNewVal(newData: Data[]): void {
2742
data.value = newData;
2843
if (!dataKeyName[0])
2944
for (let key in newData[0]) {
3045
dataKeyName.push(key);
3146
}
47+
newItem.id = data.value.at(-1).id;
48+
}
49+
function pushNewItem() {
50+
newItem.id++;
51+
data.value.push(newItem);
3252
}
3353
function delItem(index: number): void {
3454
data?.value?.splice(index, 1);
3555
}
56+
function idDelItem(id: number): void {
57+
data.value = data.value.filter((item, index, arr) => {
58+
return data.value[index].id != id ? data.value[index] : null;
59+
});
60+
}
3661
function editItem(index: number, newVal: string): void {
3762
data.value[index][dataKeyName[index]] = newVal;
3863
}
@@ -46,15 +71,23 @@ export const useControlData = defineStore('useControlData', () => {
4671
detailState.value = false;
4772
}
4873

74+
function checkState(state: boolean): void {
75+
editState.value = state;
76+
}
77+
4978
return {
5079
data,
5180
setNewVal,
81+
pushNewItem,
5282
delItem,
83+
idDelItem,
5384
detailState,
5485
open,
5586
close,
5687
detaiIndex,
5788
dataKeyName,
5889
editItem,
90+
editState,
91+
checkState,
5992
};
6093
});

‎cksheuen/tsconfig.node.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@
99
],
1010
"compilerOptions": {
1111
"composite": true,
12-
"module": "ESNext",
12+
"module": "ES2022",
1313
"moduleResolution": "Bundler",
1414
"types": ["node"]
1515
}

‎cksheuen/vite.config.ts

+21-12
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
1-
import { fileURLToPath, URL } from 'node:url'
1+
import { fileURLToPath, URL } from 'node:url';
22

3-
import { defineConfig } from 'vite'
4-
import vue from '@vitejs/plugin-vue'
3+
import { defineConfig } from 'vite';
4+
import vue from '@vitejs/plugin-vue';
5+
import AutoImport from 'unplugin-auto-import/vite';
6+
import Components from 'unplugin-vue-components/vite';
7+
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers';
58

69
// https://vitejs.dev/config/
710
export default defineConfig({
8-
plugins: [
9-
vue(),
10-
],
11-
resolve: {
12-
alias: {
13-
'@': fileURLToPath(new URL('./src', import.meta.url))
14-
}
15-
}
16-
})
11+
plugins: [
12+
vue(),
13+
AutoImport({
14+
resolvers: [ElementPlusResolver()],
15+
}),
16+
Components({
17+
resolvers: [ElementPlusResolver()],
18+
}),
19+
],
20+
resolve: {
21+
alias: {
22+
'@': fileURLToPath(new URL('./src', import.meta.url)),
23+
},
24+
},
25+
});

0 commit comments

Comments
 (0)