✨ feat(标签): 标签模块完善

src/views/tag/index.vue

@@ -8,24 +8,32 @@
   <div class="app-container">
     <!-- card -->
     <el-card class="box-card">
-      <div slot="header" style="background-color: rgba(249, 249, 249, 1);" class="card-header clearfix">
+      <div slot="header" class="card-header clearfix">
         <span class="card-header-text">标签列表</span>
         <el-button
           style="float: right; margin-top: -5px;"
           type="primary"
           icon="el-icon-plus"
           size="small"
-          @click="log('新增标签')"
+          @click="handleAddClick"
           >新增标签</el-button
         >
       </div>
       <!-- 查询条件 -->
       <el-form :inline="true" class="in-card-form">
         <el-form-item>
-          <el-input placeholder="标签名称" size="medium"></el-input>
+          <el-input
+            placeholder="标签名称"
+            size="medium"
+            v-model="queryForm.data.tagName"
+          ></el-input>
         </el-form-item>
         <el-form-item>
-          <el-select placeholder="选择发布人" size="medium" value="">
+          <el-select
+            placeholder="选择发布人"
+            size="medium"
+            v-model="queryForm.data.publisher"
+          >
             <el-option label="发布人1" value="1"></el-option>
             <el-option label="发布人2" value="2"></el-option>
           </el-select>
@@ -33,11 +41,12 @@
         <el-form-item>
           <el-date-picker
             placeholder="选择时间范围"
-            v-model="daterange"
+            v-model="queryForm.data.timeRange"
             type="daterange"
             range-separator="~"
             :editable="false"
             :clearable="false"
+            value-format="yyyy-MM-dd"
             start-placeholder="选择时间范围"
             size="medium"
             style="width: 280px;"
@@ -49,7 +58,7 @@
             icon="el-icon-search"
             type="primary"
             size="medium"
-            @click="log('查询')"
+            @click="handleQueryClick"
             >查询</el-button
           >
         </el-form-item>
@@ -57,7 +66,7 @@
           <el-button
             icon="el-icon-refresh-left"
             size="medium"
-            @click="log('重置')"
+            @click="handleResetClick"
             >重置</el-button
           >
         </el-form-item>
@@ -75,9 +84,9 @@
       <el-table
         stripe
         class="in-card-table"
-        :data="list"
+        :data="table.data"
-        v-loading.body="listLoading"
+        v-loading.body="table.loadig"
-        element-loading-text="Loading"
+        element-loading-text="加载中"
         :header-cell-style="{ background: '#f5f7fa', color: '#606266' }"
         border
         fit
@@ -87,7 +96,7 @@
             {{ scope.$index + 1 }}
           </template>
         </el-table-column>
-        <el-table-column label="中文名称" prop="chName"></el-table-column>
+        <el-table-column label="中文名称" prop="zhName"></el-table-column>
         <el-table-column label="英文名称" prop="enName"></el-table-column>
         <el-table-column label="歌曲数" prop="songCount"></el-table-column>
         <el-table-column
@@ -116,7 +125,7 @@
             <el-button
               plain
               icon="el-icon-edit"
-              @click="log('编辑')"
+              @click="handleModifyClick(scope.row)"
               type="primary"
               size="mini"
               >编辑</el-button
@@ -124,7 +133,7 @@
             <el-button
               plain
               icon="el-icon-success"
-              @click="log('新增二级')"
+              @click="handleAddSubClick(scope.row)"
               type="success"
               size="mini"
               >新增二级</el-button
@@ -132,7 +141,7 @@
             <el-button
               plain
               icon="el-icon-delete"
-              @click="log('删除')"
+              @click="log('删除' + scope.$index)"
               type="danger"
               size="mini"
               >删除</el-button
@@ -145,10 +154,55 @@
         class="pagination-right"
         background
         layout="total, prev, pager, next, sizes"
-        :total="1000"
+        :current-page.sync="table.page.current"
+        :page-size="table.page.size"
+        :total="table.page.total"
+        @size-change="handlePageSizeChange"
+        @current-change="handlePageCurrentChange"
       >
       </el-pagination>
     </el-card>
+    <el-dialog
+      :title="['新增标签', '修改标签', '新增二级'][modifyDialog.type]"
+      class="popup-dialog"
+      :visible="true"
+      v-if="modifyDialog.visible"
+      width="30%"
+    >
+      <el-form
+        :model="modifyDialog.form.data"
+        :rules="modifyDialog.form.rules"
+        ref="modifyDialogForm"
+        label-width="100px"
+        class="demo-ruleForm"
+      >
+        <el-form-item v-if="modifyDialog.type == 2" label="选择父级">
+          <el-input
+            disabled
+            size="small"
+            v-model="modifyDialog.form.data.parent"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="中文名称" prop="zhName">
+          <el-input
+            size="small"
+            v-model="modifyDialog.form.data.zhName"
+          ></el-input>
+        </el-form-item>
+        <el-form-item label="英文名称" prop="enName">
+          <el-input
+            size="small"
+            v-model="modifyDialog.form.data.enName"
+          ></el-input>
+        </el-form-item>
+      </el-form>
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="handleDialogCancel">取消</el-button>
+        <el-button size="small" type="primary" @click="handleDialogSubmit"
+          >确定</el-button
+        >
+      </span>
+    </el-dialog>
   </div>
 </template>
 
@@ -157,9 +211,49 @@ export default {
   name: "Tag",
   data() {
     return {
-      list: null,
+      // 查询表单
-      listLoading: false,
+      queryForm: {
-      daterange: null
+        remoteData: {
+          publisher: []
+        },
+        lastQuery: {},
+        data: {
+          tagName: null,
+          publisher: null,
+          timeRange: []
+        }
+      },
+      // 表格
+      table: {
+        loadinng: true,
+        data: [],
+        page: {
+          current: 1,
+          size: 10,
+          total: 0
+        }
+      },
+      // 新增修改弹窗
+      modifyDialog: {
+        visible: false,
+        type: 0, // 0for新增 1for编辑 2for新增2级
+        form: {
+          rules: {
+            zhName: [
+              { required: true, message: "请输入中文名称", trigger: "blur" }
+            ],
+            enName: [
+              { required: true, message: "请输入英文名称", trigger: "blur" }
+            ]
+          },
+          data: {
+            parent: null,
+            zhName: null,
+            enName: null
+          }
+        }
+      },
+      dialogVisible: false
     };
   },
   filters: {},
@@ -170,32 +264,134 @@ export default {
     log(e) {
       this.$message.success(e);
     },
+    // ************************* 数据查询 *************************
+    /**
+     * 查询表格数据
+     */
     fetchData() {
-      this.listLoading = true;
+      // 记录上一次查询条件
-      this.list = [
+      this.queryForm.lastQuery = this.queryForm.data;
-        { title: "title1", inUse: true },
+      console.log("formData", this.queryForm.data);
-        { title: "title2", inUse: false },
+      console.log("pageData", this.table.page);
-        { title: "title2", inUse: false },
+      // 加载数据
-        { title: "title2", inUse: false }
+      this.table.loading = true;
-      ];
+      for (let i = 0; i < 10; i++) {
-      this.listLoading = false;
+        this.table.data.push({
+          zhName: "title1",
+          enName: "enname",
+          inUse: true
+        });
+      }
+      // page
+      this.table.page.total = 20;
+      this.table.loading = false;
+    },
+    // ************************* 按扭事件 *************************
+    /**
+     * 查询按扭点击事件
+     */
+    handleQueryClick() {
+      this.table.page.current = 1;
+      this.table.page.total = 0;
+      this.fetchData();
+    },
+    /**
+     * 重置点击事件
+     */
+    handleResetClick() {
+      this.queryForm.data = {
+        tagName: null,
+        publisher: null,
+        timeRange: []
+      };
+    },
+    /**
+     * 新建标签点击事件
+     */
+    handleAddClick() {
+      this.modifyDialog.type = 0;
+      this.modifyDialog.visible = true;
+    },
+    /**
+     * 编辑标签点击事件
+     */
+    handleModifyClick(row) {
+      console.log(row);
+      this.modifyDialog.type = 1;
+      this.modifyDialog.visible = true;
+    },
+    /**
+     * 新增二级点击事件
+     */
+    handleAddSubClick(row) {
+      console.log(row);
+      this.modifyDialog.form.data.parent = row["zhName"];
+      this.modifyDialog.type = 2;
+      this.modifyDialog.visible = true;
+    },
+    /**
+     * 弹窗取消按扭点击事件
+     */
+    handleDialogCancel() {
+      this.modifyDialog.visible = false;
+    },
+    /**
+     * 弹窗确定按扭点击事件
+     */
+    handleDialogSubmit() {
+      console.log(this.modifyDialog.form.data);
+      this.modifyDialog.visible = false;
+    },
+    /**
+     * 分页组件页数变化事件
+     */
+    handlePageCurrentChange() {
+      console.log(this.table.page.size + " " + this.table.page.current);
+    },
+    /**
+     * 分页组件大小变化事件
+     */
+    handlePageSizeChange(val) {
+      this.table.page.size = val;
+      console.log(this.table.page.size + " " + this.table.page.current);
     }
   }
 };
 </script>
 <style scoped>
 .pagination-right {
-  /* 设置文本右对齐，使分页组件靠右显示 */
   text-align: right;
   margin-top: 10px;
 }
 .box-card {
+  min-height: 300px;
   height: calc(100vh - 90px);
   border-radius: 10px;
   .el-card__header {
     background-color: rgba(249, 249, 249, 1);
   }
 }
+/deep/ .el-dialog {
+  border-radius: 5px;
+}
+.popup-dialog {
+  .el-dialog__header {
+    border-top-left-radius: 5px;
+    border-top-right-radius: 5px;
+    height: 50px;
+    background-color: #f5f5f5f5;
+  }
+  .el-dialog__title {
+    font-size: 15px;
+    font-weight: bolder;
+  }
+  .el-dialog__footer {
+    border-top: solid;
+    border-top-width: thin;
+    border-top-color: rgb(233, 233, 233);
+    padding: 10px 20px 10px;
+  }
+}
 .in-card-form {
   height: 60px;
   display: flex;
@@ -211,7 +407,6 @@ export default {
 .clearfix:after {
   clear: both;
 }
-
 .card-header {
   height: 23px;
 }