feat: 增加编辑操作

NMTuan · Jul 13, 2023 · e4396f7 · e4396f7
1 parent 40aa1e6
commit e4396f7
Show file tree

Hide file tree

Showing 4 changed files with 140 additions and 8 deletions.
diff --git a/components/manager/detail.vue b/components/manager/detail.vue
@@ -2,13 +2,13 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-07-13 17:22:21
- * @LastEditTime: 2023-07-13 17:47:46
+ * @LastEditTime: 2023-07-13 20:11:00
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\manager\detail.vue
 -->
 <template>
-    <el-drawer title="detail" :model-value="visible" direction="rtl" :before-close="handlerClose">
+    <el-drawer title="Detail" :model-value="visible" direction="rtl" :before-close="handlerClose">
         <el-descriptions class="descriptions" direction="vertical" :column="1" border>
             <el-descriptions-item v-for=" (val, key) in data" :label="key">
                 <pre v-if="(typeof val === 'object')">{{ val }}</pre>

diff --git a/components/manager/edit.vue b/components/manager/edit.vue
@@ -0,0 +1,75 @@
+<!--
+ * @Author: NMTuan
+ * @Email: NMTuan@qq.com
+ * @Date: 2023-07-13 17:22:21
+ * @LastEditTime: 2023-07-13 21:02:53
+ * @LastEditors: NMTuan
+ * @Description: 
+ * @FilePath: \laf_curd\components\manager\edit.vue
+-->
+<template>
+    <el-drawer title="Edit" :model-value="visible" direction="rtl" :before-close="handlerClose" @open="handlerOpen">
+        <el-input type="textarea" v-model="formData" class="h-full"></el-input>
+        <template #footer>
+            <el-button class="w-full" type="primary" :loading="loading" @click="handlerSubmit">update</el-button>
+        </template>
+    </el-drawer>
+</template>
+<script setup>
+const { fetchOne, update } = useCloud()
+const props = defineProps({
+    visible: {
+        type: Boolean,
+        default: false
+    },
+    id: {
+        type: String,
+        default: ''
+    }
+})
+const emits = defineEmits(['update:visible', 'fetch'])
+const loading = ref(false)
+const formData = ref('')
+const handlerClose = () => {
+    emits('update:visible', false)
+}
+const handlerOpen = () => {
+    fetchOne({
+        query: {
+            _id: props.id
+        }
+    }, loading).then(res => {
+        if (res.ok) {
+            delete res.data._id
+            formData.value = JSON.stringify(res.data, null, 2)
+        }
+    })
+}
+
+const handlerSubmit = () => {
+    const data = JSON.parse(formData.value)
+    delete data._id
+    update({
+        id: props.id,
+        payload: data
+    }, loading).then(res => {
+        handlerClose()
+        emits('fetch')
+    })
+}
+</script>
+<style lang="scss" scoped>
+.descriptions {
+    :deep() {
+        .el-descriptions__label {
+            @apply font-bold;
+        }
+    }
+}
+
+:deep() {
+    .el-textarea__inner {
+        @apply h-full;
+    }
+}
+</style>
diff --git a/composables/cloud.js b/composables/cloud.js
@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-07-13 10:34:44
- * @LastEditTime: 2023-07-13 14:52:36
+ * @LastEditTime: 2023-07-13 21:00:34
  * @LastEditors: NMTuan
  * @Description:
  * @FilePath: \laf_curd\composables\cloud.js
@@ -30,10 +30,13 @@ export const useCloud = () => {
             if (loading) {
                 loading.value = true
             }
+            query = query || {}
+            page = page || 1
+            pageSize = pageSize || 10
             collection
-                .where(query || {})
-                .skip(((page || 1) - 1) * pageSize)
-                .limit(pageSize || 10)
+                .where(query)
+                .skip((page - 1) * pageSize)
+                .limit(pageSize)
                 .get()
                 .then((res) => {
                     resolve(res)
@@ -71,10 +74,62 @@ export const useCloud = () => {
         })
     }
 
+    // 查询一条数据
+    const fetchOne = ({ query }, loading) => {
+        return new Promise((resolve, reject) => {
+            if (loading) {
+                loading.value = true
+            }
+            query = query || {}
+            collection
+                .where(query)
+                .getOne()
+                .then((res) => {
+                    resolve(res)
+                })
+                .catch((error) => {
+                    reject(error)
+                })
+                .finally(() => {
+                    if (loading) {
+                        loading.value = false
+                    }
+                })
+        })
+    }
+
+    // 更新数据
+    const update = ({ id, payload }, loading) => {
+        return new Promise((resolve, reject) => {
+            if (!id) {
+                reject()
+            }
+            if (loading) {
+                loading.value = true
+            }
+            payload = payload || {}
+            collection
+                .doc(id)
+                .update(payload)
+                .then((res) => {
+                    resolve(res)
+                })
+                .catch((error) => {
+                    reject(error)
+                })
+                .finally(() => {
+                    if (loading) {
+                        loading.value = false
+                    }
+                })
+        })
+    }
     return {
         _,
         collection,
         fetch,
-        count
+        count,
+        fetchOne,
+        update
     }
 }
diff --git a/pages/manager/[...key].vue b/pages/manager/[...key].vue
@@ -2,6 +2,7 @@
     <div class="overflow-hidden flex-1 flex flex-col">
         <div class="p-4">
             <el-button :disabled="currentRowIndex === -1" @click="detailVisible = true">Detail</el-button>
+            <el-button :disabled="currentRowIndex === -1" @click="editVisible = true">Edit</el-button>
         </div>
         <div class="flex-1 overflow-hidden flex flex-col" v-loading="loading">
             <div class="flex-1 overflow-hidden mx-4 border">
@@ -25,6 +26,7 @@
             </div>
         </div>
         <ManagerDetail :data="list[currentRowIndex]" v-model:visible="detailVisible"></ManagerDetail>
+        <ManagerEdit :id="list[currentRowIndex]?._id" v-model:visible="editVisible" @fetch="handlerFetch"></ManagerEdit>
     </div>
 </template>
 <script setup>
@@ -37,6 +39,7 @@ const page = ref(1) // 当前页码
 const pageSize = ref(20) // 每页数量
 const currentRowIndex = ref(-1) // 当前行索引
 const detailVisible = ref(false)
+const editVisible = ref(false)
 
 // 查询条件
 const query = computed(() => {
@@ -73,7 +76,6 @@ const handlerCount = () => {
 
 // 单元格的点击事件
 const handlerCellClick = ({ rowIndex }) => {
-    console.log('click')
     currentRowIndex.value = rowIndex
 }