cloudflare crud

```ts
<template>
    <div>
        <H1>CloudFlare</H1>
        
        <div>
            <el-row>
                <el-input v-model="queryInput" placeholder="请输入要查询的域名" />
                <el-button type="primary" plain @click="queryDoamin">查询域名</el-button>
                <el-button type="warning" plain @click="clearQuery">clear输入框</el-button>
            </el-row>

<el-row>
                <el-button type="primary" plain @click="getAllDomain">获取所有域名</el-button>
                <el-button type="success" plain @click="showFrom">新增域名</el-button>
            </el-row>
        </div>

<el-table v-loading="loading" :data="domains" style="width: 100%">
            <el-table-column prop="id" label="Id" width="300" />
            <el-table-column prop="name" label="Name" width="250" />
            <el-table-column prop="created_on" label="created" width="250" />
            <el-table-column prop="modified_on" label="modified" width="250" />
            <el-table-column prop="name_servers" label="name servers" width="400" />
            <el-table-column prop="status" label="status" width="120" />
            <el-table-column fixed="right" label="Operations" width="200">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="show(scope.row)">Show</el-button>
                    <el-button link type="primary" size="small" @click="showAddDnsDialog(scope.row)">Edit</el-button>
                    <el-button link type="primary" size="small" @click="deleteDomain(scope.row)">Delete</el-button>

</template>
            </el-table-column>
        </el-table>

<el-dialog v-model="dialogFormVisible" title="添加域名">
            <el-form :model="tableform">
                <el-form-item label="Domain name" :label-width="120">
                    <el-input v-model="tableform.name" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">关闭</el-button>
                    <el-button type="primary" @click="addDomainName">
                        添加
                    </el-button>
                </span>
            </template>
        </el-dialog>

<el-dialog v-model="showDialogTableVisible" title="DNS 解析">
            <el-table :data="dnsList">
                <el-table-column property="type" label="Type" width="80" />
                <el-table-column property="name" label="Name" width="250" />
                <el-table-column property="content" label="Content" width="350" />
                <el-table-column property="proxied" label="proxy" width="100" />
                <el-table-column property="ttl" label="TTL(1=AUTO)" width="150" />
                <el-table-column fixed="right" label="" width="50">
                <template #default="scope">
                    <el-button link type="primary" size="small" @click="deleteDNSRecord(scope.row)">delete</el-button>
                </template>
            </el-table-column>
            </el-table>
        </el-dialog>

<el-dialog v-model="showDialogEditVisible" title="DNS 解析">
            <el-form :model="dnsForm" label-width="120px">
                <el-form-item label="Type">
                    <el-select v-model="dnsForm.type" placeholder="please select your type">
                        <el-option label="A" value="A" />
                        <el-option label="CNAME" value="CNAME" />
                        <el-option label="TXT" value="TXT" />
                    </el-select>
                </el-form-item>
                <el-row>
                    <el-form-item label="domain name">
                        <el-input v-model="dnsForm.name" />
                    </el-form-item>
                </el-row>
                <el-form-item label="proxy">
                    <el-switch v-model="dnsForm.proxied" />
                </el-form-item>
                <el-row>
                    <el-form-item label="conntent">
                        <el-input v-model="dnsForm.content" />
                    </el-form-item>
                </el-row>
                <el-row>
                    <el-form-item label="ttl">
                        <el-input v-model="dnsForm.ttl" />
                    </el-form-item>
                </el-row>

</el-form>
            <el-button type="primary" @click="addDNSRecord">
                添加
            </el-button>
        </el-dialog>
        
        <el-backtop :right="100" :bottom="100" />
    </div>
</template>
  
  
<script setup lang="ts">

import { ref } from 'vue'
import axios from 'axios'
import { stringifyExpression } from '@vue/compiler-core';
import { add, create } from 'lodash';
import { ElMessage } from 'element-plus'
import { defineComponent } from 'vue';
import { onMounted } from 'vue'

// 生命周期钩子
onMounted(() => {
    console.log('mounted in the composition api!')
    getAllDomain()
})

// 域名 接口
interface Domain {
    id: string
    name: string
    created_on: string
    modified_on: string
    name_servers: string[]
    status: string
}
// 域名对象列表
const domains = ref<Domain[]>([]);

//DNS 接口
interface DNS {
    id: string
    type: string
    name: string
    conntent: string
    proxied: boolean
    ttl: number
}
// DNS对象列表
const dnsList = ref<DNS[]>([]);

// 查询框
let queryInput = ref()

// 显示 add dialog 
let dialogFormVisible = ref(false)
// 显示 edit dialog
let showDialogTableVisible = ref(false)

//初始化 from table 表单
const tableform = ref({
    name: "",
})

//显示 from 表单
const showFrom = () => {
    dialogFormVisible.value = true
    tableform.value.name = ""
}

// 添加域名
const addDomainName = () => {
    console.log(tableform.value.name)

axios.post('http://192.168.96.128:8080/cloudflare', {
        domainName: tableform.value.name,  //Axios 各种请求方式传递参数格式
    })
        .then((response) => {
            console.log(response);
            dialogFormVisible.value = false
            getAllDomain()

})
        .catch((error) => {
            console.log(error);
        });
}

//点击 show
const show = (row: any) => {
    showDialogTableVisible.value = true
    console.log(row.name)
    axios.get("http://192.168.96.128:8080/cloudflare/dns/" + row.name)
        .then((response) => {
            console.log(response.data.data)
            dnsList.value = response.data.data as DNS[]
        })
        .catch((err) => {
            console.log(err)
        })
}

// 查询域名
const queryDoamin = () => {
    console.log(queryInput.value)
    axios.get("http://192.168.96.128:8080/cloudflare/" + queryInput.value)
        .then((response) => {
            console.log(response.data)
            domains.value = response.data.data as Domain[]
            //response.data 是一个 HTTP 响应数据对象，其中包含多个属性，其中一个属性名为 data 的值是一个 JSON 数组，其元素类型为 Domain 对象。
            //由于 TypeScript 无法自动推断其类型，我们需要使用类型断言 as Domain[] 将其转换成 Domain 类型的数组。
        })
        .catch((err) => {
            console.log(err)
        })
}
// 清空 查询框
const clearQuery = () => {
    queryInput.value = ""
}
// 加载画面
const loading = ref(false)

// 获取所有域名
const getAllDomain = () => {
    console.log("getAllDomain")
    loading.value = true
    axios.get("http://192.168.96.128:8080/cloudflare")
        .then((response) => {
            console.log(response.data)
            domains.value = response.data.data as Domain[]
            //response.data 是一个 HTTP 响应数据对象，其中包含多个属性，其中一个属性名为 data 的值是一个 JSON 数组，其元素类型为 Domain 对象。
            //由于 TypeScript 无法自动推断其类型，我们需要使用类型断言 as Domain[] 将其转换成 Domain 类型的数组。
            loading.value = false
        })
        .catch((err) => {
            console.log(err)
        })

}

//删除 域名
const deleteDomain = (row: any) => {
    console.log(row.id)
    axios.delete('http://192.168.96.128:8080/cloudflare', {
        data: {
            domainId: row.id
        }
    })
        .then((response) => {
            console.log(response.data.msg);
            if (response.data.msg === true) {
                ElMessage({
                    message: row.name + ' 删除成功！ 请刷新页面~',
                    type: 'success',
                })
            }
        })
        .catch((error) => {
            console.log(error);
        });
}
//添加 dns解析
const showDialogEditVisible = ref(false)
const addDnsId = ref()
const dnsForm = ref({
    type: "",
    name: "",
    content: "",
    proxied: false,
    ttl: 600,
})
const showAddDnsDialog = (row: any) => {
    console.log(row.id)
    showDialogEditVisible.value = true
    addDnsId.value = row.id
}

const addDNSRecord = () => {
    console.log(dnsForm.value)

axios.post('http://192.168.96.128:8080/cloudflare/dns/' + addDnsId.value, {
        type: dnsForm.value.type,
        name: dnsForm.value.name,
        content: dnsForm.value.content,
        proxied: dnsForm.value.proxied,
        ttl: dnsForm.value.ttl,
    })
        .then((response) => {
            console.log(response.data.result)
            console.log(response.data.msg)
            if (response.data.result === true) {
                ElMessage({
                    message: response.data.msg,
                    type: 'success',
                })
                showDialogEditVisible.value = false
                dnsForm.value.name = ""
            } else {
                ElMessage.error(response.data.msg)
            }
        })
        .catch((error) => {
            console.log(error);
        });
}

//删除 dns解析
const deleteDNSRecord = (row :any) => {
 console.log(row.id)
 console.log(row.zone_id)
 axios.delete('http://192.168.96.128:8080/cloudflare/dns/', {
        data: {
            domainId: row.zone_id,
            dnsRecordId: row.id
        }
    })
        .then((response) => {
            console.log(response.data.msg);
            console.log(response.data.result);
            if (response.data.result === true) {
                ElMessage({
                    message: response.data.msg,
                    type: 'success',
                })
                
            }else {
                ElMessage.error(response.data.msg)
            }
        })
        .catch((error) => {
            console.log(error);
        });
}
</script>
  
<style scoped></style>
```