更新文章列表页，增加筛选条件和分类

src/views/article/index.vue

@@ -1,10 +1,65 @@
 <template>
   <div class="app-container">
-    <div class="filter-container">
-      <el-button class="filter-item el-button el-button--primary el-button--mini" type="primary" icon="el-icon-edit" @click="handleCreate">
-        添加文章
-      </el-button>
+    <el-card class="box-card">
+      <el-row :gutter="20">
+        <!--部门数据-->
+        <el-col :span="4" :xs="24">
+          <div class="head-container">
+            <el-input
+              v-model="deptName"
+              placeholder="请输入分类名称"
+              clearable
+              size="small"
+              prefix-icon="el-icon-search"
+              style="margin-bottom: 20px"
+              :default-expand-all="false"
+            />
+          </div>
+          <div class="head-container">
+            <el-tree
+              ref="tree"
+              :data="categoryOptions"
+              highlight-current
+              :props="defaultProps"
+              :expand-on-click-node="false"
+              :filter-node-method="filterNode"
+              @node-click="handleNodeClick"
+            />
           </div>
+        </el-col>
+        <!--用户数据-->
+        <el-col :span="20" :xs="24">
+          <el-form ref="queryForm" :model="listQuery" :inline="true" label-width="68px">
+            <el-form-item label="文章标题" prop="title">
+              <el-input
+                v-model="listQuery.title"
+                placeholder="请输入文章标题"
+                clearable
+                size="small"
+                style="width: 160px"
+                @keyup.enter.native="getList"
+              />
+            </el-form-item>
+            <el-form-item label="状态" prop="is_offline">
+              <el-select
+                v-model="listQuery.is_offline"
+                placeholder="文章状态"
+                clearable
+                size="small"
+                style="width: 160px"
+              >
+                <el-option
+                  v-for="dict in statusOptions"
+                  :key="dict.value"
+                  :label="dict.label"
+                  :value="dict.value"
+                />
+              </el-select>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+            </el-form-item>
+          </el-form>
           <el-table
             v-loading="listLoading"
             :data="list"
@@ -65,20 +120,28 @@
               </template>
             </el-table-column>
           </el-table>
+          <pagination
+            v-show="total > 0"
+            :total="total"
+            :page.sync="listQuery.page"
+            :limit.sync="listQuery.limit"
+            @pagination="getList"
+          />
+        </el-col>
+      </el-row>
+    </el-card>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
     <!-- 添加或修改分类对话框 -->
     <el-drawer
       ref="drawer"
       :title="textMap[dialogStatus]"
       :visible.sync="dialogFormVisible"
       direction="rtl"
-          custom-class="drawer"
+      custom-class="demo-drawer"
       size="950px"
     >
-      <div class="drawer__content">
-    <!-- <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible" :fullscreen="dialogFullscreen"> -->
-        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style="">
+      <div class="demo-drawer__content">
+        <el-form ref="dataForm" :model="temp" label-position="left" label-width="70px" style>
           <el-form-item label="类型">
             <treeselect
               v-model="temp.category_id"
@@ -90,13 +153,18 @@
           </el-form-item>
           <template v-if="tagData.length">
             <el-form-item :label="item.label" v-for="(item, index) in tagData" :key="index">
-              <el-select v-model="chooseTagData[index]" multiple placeholder="请选择" style="width:100%">
+              <el-select
+                v-model="chooseTagData[index]"
+                multiple
+                placeholder="请选择"
+                style="width:100%"
+              >
                 <el-option
                   v-for="(sItem, sIndex) in item.value"
                   :key="sIndex"
                   :label="sItem"
-                  :value="sItem">
-                </el-option>
+                  :value="sItem"
+                ></el-option>
               </el-select>
             </el-form-item>
           </template>
@@ -104,7 +172,12 @@
             <el-input v-model="temp.title" />
           </el-form-item>
           <el-form-item label="日期" prop="time">
-            <el-date-picker v-model="temp.time" value-format="yyyy-MM-dd HH:mm:ss" type="date" placeholder="选择日期"></el-date-picker>
+            <el-date-picker
+              v-model="temp.time"
+              value-format="yyyy-MM-dd HH:mm:ss"
+              type="date"
+              placeholder="选择日期"
+            ></el-date-picker>
           </el-form-item>
           <el-form-item label="外链" prop="url">
             <el-input v-model="temp.url" />
@@ -113,9 +186,21 @@
             <el-input type="textarea" v-model="temp.description" />
           </el-form-item>
           <el-form-item label="封面" prop="img" required>
-            <img v-if="temp.img" :src="temp.img" class="el-upload el-upload--picture-card" style="float:left">
-            <el-upload ref="sys_app_logo" :on-success="uploadSuccess" :on-error="uploadError"
-            :action="uploadAction" style="float:left" list-type="picture-card" :show-file-list="false">
+            <img
+              v-if="temp.img"
+              :src="temp.img"
+              class="el-upload el-upload--picture-card"
+              style="float:left"
+            />
+            <el-upload
+              ref="sys_app_logo"
+              :on-success="uploadSuccess"
+              :on-error="uploadError"
+              :action="uploadAction"
+              style="float:left"
+              list-type="picture-card"
+              :show-file-list="false"
+            >
               <i class="el-icon-plus" />
             </el-upload>
           </el-form-item>
@@ -135,13 +220,23 @@
             </el-upload>
           </el-form-item>
           <el-form-item label="视频时长" prop="video_time">
-            <el-time-picker v-model="temp.video_time" value-format="HH:mm:ss" type="time" placeholder="选择时间"></el-time-picker>
+            <el-time-picker
+              v-model="temp.video_time"
+              value-format="HH:mm:ss"
+              type="time"
+              placeholder="选择时间"
+            ></el-time-picker>
           </el-form-item>
           <el-form-item label="内容" class="editor-box">
-            <vue-ueditor-wrap v-model="temp.content" :config="ueditorConfig" :destroy="true"  v-if="dialogFormVisible" />
+            <vue-ueditor-wrap
+              v-model="temp.content"
+              :config="ueditorConfig"
+              :destroy="true"
+              v-if="dialogFormVisible"
+            />
           </el-form-item>
         </el-form>
-        <div class="drawer__footer">
+        <div class="demo-drawer__footer">
           <el-button type="primary" @click="submitForm">确 定</el-button>
           <el-button @click="dialogFormVisible = false">取 消</el-button>
         </div>
@@ -164,6 +259,17 @@ export default {
   components: { Pagination, Treeselect, VueUeditorWrap },
   data() {
     return {
+      deptName: '',
+      defaultProps: {
+        children: 'children',
+        label: 'category_name'
+      },
+       // 状态数据字典
+      statusOptions: [
+        {value: 2, label: '上线'},
+        {value: 1, label: '下线'}
+      ],
+      categoryOptionsLeft: undefined,
       tableKey: 0,
       list: null,
       total: 0,
@@ -171,6 +277,8 @@ export default {
       listQuery: {
         page: 1,
         limit: 20,
+        is_offline: 2,
+        title: ''
       },
       // accountRules: {
       //   phone: [{ required: true, trigger: 'blur', validator: RulePhone }],
@@ -241,6 +349,10 @@ export default {
     chooseTagData(newVal) {
       console.log("chooseTagData");
       console.log(newVal);
+    },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
     }
   },
   filters: {
@@ -266,6 +378,11 @@ export default {
     },
   },
   methods: {
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.listQuery.category_id = data.id
+      this.getList()
+    },
     handleCategory(array) {
       var res = []
       array.forEach((item, index) => {
@@ -280,7 +397,11 @@ export default {
       })
       return res
     },
-    
+// 筛选节点
+    filterNode(value, data) {
+      if (!value) return true
+      return data.category_name.indexOf(value) !== -1
+    },
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
@@ -312,7 +433,9 @@ export default {
         time: '',
         img: '',
         script_url: '',
-        content: ''
+        content: '',
+        description: '',
+        video_time: ''
       }
     },
     submitForm() {
@@ -352,6 +475,8 @@ export default {
     },
     handleUpdate(row) {
       let article_id = row.article_id
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
       fetchArticleDetails({ article_id }).then(res => {
         this.temp = res.data;
         if (this.temp.label_name) {
@@ -360,8 +485,7 @@ export default {
             this.chooseTagData[index] = item.value
           })
         }
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
+
         this.$nextTick(() => {
           this.$refs['dataForm'].clearValidate()
         })
@@ -482,9 +606,6 @@ export default {
   ::v-deep .el-drawer__body {
     padding: 20px;
   }
-    ::v-deep section {
-      overflow-y: scroll;
-    }
   .editor-box {
     ::v-deep .el-form-item__content {
       line-height: 20px;