2022-7-21

src/SManagement/archives_sc/index.vue

@@ -1,17 +1,10 @@
 <template>
   <div class="normal-card">
     <div class="header-panl">
-      <div class="left">
-        <!--分类选择器-->
-        <category-select label="课程分类" @changeSelect="changeSelect" :selectList="selectList"
-          :prop="{value:'sat_courseware_classid',label:'classname'}" v-if="tool.checkAuth($route.name,'read')">
-        </category-select>
-        <!--搜索-->
-        <search @searchActive="searchActive" @clearData="clearData" v-if="tool.checkAuth($route.name,'read')"></search>
-      </div>
-      <!--最新最热切换-->
-      <hot-new-control :sortType='param.content.where.sorttype' @sortTypeChange="sortTypeChange"
-        v-if="tool.checkAuth($route.name,'read')"></hot-new-control>
+      <!-- 搜索及分类筛选 -->
+      <filterList @changeTypeId="changeTypeId" @startSearch="startSearch">
+          <hot-new-control @sortTypeChange="sortTypeChange"/>
+      </filterList>
     </div>
     <!--课件列表-->
     <div class="file" v-if="list.length != 0 && tool.checkAuth($route.name,'read')">
@@ -44,6 +37,8 @@ import HotNewControl from '@/components/hot-new-control/HotNewControl'
 import Pagination from '@/components/pagination/Pagination'
 import CategorySelect from '@/components/category-select/CategorySelect'
 import detail from '@/SManagement/archives_sc/archives_details/detail'
+import filterList from "@/components/filter-list/filterList"
+
 
 import FileType from '@/utils/matchingFeilType'
 export default {
@@ -93,7 +88,8 @@ export default {
     Pagination,
     CategorySelect,
     detail,
-    search
+    search,
+    filterList
   },
   computed: {
   },
@@ -111,24 +107,6 @@ export default {
       this.list = res.data
       this.param.content.sort = res.sort
     },
-    //获取分类列表
-    async getSelectList () {
-      let res = await this.$api.requested(this.select)
-      this.selectList = res.data
-    },
-    //查询
-    async searchActive (result) {
-      this.param.content.where.condition = result
-      this.param.content.where.pageNumber = 1
-      let res = await this.$api.requested(this.param)
-      this.list = res.data
-      this.total = res.total
-    },
-    //清除查询
-    clearData () {
-      this.param.content.where.condition = ''
-      this.getFileData()
-    },
     sortTypeChange (name) {
       for (let i = 0; i < this.param.content.sort.length; i++) {
         this.param.content.sort[i].sorted = this.param.content.sort[i].sortname == name ? 1 : 0
@@ -149,10 +127,17 @@ export default {
         this.$refs.detail.isFileInfoPanlShow = true
       })
     },
-    changeSelect (id) {
+    /* 改变分类ID */
+    changeTypeId(id) {
+      this.param.content.where.sat_courseware_classid = id == 0 ? null : id;
       this.param.content.pageNumber = 1
-      this.param.content.where.sat_courseware_classid = id[id.length - 1];
-      this.getFileData()
+      this.getFileData();
+    },
+    /* 开始搜索 */
+    startSearch(value) {
+      this.param.content.where.condition = value;
+      this.param.content.pageNumber = 1
+      this.getFileData();
     }
   },
 };

src/SManagement/submitedit_one/components/list.vue

@@ -153,5 +153,10 @@ export default {
   color: #999999;
   background: #EEEEEE;
 }
-
+/deep/.el-empty {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
 </style>

src/components/filter-list/filterList.vue

@@ -0,0 +1,129 @@
+<template>
+    <div class="flex-align-center">
+        <div>
+            <p>一级分类:</p>
+            <el-select clear="select" v-model="activeClass1" @clear="clearClass1" size="small" clearable>
+                <el-option v-for="item in selectList" :key="item.rowindex" :value="item.sat_courseware_classid"
+                    :label="item.classname" @click.native="handleChange(item)" />
+            </el-select>
+        </div>
+        <div>
+            <p>二级分类:</p>
+            <el-select clear="select" v-model="activeClass2" size="small" @clear="clearClass2" clearable>
+                <el-option v-for="item in childrens" :key="item.rowindex" :value="item.sat_courseware_classid"
+                    :label="item.classname" @click.native="handleChange(item)" />
+            </el-select>
+        </div>
+        <div>
+            <p>搜索:</p>
+            <el-input style="width:200px" size="small" placeholder="请输入查询内容" @clear="changeSearchContent"
+                @keyup.native.enter="changeSearchContent" v-model="condition" prefix-icon="el-icon-search" clearable />
+        </div>
+        <div style="fisplay:flex;flex:1;flex-direction: row-reverse;max-width:100000px">
+            <slot />
+        </div>
+    </div>
+</template>
+
+<script>
+import { log } from '@antv/g2plot/lib/utils'
+export default {
+    name: "filterList",
+    mounted() {
+        this.getSelectList()
+    },
+    props: ["changeTypeId", "startSearch"],
+    data() {
+        return {
+            selectList: [],//分类列表
+            childrens: [],//子分类列表
+            activeClass1: "",//选择分类1
+            activeClass2: "",//选择分类2
+            class1id: "",
+            class2id: "",
+            returnId: 0,//最终返回id
+            condition: "",//搜索内容
+        }
+    },
+    methods: {
+        /* 获取分类列表 */
+        getSelectList(i = 0) {
+            this.$api.requested({
+                "accesstoken": "a642ccb6357ea170f2bc875694b5b902",
+                "classname": "saletool.courseware.courseware",
+                "method": "selectMenu",
+                "content": {
+
+                }
+            }).then(res => {
+                console.log(res);
+                
+                if (res.msg != '成功') return i < 5 ? this.getSelectList(i + 1) : this.$message.error(res.msg);
+                this.selectList = res.data;
+            })
+        },
+        /* 选择分类 */
+        handleChange(item) {
+            console.log(item);
+            
+            if (item.children) {
+                this.childrens = item.children;
+                this.activeClass2 = "";
+                this.class1id = item.sat_courseware_classid;
+            } else {
+                this.class2id = item.sat_courseware_classid;
+            }
+            this.returnId = item.sat_courseware_classid;
+            this.setId();
+        },
+        clearClass1() {
+            this.childrens = [];
+            this.activeClass1 = "";
+            this.activeClass2 = "";
+            this.class1id = "";
+            this.class2id = "";
+            this.returnId = 0;
+            this.setId();
+        },
+        clearClass2() {
+            this.class2id = "";
+            this.activeClass2 = "";
+            this.returnId = this.class1id ? this.class1id : 0;
+            this.setId();
+        },
+        /* 返回分类ID */
+        setId() {
+            this.$emit("changeTypeId", this.returnId)
+        },
+        /* 开始搜索 */
+        changeSearchContent() {
+            this.$emit("startSearch", this.condition.trim())
+        }
+    }
+}
+</script>
+
+<style scoped>
+.flex-align-center {
+    width: 100%;
+    padding-bottom: 15px;
+}
+
+.flex-align-center>div {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    max-width: 350px;
+}
+
+.flex-align-center>div>p {
+    font-size: 14px;
+    margin: 0 10px;
+    max-width: 80px;
+}
+
+.select {
+    width: 120px;
+    margin-right: 16px;
+}
+</style>

src/views/message/components/list.vue

@@ -6,7 +6,7 @@
           <p class="title">{{item.title}}</p>
           <p class="message">{{item.message}}</p>
           <div class="info">
-            <div class="tag">{{item.objectname}}</div>
+            <div class="tag">{{item.type}}</div>
             <p class="time">{{item.createdate}}</p>
           </div>
         </div>
@@ -16,7 +16,7 @@
         </div>
       </div>
     </div>
-    <el-dialog
+    <!-- <el-dialog
       title="提示"
       :visible.sync="dialogVisible"
       width="960px"
@@ -25,7 +25,7 @@
       <span slot="footer" class="dialog-footer">
         <el-button @click="handleClose()">关闭</el-button>
       </span>
-    </el-dialog>
+    </el-dialog> -->
   </div>
   <el-empty description="暂无数据" v-else></el-empty>
 </template>
@@ -50,16 +50,8 @@ export default {
       this.dialogVisible = false
     },
     async detailClick(item) {
-      let result = await this.$api.requested({
-        "classname": "system.message.Message",
-        "method": "readMessage",
-        "content": {
-            "messageid":item.messageid
-        }
-      })
-      item.isread = 1
-      this.message = item.message
-      this.dialogVisible = true
+      
+      this.$emit('messageItemClick',item)
     }
   },
 };
@@ -75,7 +67,7 @@ export default {
   margin-top: 10px;
 }
 .list .item-box {
-  padding: 0 30px;
+  padding: 0 16px;
   cursor: pointer;
 }
 .list .item-box:hover {

src/views/message/index.vue

@@ -1,15 +1,33 @@
 <template>
   <div class="message">
-    <div class="select">
-      <div @click="selectFun('系统')"
-        :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>
-      <div @click="selectFun('应用')"
-        :style="currentItem==1 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">应用消息</div>
-    </div>
-    <list :list="list"></list>
-    <pagination :total="total" :pageSize="param.content.pageSize" :currentPage="param.content.pageNumber"
-      @pageChange="pageChange">
-    </pagination>
+    <el-row>
+      <el-col :span="12">
+        <div class="left">
+          <div class="select">
+            <div @click="selectFun('系统')"
+              :style="currentItem==0 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">系统消息</div>
+            <div @click="selectFun('应用')"
+              :style="currentItem==1 ? 'background:#3874F6;color:#ffffff' : 'border:1px solid #cccccc'">应用消息</div>
+          </div>
+          <list :list="list" @messageItemClick="messageItemClick"></list>
+          <pagination :total="total" :pageSize="param.content.pageSize" :currentPage="param.content.pageNumber"
+            @pageChange="pageChange">
+          </pagination>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="right">
+          <p class="title">{{message.title}}</p>
+          <p class="info">
+            <span>发布于:{{message.createdate}} | {{message.type}}</span>
+          </p>
+          <div class="content-txt">
+            <p class="txt">{{message.message}}</p>
+          </div>
+        </div>
+      </el-col>
+    </el-row>
+
   </div>
 </template>
 
@@ -27,17 +45,18 @@ export default {
         "classname": "system.message.Message",
         "method": "queryMessage",
         "content": {
-          "nocache": true,
+          "nocache": true,
           "pageNumber": 1,
           "pageSize": 10,
           "type": ''
         }
       },
-      list: [],
-      total:0
+      list: '',
+      total: 0,
+      message:''
     };
   },
-  components: { list ,pagination },
+  components: { list, pagination },
   computed: {
   },
   watch: {
@@ -50,16 +69,31 @@ export default {
       this.param.content.type = this.currentItem == 0 ? '系统' : '应用'
       let res = await this.$api.requested(this.param)
       this.list = res.data
+      this.messageItemClick(this.list[0])
       this.total = res.total
+      console.log(this.list);
+      
     },
     selectFun (data) {
       this.param.content.pageNumber = 1
       this.currentItem = data == '系统' ? 0 : 1
       this.getMessageList()
     },
-    pageChange(n) {
+    pageChange (n) {
       this.param.content.pageNumber = n
       this.getMessageList()
+    },
+    async messageItemClick(data) {
+      let res = await this.$api.requested({
+        "classname": "system.message.Message",
+        "method": "readMessage",
+        "content": {
+            "nocache":true,
+            "messageid":data.messageid
+        }
+      })
+      data.isread = 1
+      this.message = res.data
     }
   },
 };
@@ -70,13 +104,18 @@ export default {
   box-sizing: border-box;
 }
 .message {
-  width: 1200px;
+  width: 100%;
   min-height: 100%;
   margin: 0 auto;
-  background: #ffffff;
-  padding: 30px 0 60px 0;
   position: relative;
 }
+.message .left {
+  position: relative;
+  padding: 20px 0 60px 0;
+  box-shadow: 1px 0px 0px 1px #DDDDDD;
+  border-radius: 4px 4px 4px 4px;
+  background: #ffffff;
+}
 .message .select {
   width: 200px;
   height: 36px;
@@ -85,7 +124,7 @@ export default {
   justify-content: space-between;
   line-height: 36px;
   font-size: 14px;
-  margin-left: 30px;
+  margin-left: 16px;
 }
 .message .select div {
   width: 50%;
@@ -102,6 +141,33 @@ export default {
   border-top-right-radius: 4px;
   border-bottom-right-radius: 4px;
 }
+.message .right {
+  padding: 20px 16px;
+}
+.message .right .title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333333;
+}
+.message .right .info {
+  font-size: 12px;
+  font-weight: 400;
+  color: #333333;
+  margin: 16px 0;
+}
+.message .right .content-txt {
+  width: 100%;
+  padding: 20px 16px;
+  font-size: 14px;
+  font-weight: 400;
+  background: #ffffff;
+}
+.message .right .content-txt p:first-child {
+  color: #666666;
+}
+/* .message .right .content-txt p:last-child {
+  color: #3874F6;
+} */
 /deep/.el-pagination {
   position: absolute;
   right: 16px;