新增方法

src/components/Share/shareFriend.vue

 <template>
-  <div class="shareCategory">
+  <div class="shareFriend">
     <template v-if="IsShowCategory">
       <div class="head-title">
         发圈素材管理
@@ -9,21 +9,63 @@
       </div>
       <div class="content">
         <div class="searchInput">
-          <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入分类名称" v-model="msg.Name"
+          素材类型 <el-select v-model="msg.CateId"></el-select>
+          添加时间 <el-date-picker class="indataPicker" type="daterange" v-model="dateStr" range-separator="至"
+            start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd">
+          </el-date-picker>
+          <el-input style="display:inline-block;width:225px;height:30px" placeholder="请输入文案关键字搜索" v-model="msg.KeyWords"
             size="small" clearable @keyup.enter.native="msg.pageIndex=1,getList()" @clear="msg.pageIndex=1,getList()">
           </el-input>
           <span class="el-icon-search" style="color:#979dad;font-size:14px;position:relative;top:1px"
             @click="msg.pageIndex=1,getList()"> </span>
         </div>
         <br>
-        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0" row-key="Id"
-          default-expand-all :tree-props="{children: 'children', hasChildren: 'hasChildren'}">
+        <el-table :data="dataList" v-loading="loading" border style="width: 100%;margin:20px 0">
           <el-table-column prop="Id" label="ID" width="100">
           </el-table-column>
-          <el-table-column prop="Name" label="分类名称">
+          <el-table-column label="分类名称" width="100">
+          </el-table-column>
+          <el-table-column prop="MaterialInfo" label="发圈文案" width="100">
+          </el-table-column>
+          <el-table-column prop="MaterialImg" label="图片视频" width="100">
+          </el-table-column>
+          <el-table-column prop="GoodsId" label="商品信息" width="100">
+          </el-table-column>
+          <el-table-column prop="SortNum" label="排序" width="150">
+            <template slot-scope="scope">
+              <div v-if="sort_goods_id != scope.row.Id" flex="dir:left cross:center">
+                <span>{{scope.row.SortNum}}</span>
+                <el-button class="edit-sort" type="text" @click="sort_goods_id=scope.row.Id">
+                  <img src="../../assets/img/userman/edit.png" alt="">
+                </el-button>
+              </div>
+              <div style="display: flex;align-items: center" v-else>
+                <el-input style="min-width: 70px" type="number" size="mini" class="change" v-model="scope.row.SortNum"
+                  autocomplete="off"></el-input>
+                <el-button class="change-quit" type="text" style="color: #F56C6C;padding: 0 5px" icon="el-icon-error"
+                  circle @click="sort_goods_id=0"></el-button>
+                <el-button class="change-success" type="text" style="margin-left: 0;color: #67C23A;padding: 0 5px"
+                  icon="el-icon-success" circle @click="sort_goods_id=0,updateSortNum(scope.row)">
+                </el-button>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="IsTop" label="是否置顶" width="100">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.IsTop" active-color="#409EFF" :active-value="1" :inactive-value="0"
+                @change="updateIsTop(scope.row)">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column prop="IsUse" label="状态" width="100">
+            <template slot-scope="scope">
+              <el-switch v-model="scope.row.IsUse" active-color="#409EFF" :active-value="1" :inactive-value="0"
+                @change="updateIsUse(scope.row)">
+              </el-switch>
+            </template>
+          </el-table-column>
+          <el-table-column prop="CreateDateStr" label="添加时间" width="100">
           </el-table-column>
-
-
           <el-table-column label="操作" width="180">
             <template slot-scope="scope">
               <img @click="getCategory(scope.row.Id)" style="width:32px;height:32px;margin:0 10px"
@@ -64,14 +106,20 @@
   export default {
     data() {
       return {
+        sort_goods_id: 0,
+        dateStr: "",
         loading: false,
         //是否显示新增分类
         IsShowCategory: true,
         dataList: [],
         msg: {
-          Name: "", //页面名称
+          CateId: 0,
+          QStartDate: "", //开始时间
+          QEndDate: "", //结束时间
+          KeyWords: "", //页面名称
           pageIndex: 1,
           pageSize: 10,
+          total: 0,
         },
         addMsg: {
           Id: 0, //编号
@@ -94,7 +142,8 @@
           res => {
             this.loading = false;
             if (res.data.resultCode === 1) {
-              this.dataList = res.data.data;
+              this.dataList = res.data.data.pageData;
+              this.msg.total = res.data.data.count;
               console.log("this.dataList", this.dataList);
             }
           },
@@ -162,6 +211,7 @@
           );
         });
       },
+      //清空消息
       clearMsg() {
         this.addMsg.Id = 0;
         this.addMsg.CateId = 0;
@@ -173,6 +223,74 @@
         this.addMsg.IsTop = 1;
         this.addMsg.SortNum = 1;
       },
+      //更新是否置顶
+      updateIsTop(item) {
+        this.apipost("/api/Share/SetShareFriendIsTop", {
+            Id: item.Id,
+            IsTop: item.IsTop
+          },
+          res => {
+            if (res.data.resultCode === 1) {
+              this.Success(res.data.message);
+              this.getList();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //更新是否启用
+      updateIsUse(item) {
+        this.apipost("/api/Share/SetShareFriendIsUse", {
+            Id: item.Id,
+            IsUse: item.IsUse
+          },
+          res => {
+            if (res.data.resultCode === 1) {
+              this.Success(res.data.message);
+              this.getList();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //更新排序
+      updateSortNum(item) {
+        this.apipost("/api/Share/SetShareFriendSortNum", {
+            Id: item.Id,
+            SortNum: item.SortNum
+          },
+          res => {
+            if (res.data.resultCode === 1) {
+              this.Success(res.data.message);
+              this.getList();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      },
+      //更新文案
+      updateMaterialInfo(item) {
+        this.apipost("/api/Share/SetShareFriendMaterialInfo", {
+            Id: item.Id,
+            MaterialInfo: item.MaterialInfo
+          },
+          res => {
+            if (res.data.resultCode === 1) {
+              this.Success(res.data.message);
+              this.getList();
+            } else {
+              this.Error(res.data.message);
+            }
+          },
+          null
+        );
+      }
     },
     mounted() {
       this.getList();
@@ -181,11 +299,11 @@
 
 </script>
 <style>
-  .shareCategory .templat-list {
+  .shareFriend .templat-list {
     border: 1px solid #EBEEF5;
   }
 
-  .shareCategory .templat-item {
+  .shareFriend .templat-item {
     line-height: 40px;
     height: 40px;
     display: flex;
@@ -200,12 +318,12 @@
     background-color: #fff;
   }
 
-  .shareCategory .templat-item div {
+  .shareFriend .templat-item div {
     width: 50%;
     padding-left: 20px;
   }
 
-  .shareCategory .Custom_item {
+  .shareFriend .Custom_item {
     border: 1px solid #EBEEF5;
     background-color: #FFF;
     color: #303133;
@@ -214,11 +332,11 @@
     margin-bottom: 10px;
   }
 
-  .shareCategory .Custom_item>div {
+  .shareFriend .Custom_item>div {
     padding: 20px;
   }
 
-  .shareCategory .content {
+  .shareFriend .content {
     background: #fff;
     margin-top: 10px;
     padding: 20px;
@@ -226,7 +344,7 @@
     box-sizing: border-box;
   }
 
-  .shareCategory .conten_indder {
+  .shareFriend .conten_indder {
     padding: 20px;
     background-color: #fff;
     padding-right: 50%;