index.vue

<template>
    <div class="container w-auto m-auto bg-gray-200 mb-10">
        
        <div class="p-4">
            
            <span>添加内容</span>
            <textarea class="block my-2 w-full" v-model="newContent" maxLength="512"></textarea>
            <button class="bg-gray-300 py-2  px-4 rounded hover:bg-gray-400" @click="add"> add</button>
            <button class="bg-gray-300 py-2  px-4 rounded hover:bg-gray-400 ml-2" @click="search"> search</button>
            


            <div class="w-full mt-4">
                <table class="table-auto w-full bg-gray-200 text-left">
                    <thead>
                        <tr class="h-10 *:border-b *:border-slate-300 *:pl-2 *:bold">
                            <th >ID</th>
                            <th >内容</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in list" class="*:h-12 *:border-b *:border-slate-300 *:pl-2 *:hover:bg-gray-300">
                            <td class="w-[80px]">{{ item._id }}</td>
                            <td>
                                <textarea class="my-2 w-full bg-gray-100 max-h-48 border-gray-300" v-model="item.content" maxLength="512"></textarea>
                            </td>
                            <td class="*:py-1  *:px-4 *:rounded-md *:mr-2 *:text-gray-100 w-[160px]">
                                <button  @click="deleteItem(item)" class="bg-orange-400 hover:bg-orange-500"> 删除</button>
                                <button  @click="updateItem(item)" class="bg-blue-400 hover:bg-blue-500"> 更新</button>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
            

        </div>
    </div>
    
</template>
<script>
import Config from '../../js/config'
import RepEs from '../../js/repEs'
import { MessagePlugin } from 'tdesign-vue-next';


const esClient = new RepEs(Config.getData().data.ext)
export default {
    name: 'contentIndex',
    components: {
    },
    data() {
        return {
            newContent: '',
            list: []
        }
    },
    methods: {
        add () {
            
            esClient.add(this.newContent).then(res=>{
                MessagePlugin.success({ content: '添加成功', placement: 'center' })
                this.newContent = ''
                
                this.$nextTick(() => {
                    this.search()
                })
            })
        },
        search () {
            esClient.query(this.newContent).then(res => {
                console.info(res)
                this.list = res
                
            })
        },
        updateItem (item) {
            esClient.update(item._id, item.content).then(res => {
                MessagePlugin.success({ content: '更新成功', placement: 'center' })
                this.$nextTick(() => {
                    this.search()
                })            })

        },
        deleteItem (item) {
            
            esClient.delete(item._id).then(res => {
                MessagePlugin.success({ content: '删除成功', placement: 'center' })
                this.$nextTick(() => {
                    this.search()
                })            
            }).catch(() => {
                this.$nextTick(() => {
                    this.search()
                })
            })
        },

    }
}
</script>