推广素材列表管理

src/HManagement/archives_ad/modules/list.vue

@@ -1,26 +1,9 @@
 <template>
   <div>
     <slot name="add"></slot>
-    <!-- <div class="container normal-panel normal-margin"></div> -->
     <div class="container normal-panel">
-      <!-- 表格筛选搜索 -->
-      <div class="flex-align-center search-panel" style="margin-bottom:16px">
-        <div class="flex-align-center">
-          <p style="flex:1 0 auto;font-size:14px">素材分类:&nbsp;</p>
-
-          <el-cascader class="cascader" size="small" v-model="selectClassId" :options="selectList"
-            :props="{ expandTrigger: 'hover', label: 'classname', value: 'sat_sharematerial_classid', checkStrictly: true }"
-            @change="handleChange" clearable />
-
-          <el-input style="width:270px" v-model="params.content.where.condition" @change="getList(true)"
-            @clear="getList(true)" placeholder="请输入内容" class="input-with-select" size="small" clearable>
-            <el-button style="width:82px;" slot="append" icon="el-icon-search">查 询
-            </el-button>
-          </el-input>
-
-        </div>
-      </div>
-
+      <!-- 分类筛选及搜索 -->
+      <filter-list @changeTypeId="changeTypeId" @startSearch="startSearch" />
       <!-- 表格 -->
       <tableLayout :layout="tablecols" :data="list" :custom="true" :height="tableHieght">
         <template v-slot:customcol="scope">
@@ -57,9 +40,10 @@
 </template>
 
 <script>
+import filterList from "./filterList";
 export default {
   name: "list",
-  components: {},
+  components: { filterList },
   data() {
     return {
       list: [],
@@ -78,17 +62,13 @@ export default {
       },
       currentPage: 1,
       total: 0,
-
-      selectList: [],//分类列表
-      selectClassId: "",
-
+      selectClassId: "",//筛选分类ID
     }
   },
   created() {
     //获取表结构
     this.tablecols = this.tool.tabelCol(this.$route.name)['listTable'].tablecols;
     this.getList();
-    this.getSelectList();
   },
   methods: {
     getType(type) {
@@ -100,20 +80,6 @@ export default {
         return '图文'
       }
     },
-    /* 获取分类列表 */
-    getSelectList() {
-      this.$api.requested({
-        "classname": "webmanage.saletool.sharematerial.sharematerialClass",
-        "method": "select",
-        "content": {
-          parentid: 0
-        }
-      }).then(res => {
-        console.log("分类列表",res)
-        if (res.msg != '成功') return this.$message.error(res.data);
-        this.selectList = res.data;
-      })
-    },
     /* 获取列表 */
     getList(init = false) {
       let initID = '9999' + JSON.parse(window.sessionStorage.getItem("active_account")).userid;
@@ -152,9 +118,15 @@ export default {
       this.params.content.pageNumber = e;
       this.getList();
     },
-    handleChange(value) {
-      if(value.length==0)  value[0] = "";
-      this.selectClassId = value[1] ? value[1] : value[0];
+    /* 改变分类ID */
+    changeTypeId(id) {
+      this.selectClassId = id == 0 ? "" : id;
+      this.getList(true);
+    },
+    /* 开始搜索 */
+    startSearch(value) {
+      console.log(value)
+      this.params.content.where.condition = value;
       this.getList(true);
     }
   }