本帖最后由 ahehaoyu 于 2022-8-27 17:25 编辑
[JavaScript] 纯文本查看 复制代码 <template>
<div>
<n-button @click="showaddModel = true" type="info">添加</n-button>
<n-table :bordered="false" :single-line="false">
<thead>
<tr>
<th>编号</th>
<th>名称</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr v-for="(category, index) in categorylist">
<td>{{ category.id }}</td>
<td>{{ category.name }}</td>
<td>
<n-space>
<n-button @click="toupdate(category)" type="primary">修改</n-button>
<n-button @click="deletecategory(category)" type="warning">删除</n-button>
</n-space>
</td>
</tr>
</tbody>
</n-table>
<n-modal v-model:show="showaddModel" preset="dialog" title="Dialog">
<template #header>
<div>添加分类</div>
</template>
<div>
<n-input v-model:value="addcategory.name" type="text" placeholder="请输入名称" />
</div>
<template #action>
<div>
<n-button @click="add">提交</n-button>
</div>
</template>
</n-modal>
<n-modal v-model:show="showupdateModel" preset="dialog" title="Dialog">
<template #header>
<div>修改分类</div>
</template>
<div>
<n-input v-model:value="updatecategory.name" type="text" placeholder="请输入名称" />
</div>
<template #action>
<div>
<n-button @click="update">提交</n-button>
</div>
</template>
</n-modal>
</div>
</template>
<script setup>
import { AdminStore } from '../../stores/AdminStore'
import { ref, reactive, inject, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router';
const router = useRouter()
const route = useRoute()
const axios = inject("axios")
const message = inject("message")
const dialog = inject("dialog")
const adminStore = AdminStore()
const showaddModel = ref(false)
const showupdateModel = ref(false)
const categorylist = ref([])
const addcategory = reactive({
name: ""
})
const updatecategory = reactive({
id: 0,
name: ""
})
onMounted(() => {
loadDatas()
})
const loadDatas = async () => {
let res = await axios.get("/category/list")
categorylist.value = res.data.rows
}
const add = async () => {
let res = await axios.post("/category/_token/add", { name: addcategory.name })
if (res.data.code == 200) {
loadDatas()
message.info(res.data.msg)
} else {
message.error(res.data.msg)
}
showaddModel.value = false;
}
const toupdate = async (category) =>{
showupdateModel.value = true
updatecategory.id = category.id
updatecategory.name = category.name
}
const update = async () => {
//let res = await axios.put("/category/_token/update", { id: updatecategory.id, name: updatecategory.name })
let res = await axios.put("/category/_token/update", { id: updatecategory.id, name: updatecategory.name })
if (res.data.code == 200) {
loadDatas()
message.info(res.data.msg)
} else {
message.error(res.data.msg)
}
showupdateModel.value = false
}
const deletecategory = async (category) => {
dialog.warning({
title: '警告',
content: '是否要删除',
positiveText: '确定',
negativeText: '取消',
onPositiveClick: async () => {
let res = await axios.delete(`/category/_token/delete?id=${category.id}`)
if (res.data.code == 200) {
loadDatas()
message.info(res.data.msg)
} else {
message.error(res.data.msg)
}
},
onNegativeClick: () => { }
})
}
</script>
<style lang="scss" scoped>
</style> |