增加标签管理

src/api/tag.js

@@ -10,3 +10,27 @@ export const getTagList = (data) => {
     data
   })
 }
+
+// @Summary 新增
+// @Produce  application/json
+// @Param Object
+// @Router /cms/tag/add [post]
+export const addTag = (data) => {
+  return service({
+    url: '/cms/tag/add',
+    method: 'post',
+    data
+  })
+}
+
+// @Summary 删除
+// @Produce  application/json
+// @Param ID int
+// @Router /cms/tag/delete [delete]
+export const deleteTag = (data) => {
+  return service({
+    url: '/cms/tag/delete',
+    method: 'delete',
+    data
+  })
+}

src/view/content/tag/index.vue

@@ -0,0 +1,145 @@
+<template>
+  <div>
+    <div class="gva-search-box">
+      <el-form ref="elSearchFormRef" :inline="true" :model="searchInfo" label-width="0" class="demo-form-inline"
+        @keyup.enter="handleSubmitSearch">
+        <el-form-item style="width:300px">
+          <el-tooltip content="从名称中搜索" placement="top-start">
+            <el-input v-model="searchInfo.keyword" class="keyword" placeholder="请输入关键词" clearable style="width:100%" />
+          </el-tooltip>
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="search" @click="handleSubmitSearch">查询</el-button>
+          <el-button icon="refresh" @click="handleResetSearch">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+
+    <div class="gva-table-box">
+      <div class="gva-btn-list">
+        <el-input v-if="inputVisible" ref="InputRef" v-model="inputValue" style="width: 100px" size="default"
+          @keyup.enter="handleInputConfirm" @blur="handleInputConfirm" />
+        <el-button v-else class="button-new-tag" type="primary" style="width: 100px" size="default" @click="showInput">
+          新增Tag
+        </el-button>
+      </div>
+
+      <div class="flex flex-wrap gap-2">
+        <el-tag v-for="item in tableData" :key="item.ID" closable type="primary" size="large"
+          @close="handleRowDelete(item.ID)">
+          {{ item.name }}
+        </el-tag>
+      </div>
+
+      <div class="gva-pagination">
+        <el-pagination layout="total, sizes, prev, pager, next, jumper" :current-page="page" :page-size="pageSize"
+          :page-sizes="[50, 100]" :total="total" @current-change="handleCurrentChange"
+          @size-change="handleSizeChange" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, nextTick } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import {
+  getTagList,
+  deleteTag,
+  addTag,
+} from '@/api/tag'
+
+const page = ref(1)
+const total = ref(0)
+const pageSize = ref(50)
+const searchInfo = ref({})
+const tableData = ref([])
+const elSearchFormRef = ref()
+
+const initSearchInfo = () => {
+  searchInfo.value.keyword = ''
+  page.value = 1
+}
+initSearchInfo()
+const getTableData = async () => {
+  const res = await getTagList({ page: page.value, pageSize: pageSize.value, ...searchInfo.value })
+  if (res.code === 0) {
+    tableData.value = res.data.list
+    total.value = res.data.total
+  }
+}
+
+getTableData()
+
+// 重置
+const handleResetSearch = () => {
+  initSearchInfo()
+  getTableData()
+}
+// 搜索
+const handleSubmitSearch = () => {
+  elSearchFormRef.value?.validate(async valid => {
+    if (!valid) return
+    getTableData()
+  })
+}
+// 分页
+const handleSizeChange = (val) => {
+  pageSize.value = val
+  getTableData()
+}
+// 修改页面容量
+const handleCurrentChange = (val) => {
+  page.value = val
+  getTableData()
+}
+
+// ------ 列表操作相关 -----
+// 删除
+const handleRowDelete = (ID) => {
+  ElMessageBox.confirm('此操作将删除Tag, 是否继续?', '请确认', {
+    confirmButtonText: '确定',
+    cancelButtonText: '取消',
+    type: 'warning'
+  }).then(async valid => {
+    const res = await deleteTag({ ID })
+    if (res.code === 0) {
+      ElMessage({
+        type: 'success',
+        message: '删除成功!'
+      })
+      if (tableData.value.length === 1 && page.value > 1) {
+        page.value--
+      }
+      getTableData()
+    }
+  })
+}
+
+const inputValue = ref('')
+const inputVisible = ref(false)
+const InputRef = ref(null)
+const showInput = () => {
+  inputVisible.value = true
+  nextTick(() => {
+    InputRef.value.focus()
+  })
+}
+const handleInputConfirm = async () => {
+  if (inputValue.value) {
+    const res = await addTag({ name: inputValue.value })
+    if (res.code === 0) {
+      getTableData()
+    } else {
+      ElMessage({
+        type: 'error',
+        message: '保存失败: ' + res.message
+      })
+      return
+    }
+  }
+  inputVisible.value = false
+  inputValue.value = ''
+}
+
+</script>