feat: 新增：表格列的配置

components/database/fields.vue

@@ -2,32 +2,97 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-08-08 07:34:55
- * @LastEditTime: 2023-08-08 07:42:48
+ * @LastEditTime: 2023-08-12 15:05:11
  * @LastEditors: NMTuan
  * @Description: 
  * @FilePath: \laf_curd\components\database\fields.vue
 -->
 <template>
     <div>
-        <span @click="insertFieldConfig">field</span>
+        <!-- 按钮 -->
+        <el-button @click="dialogVisible = true">
+            <div class="i-ri-table-line text-base"> </div>
+        </el-button>
+        <!-- 弹窗 -->
+        <el-dialog v-model="dialogVisible" title="Fields" :close-on-click-modal="false" :close-on-press-escape="false"
+            @open="handlerOpen" width="80%">
+            <el-table :data="fields" class="w-full" :row-class-name="handlerRowClass">
+                <el-table-column :label="col.label" :key="col.key" :width="col.width" v-for="col in columns">
+                    <template #default="{ row, column, $index }">
+                        <span v-if="column.rawColumnKey === 'key'">{{ row[column.rawColumnKey] }}</span>
+                        <el-input-number v-else-if="column.rawColumnKey === 'width'" size=""
+                            v-model="fields[$index][column.rawColumnKey]" :min="150" :step="10" />
+                        <el-radio-group v-else-if="column.rawColumnKey === 'align'" size=""
+                            v-model="fields[$index][column.rawColumnKey]">
+                            <el-radio-button label="">居左</el-radio-button>
+                            <el-radio-button label="center">居中</el-radio-button>
+                            <el-radio-button label="right">居右</el-radio-button>
+                        </el-radio-group>
+                        <el-radio-group v-else-if="column.rawColumnKey === 'fixed'" size=""
+                            v-model="fields[$index][column.rawColumnKey]">
+                            <el-radio-button label="">不浮</el-radio-button>
+                            <el-radio-button label="left">左浮</el-radio-button>
+                            <el-radio-button label="right">右浮</el-radio-button>
+                        </el-radio-group>
+                        <el-switch v-else-if="column.rawColumnKey === 'hidden'" size=""
+                            v-model="fields[$index][column.rawColumnKey]" inline-prompt :active-value="false"
+                            active-text="显示" :inactive-value="true" inactive-text="隐藏" />
+                        <el-input v-else size="" v-model="fields[$index][column.rawColumnKey]"></el-input>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <template #footer>
+                <span class="dialog-footer">
+                    <el-button @click="dialogVisible = false">取消</el-button>
+                    <el-button :loading="loading" type="primary" @click="handlerSubmit">
+                        提交
+                    </el-button>
+                </span>
+            </template>
+        </el-dialog>
     </div>
 </template>
 <script setup>
-const { cloud, collectionName } = useCloud()
-const collection = cloud.database().collection('lafDB_fields')
+const { updateFieldConfig } = useCloud()
+const props = defineProps({
+    id: {
+        type: String,
+        default: ''
+    },
+    columns: {
+        type: Array,
+        default: () => []
+    }
+})
+const emits = defineEmits(['update:columns'])
+const dialogVisible = ref(false)
+const loading = ref(false)
+const fields = ref([])
+const columns = [
+    { key: 'key', label: '字段' },
+    { key: 'title', label: '名称' },
+    { key: 'align', label: '对齐方式', width: 210 },    // 对齐方式
+    { key: 'fixed', label: '固定列', width: 210 },    // 固定列
+    { key: 'width', label: '列宽', width: 180 },
+    { key: 'hidden', label: '显示', width: 80 }, // 隐藏
+]
 
-const insertFieldConfig = () => {
-    console.log('insertColConfig')
-    collection.add({
-        fieldName: '_id',
-        collectionName,
-        width: 300,
-        type: 'string',
-        visible: true
-    })
-        .then(res => {
-            console.log('res', res)
-        })
+// 打开弹窗
+const handlerOpen = () => {
+    fields.value = JSON.parse(JSON.stringify(props.columns))
 }
 
+// 隐藏时,该行变淡
+const handlerRowClass = ({ row }) => {
+    return row.hidden ? 'opacity-50' : ''
+}
+
+// 提交表单
+const handlerSubmit = async () => {
+    loading.value = true
+    await updateFieldConfig(props.id, JSON.parse(JSON.stringify(fields.value)))
+    emits('update:columns', JSON.parse(JSON.stringify(fields.value)))
+    loading.value = false
+    dialogVisible.value = false
+}
 </script>

components/manager/header.vue

@@ -58,7 +58,7 @@ const fetchProfile = () => {
         path: '/v1/user/profile'
     }).then(res => {
         username.value = res.data.username || res.data.name
-        console.log('res', res)
+        // console.log('res', res)
     })
         .catch(() => { })
 }

composables/cloud.js

@@ -2,7 +2,7 @@
  * @Author: NMTuan
  * @Email: NMTuan@qq.com
  * @Date: 2023-07-13 10:34:44
- * @LastEditTime: 2023-08-08 07:37:08
+ * @LastEditTime: 2023-08-12 14:43:13
  * @LastEditors: NMTuan
  * @Description:
  * @FilePath: \laf_curd\composables\cloud.js
@@ -240,6 +240,76 @@ export const useCloud = (payload) => {
         })
     }
 
+    // 获取字段配置
+    const getFieldConfig = () => {
+        return new Promise((resolve, reject) => {
+            cloud
+                .database()
+                .collection('lafDB_fields')
+                .where({
+                    collectionName
+                })
+                .getOne()
+                .then((res) => {
+                    resolve(res)
+                })
+                .catch((error) => {
+                    reject(error)
+                })
+        })
+    }
+    const updateFieldConfig = (id, data) => {
+        console.log('updateFieldConfig', id, collectionName, data)
+        return new Promise((resolve, reject) => {
+            if (!id) {
+                cloud
+                    .database()
+                    .collection('lafDB_fields')
+                    .add({
+                        collectionName,
+                        columns: data
+                    })
+                    .then((res) => {
+                        resolve(res)
+                    })
+                    .catch((err) => {
+                        reject(err)
+                    })
+            } else {
+                cloud
+                    .database()
+                    .collection('lafDB_fields')
+                    .doc(id)
+                    .update({
+                        columns: data
+                    })
+                    .then((res) => {
+                        resolve(res)
+                    })
+                    .catch((err) => {
+                        reject(err)
+                    })
+            }
+        })
+
+        // const id = data._id
+        // delete data._id
+        // return new Promise((resolve, reject) => {
+        //     cloud
+        //         .database()
+        //         .collection('lafDB_fields')
+        //         .doc(id)
+        //         .update(data)
+        //         .then((res) => {
+        //             console.log('x', res)
+        //             resolve(res)
+        //         })
+        //         .catch((error) => {
+        //             reject(error)
+        //         })
+        // })
+    }
+
     return {
         _,
         collection,
@@ -251,6 +321,8 @@ export const useCloud = (payload) => {
         update,
         remove,
         create,
-        run
+        run,
+        getFieldConfig,
+        updateFieldConfig
     }
 }

package.json

@@ -15,13 +15,13 @@
     "@types/node": "^18",
     "@unocss/nuxt": "^0.53.4",
     "element-plus": "^2.3.7",
-    "nuxt": "^3.6.1",
     "sass": "^1.63.6"
   },
   "dependencies": {
     "@pinia/nuxt": "^0.4.11",
     "ejson-shell-parser": "^1.2.4",
     "laf-client-sdk": "^1.0.0-beta.8",
+    "nuxt": "^3.6.5",
     "pinia": "^2.1.4",
     "simplebar-vue": "^2.3.3"
   }

pages/index/[...key].vue

@@ -20,18 +20,18 @@
                     </el-button>
                 </template>
             </el-input>
+            <DatabaseFields class="ml-3" v-model:columns="columns" :id="columnsId"></DatabaseFields>
         </div>
-        <DatabaseFields></DatabaseFields>
         <!-- 表格 -->
         <div class="flex-1 overflow-hidden mx-4 ">
             <el-auto-resizer>
                 <template #default="{ width, height }">
                     <el-table-v2 class="table" :row-class="handlerRowClass" fixed :columns="columns" :data="list"
                         :width="width" :height="height">
                         <template #cell="{ column, columns, columnIndex, depth, style, rowData, rowIndex }">
-                            <div class="flex items-center flex-1 h-full text-sm overflow-hidden px-2"
+                            <div class="flex items-center flex-1 h-full text-sm overflow-hidden px-2" :style="style"
                                 @click="handlerCellClick({ rowIndex })" @dblclick="handlerCellDblclick()">
-                                <div class="truncate">{{ rowData[column.title] }}</div>
+                                <div class="truncate">{{ rowData[column.key] }}</div>
                             </div>
                         </template>
                     </el-table-v2>
@@ -52,8 +52,11 @@
 </template>
 <script setup>
 import parse from 'ejson-shell-parser';
-const { _, fetch, count, remove } = useCloud()
-const columns = ref([]) // 表格列配置项
+const { _, fetch, count, remove, getFieldConfig, collectionName } = useCloud()
+const columnsId = ref('')   // 表格列配置 在数据中的id
+const columns = useCookie(`lafDB_${collectionName}_columns`, {
+    default: () => []
+}) // 表格列配置项
 const list = ref([]) // 表格数据
 const total = ref(0) // 总条数
 const loading = ref(false)
@@ -85,19 +88,21 @@ const query = computed(() => {
 const handlerFetch = () => {
     currentRowIndex.value = -1  // 每次获取数据，清除掉选中的行
     fetch(query.value, loading).then(res => {
-        if (res.data.length === 0) {
-            columns.value = [{ key: '_id', dataKey: '_id', title: '_id', width: 200 }]
-        } else {
-            columns.value = Object.keys(res.data[0]).reduce((total, key) => {
-                total.push({
-                    key: key,
-                    dataKey: key,
-                    title: key,
-                    // minWidth: '200',
-                    width: 200
-                })
-                return total
-            }, [])
+        // 处理表格列配置
+        if (res.data.length !== 0) {
+            Object.keys(res.data[0]).map((key) => {
+                const exits = columns.value.findIndex(item => item.key === key)
+                // 如果没记录的,则插入默认配置
+                if (exits === -1) {
+                    columns.value.push({
+                        key,
+                        dataKey: key,
+                        title: key,
+                        width: 200
+                    })
+                    // columns.value = JSON.parse(JSON.stringify(columns.value))
+                }
+            })
         }
         list.value = res.data
     })
@@ -110,6 +115,30 @@ const handlerCount = () => {
     })
 }
 
+// 获取字段配置
+const handlerFields = async () => {
+    // 获取数据库中的字段配置
+    getFieldConfig()
+        .then(res => {
+            if (res.data) {
+                columnsId.value = res.data?._id || ''
+                // if (res.data.columns && Array.isArray(res.data.columns)) {
+                res.data?.columns.forEach((item) => {
+                    const index = columns.value.findIndex(col => col.key === item.key)
+                    if (index === -1) {
+                        columns.value.push(item)
+                    } else {
+                        columns.value[index] = {
+                            ...columns.value[index],
+                            ...item
+                        }
+                    }
+                })
+                // }
+            }
+        })
+}
+
 // 单元格的点击事件
 const handlerCellClick = ({ rowIndex }) => {
     currentRowIndex.value = rowIndex
@@ -191,7 +220,7 @@ watch([page, pageSize], () => {
 // 进入页面，获取数据和条数
 handlerFetch()
 handlerCount()
-
+handlerFields() // 获取字段配置
 
 </script>
 <style lang="scss" scoped>