✨ feat(标签): 标签页面联调

config/index.js

@@ -18,7 +18,8 @@ module.exports = {
     assetsPublicPath: '/',
     proxyTable: {
       '/': {
-        target: 'http://39.103.180.196:9011',  // 接口域名
+        // target: 'http://39.103.180.196:9011',  // 接口域名
+        target: 'http://localhost:9011',  // 接口域名
         changeOrigin: true,  //是否跨域
         pathRewrite: {
             '^/': '/'   //需要rewrite重写的,

src/api/tag.js

@@ -0,0 +1,85 @@
+/*
+ * @Description:
+ * @version: v1
+ * @Author: zhangjiabao
+ * @Date: 2024-01-08 00:20:50
+ */
+import request from "@/utils/request";
+export default {
+  /**
+   * 查询标签列表
+   * @param {*} params
+   * @returns
+   */
+  getList(data, pageNum, pageSize) {
+    return request({
+      // url: `/luoo-tag/tag/list?pageNum=${pageNum}&pageSize=${pageSize}`,
+      url: `/luoo-tag/tag/list`,
+      method: "get",
+      params:{
+        ... data,
+        pageNum,
+        pageSize
+      }
+    });
+  },
+  /**
+   * 查询标签详情
+   * @param {*} params
+   * @returns
+   */
+  getById(id) {
+    return request({
+      url: `/tag/${id}`,
+      method: "get"
+    });
+  },
+  /**
+   * 新增标签信息
+   * @param {*} data
+   * @returns
+   */
+  create(data) {
+    return request({
+      url: `/luoo-tag/tag`,
+      method: "post",
+      data
+    });
+  },
+  /**
+   * 更新标签信息
+   * @param {*} id
+   * @param {*} data
+   * @returns
+   */
+  update(data) {
+    return request({
+      url: `/luoo-tag/tag/${data.id}`,
+      method: "put",
+      data
+    });
+  },
+  /**
+   * 更新标签状态
+   * @param {*} id
+   * @param {*} state
+   * @returns
+   */
+  updateStatus(id, state) {
+    return request({
+      url: `/luoo-tag/tag/status/${id}?state=${state}`,
+      method: "put"
+    });
+  },
+  /**
+   * 删除标签
+   * @param {*} params
+   * @returns
+   */
+  delete(id) {
+    return request({
+      url: `/luoo-tag/tag/${id}`,
+      method: "delete"
+    });
+  }
+};

src/utils/request.js

@@ -1,3 +1,9 @@
+/*
+ * @Description: 
+ * @version: v1
+ * @Author: zhangjiabao
+ * @Date: 2024-01-02 21:12:35
+ */
 import axios from 'axios'
 import { Message, MessageBox } from 'element-ui'
 import store from '../store'
@@ -28,7 +34,9 @@ service.interceptors.response.use(
   * code为非20000是抛错 可结合自己业务进行修改
   */
     const res = response.data
-    if (res.code !== 20000) {
+    // TODO: 关于code的逻辑需要重写
+    return response.data
+    if (!(res.code == 2000 || res.code == 200)) {
       Message({
         message: res.message,
         type: 'error',

src/views/tag/index.vue

@@ -9,7 +9,8 @@
     <!-- card -->
     <el-card class="box-card">
       <div slot="header" class="card-header clearfix">
-        <span class="card-header-text">标签列表</span>
+        <span v-if="tagType === 1" class="card-header-text">标签列表</span>
+        <span v-if="tagType === 2" class="card-header-text">二级标签列表</span>
         <el-button
           style="float: right; margin-top: -5px;"
           type="primary"
@@ -25,14 +26,25 @@
           <el-input
             placeholder="标签名称"
             size="medium"
-            v-model="queryForm.data.tagName"
+            v-model="queryForm.data.name"
           ></el-input>
         </el-form-item>
+        <el-form-item v-if="tagType === 2">
+          <el-select
+            placeholder="选择父级"
+            size="medium"
+            v-model="queryForm.data.parentId"
+          >
+            <el-option label="民谣" value="1744043047018172416"></el-option>
+            <el-option label="摇滚" value="1744044157997027328"></el-option>
+            <el-option label="流行" value="1746150704759836672"></el-option>
+          </el-select>
+        </el-form-item>
         <el-form-item>
           <el-select
             placeholder="选择发布人"
             size="medium"
-            v-model="queryForm.data.publisher"
+            v-model="queryForm.data.creatorId"
           >
             <el-option label="发布人1" value="1"></el-option>
             <el-option label="发布人2" value="2"></el-option>
@@ -75,7 +87,8 @@
             plain
             icon="el-icon-full-screen"
             type="primary"
-            @click="log('查看二级')"
+            v-if="tagType === 1"
+            @click="handleChangeChildrenTag"
             >查看二级</el-button
           >
         </el-form-item>
@@ -83,9 +96,10 @@
       <!-- 表格 -->
       <el-table
         stripe
-        class="in-card-table"
         :data="table.data"
-        v-loading.body="table.loadig"
+        height="calc(100vh - 290px)"
+        v-loading="table.loading"
+        v-if="table.show"
         element-loading-text="加载中"
         :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
         border
@@ -96,17 +110,26 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="中文名称" prop="zhName"></el-table-column>
+        <el-table-column label="中文名称" prop="nameCh"></el-table-column>
-        <el-table-column label="英文名称" prop="enName"></el-table-column>
+        <el-table-column label="英文名称" prop="nameEn"></el-table-column>
-        <el-table-column label="歌曲数" prop="songCount"></el-table-column>
+        <el-table-column
+          v-if="tagType === 2"
+          label="父标签"
+          prop="parentNameCh"
+        ></el-table-column>
+        <el-table-column label="歌曲数" prop="songRefCount"></el-table-column>
         <el-table-column
           label="关联期刊数"
-          prop="articleCount"
+          prop="articleRefCount"
         ></el-table-column>
-        <el-table-column label="子标签数" prop="subTagCount"></el-table-column>
+        <el-table-column
-        <el-table-column label="发布人" prop="publisher"></el-table-column>
+          label="子标签数"
+          prop="childTagCount"
+        ></el-table-column>
+        <el-table-column label="发布人" prop="creatorName"></el-table-column>
         <el-table-column
           label="创建时间"
+          width="200"
           sortable
           prop="createTime"
         ></el-table-column>
@@ -114,13 +137,20 @@
           <template slot-scope="scope">
             <el-switch
               style="margin-bottom: 4px;"
-              v-model="scope.row.inUse"
+              v-model="scope.row.state"
               active-color="#13ce66"
+              @change="handleTableRowStatusChange($event, scope.row)"
+              :active-value="1"
+              :inactive-value="0"
               size="mini"
             ></el-switch>
           </template>
         </el-table-column>
-        <el-table-column fixed="right" label="操作" width="300">
+        <el-table-column
+          fixed="right"
+          label="操作"
+          :width="[0, 300, 200][tagType]"
+        >
           <template slot-scope="scope">
             <el-button
               plain
@@ -133,19 +163,29 @@
             <el-button
               plain
               icon="el-icon-success"
+              v-if="tagType === 1"
               @click="handleAddSubClick(scope.row)"
               type="success"
               size="mini"
               >新增二级</el-button
             >
-            <el-button
+            <el-popconfirm
-              plain
+              confirm-button-text="确定"
-              icon="el-icon-delete"
+              cancel-button-text="取消"
-              @click="log('删除' + scope.$index)"
+              icon="el-icon-info"
-              type="danger"
+              icon-color="red"
-              size="mini"
+              title="是否确认删除标签？"
-              >删除</el-button
+              @confirm="handleDeleteClick(scope.row)"
             >
+              <el-button
+                slot="reference"
+                plain
+                icon="el-icon-delete"
+                type="danger"
+                size="mini"
+                >删除</el-button
+              >
+            </el-popconfirm>
           </template>
         </el-table-column>
       </el-table>
@@ -153,6 +193,7 @@
       <el-pagination
         class="pagination-right"
         background
+        v-if="table.show"
         layout="total, prev, pager, next, sizes"
         :current-page.sync="table.page.current"
         :page-size="table.page.size"
@@ -165,9 +206,10 @@
     <el-dialog
       :title="['新增标签', '修改标签', '新增二级'][modifyDialog.type]"
       class="popup-dialog"
-      :visible="true"
+      :visible="modifyDialog.visible"
       v-if="modifyDialog.visible"
       width="30%"
+      :before-close="handleDialogBeforeClose"
     >
       <el-form
         :model="modifyDialog.form.data"
@@ -176,23 +218,37 @@
         label-width="100px"
         class="demo-ruleForm"
       >
-        <el-form-item v-if="modifyDialog.type == 2" label="选择父级">
+        <el-form-item
+          v-if="tagType === 1 && modifyDialog.type == 2"
+          label="选择父级"
+        >
           <el-input
             disabled
             size="small"
-            v-model="modifyDialog.form.data.parent"
+            v-model="modifyDialog.form.data.parentName"
           ></el-input>
         </el-form-item>
-        <el-form-item label="中文名称" prop="zhName">
+        <el-form-item v-if="tagType === 2" label="选择父级" prop="parentId">
+          <el-select
+            placeholder="选择父级"
+            size="medium"
+            v-model="modifyDialog.form.data.parentId"
+          >
+            <el-option label="民谣" value="1744043047018172416"></el-option>
+            <el-option label="摇滚" value="1744044157997027328"></el-option>
+            <el-option label="流行" value="1746150704759836672"></el-option>
+          </el-select>
+        </el-form-item>
+        <el-form-item label="中文名称" prop="nameCh">
           <el-input
             size="small"
-            v-model="modifyDialog.form.data.zhName"
+            v-model="modifyDialog.form.data.nameCh"
           ></el-input>
         </el-form-item>
-        <el-form-item label="英文名称" prop="enName">
+        <el-form-item label="英文名称" prop="nameEn">
           <el-input
             size="small"
-            v-model="modifyDialog.form.data.enName"
+            v-model="modifyDialog.form.data.nameEn"
           ></el-input>
         </el-form-item>
       </el-form>
@@ -207,10 +263,14 @@
 </template>
 
 <script>
+import tagApi from "@/api/tag";
+
 export default {
   name: "Tag",
   data() {
     return {
+      // 标签分级 1-一级菜单 2-二级菜单
+      tagType: 1,
       // 查询表单
       queryForm: {
         remoteData: {
@@ -218,14 +278,17 @@ export default {
         },
         lastQuery: {},
         data: {
-          tagName: null,
+          level: 1,
-          publisher: null,
+          parentId: null,
+          name: null,
+          creatorId: null,
           timeRange: []
         }
       },
       // 表格
       table: {
-        loadinng: true,
+        show: true,
+        loading: true,
         data: [],
         page: {
           current: 1,
@@ -239,26 +302,27 @@ export default {
         type: 0, // 0for新增 1for编辑 2for新增2级
         form: {
           rules: {
-            zhName: [
+            nameCh: [
               { required: true, message: "请输入中文名称", trigger: "blur" }
             ],
-            enName: [
+            nameEn: [
               { required: true, message: "请输入英文名称", trigger: "blur" }
             ]
           },
           data: {
-            parent: null,
+            id: null,
-            zhName: null,
+            parentName: null,
-            enName: null
+            parentId: null,
+            nameCh: null,
+            nameEn: null
           }
         }
-      },
+      }
-      dialogVisible: false
     };
   },
   filters: {},
   created() {
-    this.fetchData();
+    this.fetchData(this.queryForm.data);
   },
   methods: {
     log(e) {
@@ -268,23 +332,35 @@ export default {
     /**
      * 查询表格数据
      */
-    fetchData() {
+    fetchData(param) {
       // 记录上一次查询条件
-      this.queryForm.lastQuery = this.queryForm.data;
+      this.queryForm.lastQuery = param;
-      console.log("formData", this.queryForm.data);
+
-      console.log("pageData", this.table.page);
+      let queryParam = {
-      // 加载数据
+        ...param
+      };
+      // if (this.queryForm.data.timeRange) {
+      //   if (this.queryForm.data.timeRange[0]) {
+      //     queryParam.createTimeStart =
+      //       this.queryForm.data.timeRange[0] + " 00:00:00";
+      //   }
+
+      //   if (this.queryForm.data.timeRange[1]) {
+      //     queryParam.createTimeEnd =
+      //       this.queryForm.data.timeRange[1] + " 23:59:59";
+      //   }
+      // }
       this.table.loading = true;
-      for (let i = 0; i < 10; i++) {
+      this.table.page.total = 0;
-        this.table.data.push({
+      this.table.data = [];
-          zhName: "title1",
+      tagApi
-          enName: "enname",
+        .getList(queryParam, this.table.page.current, this.table.page.size)
-          inUse: true
+        .then(res => {
+          this.table.data = res.data.content;
+          this.table.page.total = res.data.totalElements;
+          this.table.page.current = res.data.number + 1;
+          this.table.loading = false;
         });
-      }
-      // page
-      this.table.page.total = 20;
-      this.table.loading = false;
     },
     // ************************* 按扭事件 *************************
     /**
@@ -293,15 +369,17 @@ export default {
     handleQueryClick() {
       this.table.page.current = 1;
       this.table.page.total = 0;
-      this.fetchData();
+      this.fetchData(this.queryForm.data);
     },
     /**
      * 重置点击事件
      */
     handleResetClick() {
       this.queryForm.data = {
-        tagName: null,
+        level: this.tagType,
-        publisher: null,
+        parentId: null,
+        name: null,
+        creatorId: null,
         timeRange: []
       };
     },
@@ -309,6 +387,12 @@ export default {
      * 新建标签点击事件
      */
     handleAddClick() {
+      this.modifyDialog.form.data.id = null;
+      this.modifyDialog.form.data.parentName = null;
+      this.modifyDialog.form.data.parentId = null;
+      this.modifyDialog.form.data.nameCh = null;
+      this.modifyDialog.form.data.nameEn = null;
+
       this.modifyDialog.type = 0;
       this.modifyDialog.visible = true;
     },
@@ -316,7 +400,19 @@ export default {
      * 编辑标签点击事件
      */
     handleModifyClick(row) {
-      console.log(row);
+      this.modifyDialog.form.data.id = row.id;
+      if (this.tagType === 1) {
+        this.modifyDialog.form.data.parentName = null;
+        this.modifyDialog.form.data.parentId = null;
+      }
+      if (this.tagType === 2) {
+        this.modifyDialog.form.data.parentName = row.parentName;
+        this.modifyDialog.form.data.parentId = row.parentId;
+      }
+
+      this.modifyDialog.form.data.nameCh = row.nameCh;
+      this.modifyDialog.form.data.nameEn = row.nameEn;
+
       this.modifyDialog.type = 1;
       this.modifyDialog.visible = true;
     },
@@ -324,11 +420,43 @@ export default {
      * 新增二级点击事件
      */
     handleAddSubClick(row) {
-      console.log(row);
+      this.modifyDialog.form.data.id = null;
-      this.modifyDialog.form.data.parent = row["zhName"];
+      this.modifyDialog.form.data.parentName = row.nameCh;
+      this.modifyDialog.form.data.parentId = row.id;
+      this.modifyDialog.form.data.nameCh = null;
+      this.modifyDialog.form.data.nameEn = null;
+
       this.modifyDialog.type = 2;
       this.modifyDialog.visible = true;
     },
+    /**
+     * 删除按钮点击事件
+     */
+    handleDeleteClick(row) {
+      tagApi.delete(row.id).then(res => {
+        if (res.code === 200) {
+          this.$message.success(res.message);
+          this.fetchData(this.queryForm.lastQuery);
+          return;
+        } else {
+          this.$message.error(res.message);
+        }
+      });
+    },
+    /**
+     * 表格内状态滑块切换事件
+     */
+    handleTableRowStatusChange($event, row) {
+      tagApi.updateStatus(row.id, $event).then(res => {
+        if (res.code === 200) {
+          this.$message.success(res.message);
+        } else {
+          this.$message.error(res.message);
+        }
+
+        this.fetchData(this.queryForm.lastQuery);
+      });
+    },
     /**
      * 弹窗取消按扭点击事件
      */
@@ -339,21 +467,100 @@ export default {
      * 弹窗确定按扭点击事件
      */
     handleDialogSubmit() {
-      console.log(this.modifyDialog.form.data);
+      this.$refs.modifyDialogForm.validate(valid => {
+        if (valid) {
+          // 新增
+          if (this.modifyDialog.type === 0) {
+            tagApi.create(this.modifyDialog.form.data).then(res => {
+              if (res.code === 200) {
+                this.$message.success(res.message);
+                this.modifyDialog.visible = false;
+                this.table.page.current = 1;
+                // 新增时重置查询条件
+                this.handleResetClick();
+                this.fetchData(this.queryForm.data);
+              } else {
+                this.$message.error(res.message);
+              }
+            });
+            return;
+          }
+
+          // 编辑
+          if (this.modifyDialog.type === 1) {
+            tagApi.update(this.modifyDialog.form.data).then(res => {
+              if (res.code === 200) {
+                this.$message.success(res.message);
+                this.modifyDialog.visible = false;
+                this.fetchData(this.queryForm.lastQuery);
+              } else {
+                this.$message.error(res.message);
+              }
+            });
+            return;
+          }
+
+          // 新增二级
+          if (this.modifyDialog.type === 2) {
+            tagApi.create(this.modifyDialog.form.data).then(res => {
+              if (res.code === 200) {
+                this.$message.success(res.message);
+                this.modifyDialog.visible = false;
+                this.fetchData(this.queryForm.lastQuery);
+              } else {
+                this.$message.error(res.message);
+              }
+            });
+            return;
+          }
+        } else {
+          this.$message.error("请完善表单相关信息！");
+          return false;
+        }
+      });
+    },
+    /**
+     * 弹窗观察按扭点击事件
+     */
+    handleDialogBeforeClose(done) {
       this.modifyDialog.visible = false;
+      done();
     },
     /**
      * 分页组件页数变化事件
      */
-    handlePageCurrentChange() {
+    handlePageCurrentChange(val) {
-      console.log(this.table.page.size + " " + this.table.page.current);
+      this.table.page.current = val;
+      this.fetchData(this.queryForm.lastQuery);
     },
     /**
      * 分页组件大小变化事件
      */
     handlePageSizeChange(val) {
       this.table.page.size = val;
-      console.log(this.table.page.size + " " + this.table.page.current);
+      this.fetchData(this.queryForm.lastQuery);
+    },
+    /**
+     * 查看二级按钮点击事件
+     */
+    handleChangeChildrenTag() {
+      this.tagType = 2;
+      // 搜索条件重置
+      this.queryForm.data.level = 2;
+      this.handleResetClick();
+      // 弹窗内容重置
+      this.modifyDialog.form.rules["parentId"] = [
+        { required: true, message: "请选择父级", trigger: "change" }
+      ];
+      // 表格、分页重置
+      this.table.data = [];
+      this.table.page.current = 1;
+      this.table.page.size = 10;
+      this.table.show = false;
+      this.$nextTick(() => {
+        this.table.show = true;
+      });
+      this.fetchData(this.queryForm.data);
     }
   }
 };
@@ -396,9 +603,6 @@ export default {
   height: 60px;
   display: flex;
 }
-.in-card-table {
-  height: calc(100vh - 290px);
-}
 .clearfix:before,
 .clearfix:after {
   display: table;