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

src/views/article/index.vue

@@ -1,84 +1,147 @@
 <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>
-    </div>
-    <el-table
-      v-loading="listLoading"
-      :data="list"
-      border
-      fit
-      highlight-current-row
-      style="width: 100%;"
-    >
-      <el-table-column label="ID" prop="id" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.article_id }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="分类" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.category_id | getCateName(categoriesJson) }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="标题" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.title }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="封面图" align="center">
-        <template slot-scope="{row}">
-          <img :src="row.img" height="100" />
-        </template>
-      </el-table-column>
-      <el-table-column label="外链" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.url }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="标签详情">
-        <template slot-scope="{row}">
-          <span>{{ row.label_name | getTagDetail }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="创建时间" align="center">
-        <template slot-scope="{row}">
-          <span>{{ row.create_time }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
-            <template slot-scope="scope">
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-edit"
-                @click="handleUpdate(scope.row)"
-              >修改</el-button>
-              <el-button
-                size="mini"
-                type="text"
-                icon="el-icon-delete"
-                @click="handleDelete(scope.row)"
-              >删除</el-button>
-            </template>
-          </el-table-column>
-    </el-table>
+    <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"
+            border
+            fit
+            highlight-current-row
+            style="width: 100%;"
+          >
+            <el-table-column label="ID" prop="id" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.article_id }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="分类" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.category_id | getCateName(categoriesJson) }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="标题" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.title }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="封面图" align="center">
+              <template slot-scope="{row}">
+                <img :src="row.img" height="100" />
+              </template>
+            </el-table-column>
+            <el-table-column label="外链" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.url }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="标签详情">
+              <template slot-scope="{row}">
+                <span>{{ row.label_name | getTagDetail }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="创建时间" align="center">
+              <template slot-scope="{row}">
+                <span>{{ row.create_time }}</span>
+              </template>
+            </el-table-column>
+            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+              <template slot-scope="scope">
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-edit"
+                  @click="handleUpdate(scope.row)"
+                >修改</el-button>
+                <el-button
+                  size="mini"
+                  type="text"
+                  icon="el-icon-delete"
+                  @click="handleDelete(scope.row)"
+                >删除</el-button>
+              </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"
-          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="">
+    <!-- 添加或修改分类对话框 -->
+    <el-drawer
+      ref="drawer"
+      :title="textMap[dialogStatus]"
+      :visible.sync="dialogFormVisible"
+      direction="rtl"
+      custom-class="demo-drawer"
+      size="950px"
+    >
+      <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"
@@ -89,14 +152,19 @@
             />
           </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-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-option
-                  v-for="(sItem,sIndex) in item.value"
+                  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>
@@ -126,33 +211,43 @@
               :limit="1"
               :on-exceed="handleFileExceed"
               :onSuccess="uploadFileSuccess"
-              :file-list=" temp.script_url ? [JSON.parse(temp.script_url)] : [] "
+              :file-list="temp.script_url ? [JSON.parse(temp.script_url)] : []"
             >
               <el-button size="small" type="primary">点击上传</el-button>
               <!-- <div slot="tip" class="el-upload__tip">
                 只能上传jpg/png文件，且不超过500kb
-              </div> -->
+              </div>-->
             </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>
       </div>
-      </el-drawer>
+    </el-drawer>
   </div>
 </template>
 
 <script>
-import { validPhone,isEmpty } from '@/utils/validate'
-import { fetchList, createArticle, updateArticle,delArticle, fetchArticleDetails } from '@/api/article'
+import { validPhone, isEmpty } from '@/utils/validate'
+import { fetchList, createArticle, updateArticle, delArticle, fetchArticleDetails } from '@/api/article'
 import Pagination from '@/components/Pagination' // secondary package based on el-pagination
 import VueUeditorWrap from "vue-ueditor-wrap"
 import { listCategory } from '@/api/category'
@@ -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 }],
@@ -180,7 +288,7 @@ export default {
         UEDITOR_HOME_URL: "/UEditor/",
         serverUrl: process.env.VUE_APP_BASE_API + "/files/baiduUp",
         initialFrameHeight: 300,
-        scaleEnabled:true
+        scaleEnabled: true
       },
       uploadAction: process.env.VUE_APP_BASE_API + '/files/uploadFile',
       temp: {
@@ -208,7 +316,7 @@ export default {
       // categoriesJson:[],
       downloadLoading: false,
       // tagData:[],
-      chooseTagData:[]
+      chooseTagData: []
     }
   },
   mounted() {
@@ -222,15 +330,15 @@ export default {
     },
     tagData() {
       let matchData = null
-      this.categoriesJson.forEach(item=>{
-        if(item.id==this.temp.category_id){
+      this.categoriesJson.forEach(item => {
+        if (item.id == this.temp.category_id) {
           matchData = item.label_name
         }
       })
       return matchData ? JSON.parse(matchData) : [];
     }
   },
-  watch:{
+  watch: {
     tagData(newVal) {
       console.log("tagDAta");
       console.log(newVal);
@@ -238,14 +346,18 @@ export default {
         this.chooseTagData = []
       }
     },
-    chooseTagData(newVal){
+    chooseTagData(newVal) {
       console.log("chooseTagData");
       console.log(newVal);
+    },
+    // 根据名称筛选部门树
+    deptName(val) {
+      this.$refs.tree.filter(val)
     }
   },
   filters: {
     getCateName(id, categoriesJson) {
-      for (var i=0;i<categoriesJson.length;i++) {
+      for (var i = 0; i < categoriesJson.length; i++) {
         if (id == categoriesJson[i].id) {
           return categoriesJson[i].name
         }
@@ -255,9 +367,9 @@ export default {
       if (!data) {
         return
       }
-      let str=''
+      let str = ''
       data = JSON.parse(data);
-      data.forEach(item=>{
+      data.forEach(item => {
         if (item.value.length) {
           str += `${item.label}：${item.value.join("、")}；`
         }
@@ -266,21 +378,30 @@ export default {
     },
   },
   methods: {
+    // 节点单击事件
+    handleNodeClick(data) {
+      this.listQuery.category_id = data.id
+      this.getList()
+    },
     handleCategory(array) {
       var res = []
-      array.forEach((item,index)=>{
-        let obj={}
+      array.forEach((item, index) => {
+        let obj = {}
         obj.id = item.category_id
         obj.name = item.category_name
         obj.label_name = item.label_name
         res.push(obj)
-        if(item.children) {
+        if (item.children) {
           res.push(...this.handleCategory(item.children))
         }
       })
       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,12 +433,14 @@ export default {
         time: '',
         img: '',
         script_url: '',
-        content: ''
+        content: '',
+        description: '',
+        video_time: ''
       }
     },
     submitForm() {
       let matchData = [...this.tagData]
-      this.chooseTagData.forEach((item,index)=>{
+      this.chooseTagData.forEach((item, index) => {
         matchData[index]['value'] = item
       })
       this.temp.label_name = JSON.stringify(matchData);
@@ -338,30 +461,31 @@ export default {
     createData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
-          createArticle(this.temp).then(() => {
-            this.dialogFormVisible = false
-            this.$message({
-              message: "添加成功",
-              type: "success",
-              duration: 2 * 1000,
-            });
-            this.getList()
-          })
+      createArticle(this.temp).then(() => {
+        this.dialogFormVisible = false
+        this.$message({
+          message: "添加成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
+        this.getList()
+      })
       //   }
       // })
     },
     handleUpdate(row) {
       let article_id = row.article_id
-      fetchArticleDetails({article_id}).then(res => {
+      this.dialogStatus = 'update'
+      this.dialogFormVisible = true
+      fetchArticleDetails({ article_id }).then(res => {
         this.temp = res.data;
         if (this.temp.label_name) {
           let data = JSON.parse(this.temp.label_name)
-          data.forEach((item,index)=>{
+          data.forEach((item, index) => {
             this.chooseTagData[index] = item.value
           })
         }
-        this.dialogStatus = 'update'
-        this.dialogFormVisible = true
+
         this.$nextTick(() => {
           this.$refs['dataForm'].clearValidate()
         })
@@ -370,25 +494,25 @@ export default {
     updateData() {
       // this.$refs['dataForm'].validate((valid) => {
       //   if (valid) {
-          updateArticle(this.temp).then(() => {
-            this.dialogFormVisible = false
-             this.$message({
-              message: "更新成功",
-              type: "success",
-              duration: 2 * 1000,
-            });
+      updateArticle(this.temp).then(() => {
+        this.dialogFormVisible = false
+        this.$message({
+          message: "更新成功",
+          type: "success",
+          duration: 2 * 1000,
+        });
 
-            this.getList()
-          })
+        this.getList()
+      })
       //   }
       // })
     },
-    handleDelete({title,article_id}) {
+    handleDelete({ title, article_id }) {
       this.$confirm('是否确认删除名称为"' + title + '"的数据项?', '警告', {
         confirmButtonText: '确定',
         cancelButtonText: '取消',
         type: 'warning'
-      }).then(function() {
+      }).then(function () {
         console.log('del')
         return delArticle({ article_id })
       }).then((response) => {
@@ -407,7 +531,7 @@ export default {
             duration: 2 * 1000,
           });
         }
-      }).catch(function() {})
+      }).catch(function () { })
     },
     uploadSuccess(response, file) {
       if (response.state == 'SUCCESS') {
@@ -429,7 +553,7 @@ export default {
       obj.url = response.url
       this.temp.script_url = JSON.stringify(obj)
     },
-    handleFileExceed(files, fileList){
+    handleFileExceed(files, fileList) {
       this.$message.warning("只允许上传一个脚本");
     },
     uploadRemove(file) {
@@ -445,7 +569,7 @@ export default {
     uploadError(err) {
       this.$alert(err, "发生错误", {
         confirmButtonText: "确定",
-        callback: (action) => {},
+        callback: (action) => { },
       });
     },
     /** 查询分类下拉树结构 */
@@ -455,7 +579,7 @@ export default {
         this.categoryOptions.push(...response.data)
       })
     },
-     /** 转换分类数据结构 */
+    /** 转换分类数据结构 */
     normalizer(node) {
       if (node.children && !node.children.length) {
         delete node.children
@@ -467,28 +591,25 @@ export default {
       }
     },
     // 选择类别，获取对应的标签数据
-    chooseCategory(node){
+    chooseCategory(node) {
       this.tagData = node.label_name ? JSON.parse(node.label_name) : [];
     }
   }
 }
 </script>
 <style lang="scss" scoped>
-  .app-container {
-    .filter-container {
-      margin-left: 5px;
-      margin-bottom: 6px;
-    }
-    ::v-deep  .el-drawer__body{
-      padding: 20px;
-    }
-    ::v-deep section {
-      overflow-y: scroll;
-    }
-    .editor-box {
-      ::v-deep .el-form-item__content {
-        line-height: 20px;
-      }
+.app-container {
+  .filter-container {
+    margin-left: 5px;
+    margin-bottom: 6px;
+  }
+  ::v-deep .el-drawer__body {
+    padding: 20px;
+  }
+  .editor-box {
+    ::v-deep .el-form-item__content {
+      line-height: 20px;
     }
   }
+}
 </style>