课题分类

src/api/chat.js

@@ -300,4 +300,51 @@ export function applyTopic(data) {
     data
   })
 }
-//6.商圈 end ------------------------------------->
+//6.商圈 end ------------------------------------->
+
+
+//7.课题分类 start ------------------------------------->
+//7.1 课题分类列表
+export function getTopicClassList(data) {
+  return request({
+    url: '/chat/getTopicClassList',
+    method: 'post',
+    data
+  })
+}
+
+//7.2 添加课题分类
+export function addTopicClass(data) {
+  return request({
+    url: '/chat/addTopicClass',
+    method: 'post',
+    data
+  })
+}
+
+//7.3 修改课题分类
+export function updateTopicClass(data) {
+  return request({
+    url: '/chat/updateTopicClass',
+    method: 'post',
+    data 
+  })
+}
+
+//7.4 删除课题分类
+export function deleteTopicClass(data) {
+  return request({
+    url: '/chat/deleteTopicClass',
+    method: 'post',
+    data
+  })
+}
+//7.5 课题分类信息
+export function getTopicClassInfo(data) {
+  return request({
+    url: '/chat/getTopicClassInfo',
+    method: 'post',
+    data
+  })
+}
+//7.课题分类 end ------------------------------------->

src/router/index.js

@@ -347,6 +347,58 @@ export const constantRoutes = [
       }
     ]
   },
+    // ----fr-课题分类
+     {
+      path: '/topicType',
+      component: Layout,
+      children: [
+        {
+          name: '',
+          path: '',
+          component: () => import('@/views/chat/topicType'),
+          meta: {
+            title: '课题分类',
+            hidden: true,
+            breadcrumb: true
+          }
+        }
+      ]
+    },
+  // -----------fr---------
+  // ----------liuj------------
+    {
+      path: '/goodList',
+      component: Layout,
+      children: [
+        {
+          name: '',
+          path: '',
+          component: () => import('@/views/news/GoodList'),
+          meta: {
+            title: '商品列表',
+            hidden: true,
+            breadcrumb: true
+          }
+        }
+      ]
+    },
+    {
+        path: '/addGood',
+        component: Layout,
+        children: [
+          {
+            name: '',
+            path: '',
+            component: () => import('@/views/news/addGood'),
+            meta: {
+              title: '添加商品',
+              hidden: true,
+              breadcrumb: true
+            }
+          }
+        ]
+      },
+    // ----------liuj------------
   {
     path: '/topic',
     component: Layout,
@@ -855,7 +907,7 @@ export const asyncRoutes = [
       }
     ]
   },
-
+  
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/router/modules/dangyunlong.js

@@ -294,22 +294,25 @@ const dangyunlongRouter= [
       }
     ]
   },
-  {
-    path: '/goodList',
+
+   // ----fr-课题分类
+   {
+    path: '/topicType',
     component: Layout,
     children: [
       {
         name: '',
         path: '',
-        component: () => import('@/views/news/GoodList'),
+        component: () => import('@/views/chat/topicType'),
         meta: {
-          title: '商品列表',
+          title: '课题分类',
           hidden: true,
           breadcrumb: true
         }
       }
     ]
   },
+// -----------fr---------
 
   {
     path: '/templateCreat',

src/store/modules/chat.js

@@ -2,7 +2,8 @@ import {getTalkSessionList,addFriend,getFriendsList,delFriend,updateFriend,getFr
   applyFriend,isFriend,getConversation,getChatRecords,addGroup,getGroupMembers,searchFriend,getFriendInfo,
   getGroupList,getGroupInfo,joinGroup,getGroupChatRecords,delGroup,updateGroup,
   getTopicsList,addTopic,getTopicInfo,updateTopic,delTopic,addReply,getTopicReply,topicType,
-  topicStatus,updateGroupMembers,quitGroup,applyTopic
+  topicStatus,updateGroupMembers,quitGroup,applyTopic,
+  getTopicClassList,addTopicClass,getTopicClassInfo,updateTopicClass,deleteTopicClass
 } from '@/api/chat'
 
 const state = {
@@ -325,8 +326,56 @@ const actions = {
         reject(error)
       })
     })
-  }
+  },
   //6.商圈 end ------------------------------------->
+
+  //7.课题分类 start ------------------------------------->
+  getTopicClassList({commit},data) {
+    return new Promise((resolve, reject) => {
+      getTopicClassList(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  addTopicClass({commit},data) {
+    return new Promise((resolve, reject) => {
+      addTopicClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  getTopicClassInfo({commit},data) {
+    return new Promise((resolve, reject) => {
+      getTopicClassInfo(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  updateTopicClass({commit},data) {
+    return new Promise((resolve, reject) => {
+      updateTopicClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  },
+  deleteTopicClass({commit},data) {
+    return new Promise((resolve, reject) => {
+      deleteTopicClass(data).then(response => {
+        resolve(response)
+      }).catch(error => {
+        reject(error)
+      })
+    })
+  }
+  //7.课题分类 end ------------------------------------->
 }
 
 

src/views/chat/components/tableTitle1.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="tableTitle">
+    <span class="tableFloatLine"></span>
+    {{name}}
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      someData: '',
+    };
+  },
+};
+</script>
+
+<style scoped lang="less">
+  .tableTitle {
+    height: 38px;
+    line-height: 38px;
+    color:#333333;
+    position: relative;
+    margin-bottom: 30px;
+    .tableFloatLine {
+      // display: inline-block;
+      width: 3px;
+      height:16px;
+      background:#5570F1;
+      display: block;
+      position: absolute;
+      left:-20px;
+      top:10px;
+      // vertical-align: middle;
+    }
+  }
+</style>

src/views/chat/topicType.vue

@@ -0,0 +1,550 @@
+<template>
+    <!-- 广告位管理 -->
+    <div>
+        <!-- 头部搜索框部分 -->
+        <div class="title">
+            <el-row>
+                <el-col :span="6" class="left">
+                    <div class="searchBox">
+                        <div class="searchTitle">课题分类名称</div>
+                        <el-input v-model="tabbarName" class="input" placeholder="请输入课题分类名称" :maxlength="10"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="8" class="right">
+                    <div class="btnList">
+                        <button class="search" @click="goSearch">搜索</button>
+                        <button class="reset" @click="goReset">重置</button>
+                    </div>
+                </el-col>
+            </el-row>
+        </div>
+        <!--表格内容 start------------------------------------------------------------>
+        <div class="layerBox">
+            <tableTitle :name="tableDivTitle" />
+            <button class="btn" @click="addTopicClass">添加分类名称</button>
+            <el-row>
+                <template>
+                    <el-table class="my-table" :data="tableData" style="width: 100%">
+                        <el-table-column fixed prop="id" label="编号" width="90">
+                        </el-table-column>
+                        <el-table-column prop="topicname" label="课题分类名称" width="">
+                        </el-table-column>
+                        <el-table-column prop="created_at" label="添加时间" width="">
+                        </el-table-column>
+                        <el-table-column prop="updated_at" label="修改时间" width="">
+                        </el-table-column>
+                        <el-table-column fixed="right" label="操作" width="300">
+                            <template slot-scope="scope">
+                                <div class="listBtnBox">
+                                    <div class="listDeleteBtn" @click="deleteRow(scope.row.id)">
+                                        <i class="el-icon-delete"></i>
+                                        删除
+                                    </div>
+                                    <div class="listEditBtn" @click="goEdit(scope.row.id, scope.row)">
+                                        <i class="el-icon-edit-outline"></i>
+                                        编辑
+                                    </div>
+                                </div>
+                            </template>
+                        </el-table-column>
+                    </el-table>
+                </template>
+            </el-row>
+        </div>
+        <!--分页 start------------------------------------------------------------>
+        <div class="alignBox">
+            <el-row>
+                <el-col :span="24">
+                    <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
+                        :current-page="page" :page-size="pageSize" layout="total, prev, pager, next, jumper"
+                        :total="total">
+                    </el-pagination>
+                </el-col>
+            </el-row>
+        </div>
+        <!--分页 end------------------------------------------------------------>
+        <!--表格内容 end------------------------------------------------------------>
+
+        <!-- 弹出框 编辑 start----------------------------------------------------------->
+        <el-dialog :title="dialogName" :visible.sync="dialogTableVisible" width="50%" top="8vh"
+            :close-on-click-modal="false">
+            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="120px" class="demo-ruleForm">
+                <div class="dialogText">
+                    <el-form-item label="课题分类名称:" prop="tabbarName">
+                        <el-input v-model="ruleForm.tabbarName" placeholder="请输入课题分类名称"  :maxlength="10" ></el-input>
+                    </el-form-item>
+                </div>
+                <div class="dialogBtn">
+                    <el-button type="info" @click="dialogTableVisible = false">取消</el-button>
+                    <el-button type="primary" @click="submitForm('ruleForm')" v-if="dialogTableVisible">提交</el-button>
+                </div>
+            </el-form>
+        </el-dialog>
+        <!-- 弹出框 编辑 end----------------------------------------------------------->
+    </div>
+</template>
+
+<script>
+//表格标题
+import tableTitle from './components/tableTitle1.vue';
+//引入公用样式
+import '@/styles/global.less';
+import { getTopicClassList,addTopicClass,getTopicClassInfo,updateTopicClass,deleteTopicClass } from '@/api/chat'
+export default {
+    components: {
+        tableTitle,//表格标题-
+    },
+    data() {
+        return {
+            tableDivTitle: "课题分类列表",  //列表标题
+            dialogTableVisible: false,      //编辑弹框
+            dialogName: '编辑', //编辑弹窗名称
+            disabled: false, //禁用
+            tableData: [],//表格数据
+            activeid: "",  //活动id 
+            // 分页相关
+            page: 1,
+            pageSize: 10,
+            total: 0,
+            tabbarName: '', //底部导航名称
+            ruleForm: {
+                tabbarName: '', //底部导航名称
+            },
+            rules: {
+                tabbarName: [{ required: true, message:"课题分类名称不能为空"}],
+            }
+        }
+    },
+    methods: {
+        //1.1 开始请求列表信息方法
+        getData(){
+            getTopicClassList({ page: this.page,page_size: this.pageSize,topicname:this.tabbarName}).then(res=> {
+                if(res.code==200){
+                    this.tableData = res.data.data;
+                    this.total = res.data.total;
+                }else{
+                    this.$message.error("查询课题分类失败！");
+                }
+             
+            }).catch(() => {
+                this.$message.error("网络错误");
+            })
+        },
+         //1.2 列表内容分页
+        //直接跳转
+        handleSizeChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        //1.3 点击分页
+        handleCurrentChange(val) {
+            this.page = val;
+            this.getData();
+        },
+        // 1.6 搜索按钮
+        goSearch() {
+            this.getData()
+        },
+        //1.7 重置按钮
+        goReset() {
+            this.page = 1
+            this.tabbarName = ""
+            this.getData()
+        },
+       
+        //3. 删除内容
+        deleteRow(id) {
+            let data = new FormData()
+            data.append('id', id)
+            this.$confirm( '是否确认删除该条信息？', {
+                confirmButtonText: '确定',
+                cancelButtonText: '取消',
+            }).then(() => {
+                console.log("当前删除：" + id)
+
+                deleteTopicClass({
+                    id: id
+                }).then(data => {
+                    console.log(data);
+                    if (data.code = 200) {
+                        this.$message({
+                            message: '删除成功',
+                            type: 'success'
+                        })
+                        this.getData()
+                    } else {
+                        this.$message({
+                            message: data.message,
+                            type: 'error'
+                        })
+                    }
+                })
+
+            }).catch(() => {
+                this.$message({
+                    type: 'warning',
+                    message: '已取消删除'
+                });
+            });
+        },
+        //列表和分页相关 end ------------------------------------------------------------>
+        // //1.9 编辑
+        goEdit(id, val) {
+            console.log(id);
+            this.dialogName = '编辑'
+            this.activeid = id
+            this.dialogTableVisible = true
+            this.disabled=true
+            console.log(id, val);
+            console.log("状态", val);
+            //数据回显
+            this.ruleForm.tabbarName = val.topicname //课题分类名称
+
+        },
+
+        //1.7 添加
+        addTopicClass() {
+            this.dialogTableVisible = true
+            this.dialogName = "添加"
+            this.disabled=false
+            //添加时清空回显回来的数据
+            this.ruleForm.tabbarName = '' //课题分类名称
+        },
+
+        // 弹出层相关方法
+        // 提交表单
+        submitForm(formName) {
+            this.$refs[formName].validate((valid) => {
+                if (valid) {
+                    if (this.dialogName == "添加") {
+                        addTopicClass({
+                            topicname: this.ruleForm.tabbarName,
+                        }).then(data => {
+                          
+                            if (data.code == 200) {
+                                this.$message({
+                                    message: '添加成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                                this.getData()
+                            } else {
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                                return
+                            }
+                           
+                        })
+                    }
+                    if (this.dialogName == "编辑") {
+                        updateTopicClass({
+                            topicname: this.ruleForm.tabbarName,
+                            id: this.activeid
+                        }).then(data => {
+                            console.log(data);
+                            if (data.code == 200) {
+                                this.$message({
+                                    message: '编辑成功',
+                                    type: 'success'
+                                })
+                                this.dialogTableVisible = false
+                            }else{
+                                this.$message({
+                                    message: data.message,
+                                    type: 'error'
+                                })
+                                this.dialogTableVisible = true
+                            }
+                            this.getData()
+                        })
+                    }
+
+                }
+            });
+        },    
+    },
+    mounted() {
+        this.getData()
+    },
+}
+</script>
+
+<style scoped lang="less">
+input[aria-hidden=true] {
+    display: none !important;
+}
+
+// 提示信息
+.tips {
+    margin: 30px;
+    background-color: #e9ecf9;
+    border-radius: 11px;
+
+    .tipsIcon {
+        margin: 10px 15px;
+        display: inline-block;
+        width: 24px;
+        height: 24px;
+        background: url("../../assets/advertise/Info Circle.png") no-repeat;
+        vertical-align: middle;
+    }
+
+    .tipsText {
+        font-size: 14px;
+        color: #666666;
+    }
+}
+
+// 头部
+.title {
+    margin: 30px 30px 20px 30px;
+    padding: 30px 30px 40px 30px;
+    background-color: #fff;
+    border-radius: 20px 20px 20px 20px;
+    border: 1px solid #E9EDF7;
+
+    .left {
+        float: left;
+    }
+
+    .right {
+        float: right;
+    }
+
+
+    .searchBox {
+        ::v-deep .el-input {
+            position: relative;
+            font-size: 14px;
+            display: inline-block;
+            width: 80%;
+        }
+
+        .searchTitle {
+            padding-bottom: 10px;
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 14px;
+            color: #999999;
+            line-height: 16px;
+        }
+
+        .el-select {
+            width: 100%;
+            display: inline-block;
+            position: relative;
+        }
+    }
+
+
+    .btnList {
+        float: right;
+        padding-top: 28px;
+
+        button {
+            height: 38px;
+            border: none;
+            border-radius: 8px;
+            padding: 0 30px;
+        }
+
+        .search {
+            background-color: #5570f1;
+            color: #fff;
+            margin-right: 20px;
+        }
+
+        .reset {
+            font-family: Microsoft YaHei, Microsoft YaHei;
+            font-weight: 400;
+            font-size: 16px;
+            color: #333333;
+            background: #F5F7FB;
+            border-radius: 8px 8px 8px 8px;
+            border: 1px solid rgba(85, 112, 241, 0.11);
+        }
+    }
+}
+
+.layerBox {
+    padding: 30px 20px;
+    position: relative;
+
+    .btn {
+        margin-bottom: 20px;
+        position: absolute;
+        top: 30px;
+        right: 20px;
+        height: 38px;
+        color: #fff;
+        background-color: #5570f1;
+        border: none;
+        border-radius: 8px;
+        padding: 8px 28px 9px;
+        box-sizing: border-box;
+    }
+
+    .listBtnBox {
+        justify-content: left;
+    }
+
+
+    .listDeleteBtn,
+    .listEditBtn,
+    .listLookBtn {
+        margin-left: 0px;
+        padding-left: 0px;
+        margin-right: 20px;
+        width: 76px;
+        height: 36px;
+        line-height: 36px;
+    }
+
+
+    .listLookBtn {
+        text-align: center;
+        border-radius: 8px;
+        cursor: pointer;
+        color: #55b5f1;
+        background-color: rgba(85, 181, 241, 0.16);
+
+        >i {
+            padding-right: 8px;
+        }
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-input--medium,
+    ::v-deep .el-form-item__label {
+        line-height: 36px;
+        font-size: 16px;
+    }
+}
+
+// 弹出层内容
+.dialogText {
+    margin: 0 7px 0 3px;
+    padding-bottom: 1px;
+    padding: 30px 60px 1px 20px;
+    background-color: #f5f7fb;
+
+    .adImage {
+        width: 140px;
+        height: 140px;
+        line-height: 210px;
+        border-radius: 12px;
+        border: 1px solid rgba(85, 112, 241, 0.11);
+
+        img {
+            width: 140px;
+            height: 80px;
+        }
+    }
+
+
+
+    ::v-deep .avatar {
+        width: 140px;
+        height: auto;
+    }
+
+    .price {
+        ::v-deep .el-input {
+            width: 29%;
+        }
+    }
+
+    .example {
+        font-family: Microsoft YaHei;
+        color: #5570F1;
+    }
+
+    .el_btnList {
+        margin-right: 15px;
+        margin-top: 20px;
+    }
+
+    //日期时间选择器的宽
+    ::v-deep .el-date-editor.el-input {
+        width: 48%;
+    }
+
+    ::v-deep .el-button+.el-button {
+        margin-left: 0px;
+    }
+
+    ::v-deep .el-select {
+        width: 100%;
+    }
+
+    ::v-deep .el-form-item {
+        margin-bottom: 50px;
+    }
+}
+
+// 弹出层按钮
+.dialogBtn {
+    text-align: center;
+    margin: 50px auto 20px;
+
+    button {
+        width: 184px;
+        padding: 16px;
+        font-family: Microsoft YaHei, Microsoft YaHei;
+        font-weight: 400;
+        font-size: 20px;
+        border: none;
+        border-radius: 12px 12px 12px 12px;
+    }
+
+    // 取消
+    .cancel {
+        color: #333333;
+        background-color: #f5f7fb;
+        border: 2px solid rgba(85, 112, 241, 0.11);
+    }
+
+    // 提交
+    .submit {
+        color: #fff;
+        background-color: #5570F1;
+        margin-left: 40px;
+    }
+}
+
+//审核弹出框
+.radioGroup {
+    ::v-deep .el-form-item {
+        margin-top: 40px;
+        margin-bottom: 0;
+    }
+}
+
+.graph {
+    background-color: #f5f7fb;
+    padding: 60px 100px;
+    overflow: hidden;
+
+    li {
+        float: left;
+    }
+
+    >li:first-child {
+        margin-right: 100px;
+    }
+}
+
+.dialog-footer {
+    margin: 0 auto;
+}
+</style>