Skip to content

Commit e8de88c

Browse files
author
“jiafen”
committed
增加modal
1 parent 35e3b12 commit e8de88c

File tree

4 files changed

+119
-23
lines changed

4 files changed

+119
-23
lines changed

‎src/components/Modal.vue‎ renamed to ‎src/components/AddModal.vue‎

Lines changed: 14 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,13 @@
11
<template>
22
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
3+
34
<div class="bg-white rounded-lg p-6 w-2/3 lg:w-1/3">
45
<div class="flex justify-end">
5-
<el-button @click="$emit('closeModal')" type="primary" native-type="button" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600 font-bold p-2">
6+
<el-button @click="$emit('closeAddModal')" type="primary" native-type="button" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600 font-bold p-2">
67
x
78
</el-button>
89
</div>
10+
<p class="text-center text-3xl text-gray-500">{{ tableTitle }}</p>
911
<el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="submitForm" class="mt-6" hide-required-asterisk>
1012
<el-form-item
1113
v-for="(column, index) in formColumns"
@@ -18,9 +20,9 @@
1820
</el-form-item>
1921

2022
<div class="flex justify-end">
21-
<el-form-item label-position="right">
23+
<el-form-item>
2224
<el-button type="primary" native-type="submit" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
23-
送出
25+
新增
2426
</el-button>
2527
</el-form-item>
2628
</div>
@@ -37,23 +39,28 @@
3739
formColumns: {
3840
type: Array,
3941
default: () => []
42+
},
43+
tableTitle: {
44+
type: String,
45+
default: () => ''
4046
}
4147
})
48+
defineEmits(['closeAddModal'])
49+
4250
const formRef = ref(null)
4351
const form = ref({})
4452
const rules = ref({})
4553
4654
props.formColumns.forEach(column => {
4755
form.value[column.field] = ''
48-
if (column.is_primary_key) {
49-
rules.value[column.field] = [{ required: true, message: `請輸入${column.header}`, trigger: 'blur' }]
50-
}
56+
rules.value[column.field] = [{ required: true, message: `請輸入${column.header}`, trigger: 'blur' }]
5157
})
5258
5359
5460
const submitForm = () => {
61+
console.log(form.value)
5562
formRef.value.validate( async (valid) => {
56-
if (!valid) return ElMessage.error('請正確填寫登入信息')
63+
if (!valid) return ElMessage.error('請正確填寫表單')
5764
try {
5865
} catch (error) {
5966
}

‎src/components/EditModal.vue‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
<template>
2+
<div class="fixed inset-0 bg-black bg-opacity-50 flex justify-center items-center">
3+
<div class="bg-white rounded-lg p-6 w-2/3 lg:w-1/3">
4+
<div class="flex justify-end">
5+
<el-button @click="$emit('closeEditModal')" type="primary" native-type="button" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600 font-bold p-2">
6+
x
7+
</el-button>
8+
</div>
9+
<el-form :model="form" :rules="rules" ref="formRef" @submit.prevent="submitForm" class="mt-6" hide-required-asterisk>
10+
<el-form-item
11+
v-for="(column, index) in formColumns"
12+
:key="column.field"
13+
:label="column.header"
14+
:prop="column.field"
15+
label-position="top"
16+
>
17+
<el-input v-model="form[column.field]"></el-input>
18+
</el-form-item>
19+
20+
<div class="flex justify-end">
21+
<el-form-item>
22+
<el-button type="primary" native-type="submit" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
23+
送出
24+
</el-button>
25+
</el-form-item>
26+
</div>
27+
</el-form>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script setup>
33+
import { ref } from 'vue'
34+
import { ElMessage } from 'element-plus'
35+
36+
const props = defineProps({
37+
formColumns: {
38+
type: Array,
39+
default: () => []
40+
},
41+
selectedRow: {
42+
type: Object,
43+
default: () => {}
44+
}
45+
})
46+
defineEmits(['closeEditModal'])
47+
48+
const formRef = ref(null)
49+
const form = ref({})
50+
const rules = ref({})
51+
52+
props.formColumns.forEach(column => {
53+
form.value[column.field] = ''
54+
rules.value[column.field] = [{ required: true, message: `請輸入${column.header}`, trigger: 'blur' }]
55+
})
56+
57+
if(props.selectedRow.length !== 0) {
58+
Object.keys(form.value).forEach((column)=>{
59+
form.value[column] = props.selectedRow[column]
60+
})
61+
}
62+
63+
64+
const submitForm = () => {
65+
console.log(form.value)
66+
formRef.value.validate( async (valid) => {
67+
if (!valid) return ElMessage.error('請正確填寫表單')
68+
try {
69+
} catch (error) {
70+
}
71+
})
72+
}
73+
</script>

‎src/components/Table.vue‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,10 +3,12 @@
33
<el-main class="bg-white">
44
<el-table v-if="tableHeader.length !== 0" :data="tableData" class="bg-white rounded-lg shadow text-lg">
55
<el-table-column v-for="(col, index) in tableHeader" :prop="col" :label="col" :key="index"/>
6-
<el-table-column prop="edit" label="edit">
7-
<el-button @click="$emit('openModal')" type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
8-
<el-icon><Edit /></el-icon>
9-
</el-button>
6+
<el-table-column label="edit">
7+
<template v-slot="scope">
8+
<el-button @click="$emit('openEditModal', scope.row)" type="primary" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">
9+
<el-icon><Edit /></el-icon>
10+
</el-button>
11+
</template>
1012
</el-table-column>
1113
</el-table>
1214
<p v-else class="text-center text-lg text-gray-500">No data</p>
@@ -29,5 +31,5 @@
2931
default: () => ''
3032
}
3133
})
32-
defineEmits(['openModal'])
34+
defineEmits(['openEditModal'])
3335
</script>

‎src/views/HomeView.vue‎

Lines changed: 25 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,15 @@
55
<el-container>
66
<el-header class="bg-white border-b flex items-center justify-between md:justify-end" >
77
<el-icon @click="toggleSidebar" class="text-black block md:hidden cursor-pointer" :class="{'fixed left-32 z-50 text-white': !sidebarOpen}"><Menu /></el-icon>
8-
<el-button type="primary" :class="{'fixed right-5' : !sidebarOpen}" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">新增</el-button>
8+
<el-button @click="openAddModal" type="primary" :class="{'fixed right-5' : !sidebarOpen}" class="bg-gray-500 hover:bg-gray-600 border-gray-500 hover:border-gray-600">新增</el-button>
99
</el-header>
1010

11-
<Table :tableData="tableData" :tableHeader="tableHeader" @openModal="openModal" :tableTitle="tableTitle"/>
11+
<Table :tableData="tableData" :tableHeader="tableHeader" @openEditModal="openEditModal" :tableTitle="tableTitle"/>
1212

1313
</el-container>
14-
<Modal class="z-50" v-if="isVisible" @closeModal="closeModal" :formColumns="formColumns"/>
14+
<EditModal class="z-50" v-if="EditIsVisible" @closeEditModal="closeEditModal" :formColumns="formColumns" :selectedRow="selectedRow"/>
15+
16+
<AddModal class="z-50" v-if="AddIsVisible" @closeAddModal="closeAddModal" :formColumns="formColumns" :tableTitle="tableTitle"/>
1517
</el-container>
1618
</main>
1719
</template>
@@ -23,7 +25,8 @@
2325
import { ElMessage } from 'element-plus'
2426
import Sidebar from '@/components/Sidebar.vue'
2527
import Table from '@/components/Table.vue'
26-
import Modal from '@/components/Modal.vue'
28+
import EditModal from '@/components/EditModal.vue'
29+
import AddModal from '@/components/AddModal.vue'
2730
2831
import { logout, tableNames, modelData } from '@/composables/apis'
2932
@@ -54,26 +57,37 @@
5457
const formColumns = ref([])
5558
const tableTitle = ref('')
5659
const getTableData = async (name) => {
60+
console.log(name)
5761
try {
5862
const res = await modelData(name)
5963
tableTitle.value = name
64+
formColumns.value = res.data.columns
6065
if(res.data.rows.length === 0) return tableHeader.value = []
6166
tableData.value = res.data.rows
62-
formColumns.value = res.data.columns
6367
tableHeader.value = Object.keys(res.data.rows[0])
6468
} catch (error) {
6569
// 錯誤處理邏輯可以在這裡添加
6670
}
6771
}
6872
69-
const isVisible = ref(false)
70-
const openModal = () => {
71-
isVisible.value = true
73+
const EditIsVisible = ref(false)
74+
const selectedRow = ref({})
75+
const openEditModal = (row) => {
76+
selectedRow.value = row
77+
EditIsVisible.value = true
7278
}
73-
const closeModal = () => {
74-
isVisible.value = false
79+
const closeEditModal = () => {
80+
EditIsVisible.value = false
7581
}
76-
82+
83+
const AddIsVisible = ref(false)
84+
const openAddModal = () => {
85+
AddIsVisible.value = true
86+
}
87+
const closeAddModal = () => {
88+
AddIsVisible.value = false
89+
}
90+
7791
const isMdScreen = ref(window.innerWidth)
7892
watch(isMdScreen, (nV) => {
7993
if (nV >= 768) sidebarOpen.value = true

0 commit comments

Comments
 (0)