员工管理模块的开发

src/App.vue

@@ -1,11 +1,29 @@
 <template>
   <div id="app">
-    <router-view></router-view>
+    <router-view v-if="isRouterAlive"></router-view>
   </div>
 </template>
 
 <script>
   export default{
-    name: 'App'
+    name: 'App',
+    provide () {
+      return {
+        reload:this.reload
+      }
+    },
+    data(){
+      return{
+        isRouterAlive:true
+      }
+    },
+    methods: {
+       reload(){
+         this.isRouterAlive = false;
+         this.$$nextTick(function(){
+           this.isRouterAlive = true;
+         })
+       }
+    }
   }
 </script>

src/api/act/staffmanager.js

@@ -0,0 +1,24 @@
+import request from '@/utils/request'
+
+export function addStaffInfo (data){
+    console.log("文章列表",data)
+    return request({
+        url: '/api/staff/addStaffInfo',
+        method: 'Post',
+        data: data
+    })
+}
+
+export function getAllStaffInfo (param,keyword) {
+    console.log("param",param,"keyword",keyword)
+    const params = {
+        param: param,
+        keyword:keyword,
+    }
+
+    return request({
+        url:'/api/staff/getAllStaffInfo',
+        method:'Get',
+        params:params
+    })
+}

src/api/act/submitinfo.js

@@ -18,11 +18,18 @@ export function getArticleType(params){
      })
 }
 
-export function GetAllArticles(params){
+export function GetAllArticles(param,status,keyword,id){
+    const params = {
+        param:param,
+        status:status,
+        keyword:keyword,
+        id:id,
+    }
+    console.log("params是什么?",params)
      return request({
          url:'/api/acticle/getAllArticles',
          method:'Get',
-         params:params
+         params:params,
      })
 }
 
@@ -75,4 +82,98 @@ export function Savedraft(data){
         method:"post",
         data:data,
     })
-}
+}
+
+export function previewArticle(data){
+    return request({
+        url:"/api/acticle/prviewArticle",
+        method:"post",
+        data:data
+    })
+}
+
+export function getarticlePreview(params){
+   return request({
+       url:"/api/acticle/getarticlePreview",
+       method:'Get',
+       params:params
+   })
+}
+
+export function save(data){
+   return request({
+       url:"/api/acticle/save",
+       method:"Post",
+       data:data
+   })
+}
+
+export function openDelete(data){
+    return request({
+        url:"/api/article/Delete",
+        method:"delete",
+        data:data
+    })
+}
+
+
+export function getEditArticle(id,param){
+    console.log("params是啥?",param)
+    return request({
+        url:"/api/acticle/getEditArticle?id="+id,
+        method:"Get",
+        param:param,
+    })
+}
+
+export function getMenus(params){
+    console.log("params是什么",params)
+    return request({
+        url:"/api/acticle/getMenus",
+        method:'Get',
+        params:params
+    })
+}
+
+export function UpdataArticleInfo(id,data){
+   console.log("修改文章内容",data)
+   return request({
+       url:"/api/acticle/updateArticlesInfo?id="+id,
+       method:'Post',
+       data:data
+   })
+}
+
+export function previewEditArticle(id,data){
+   return request({
+       url:"/api/acticle/previewEditArticle?id="+id,
+       method:'Post',
+       data:data
+   })
+}
+
+export function getPreviewInfo(params){
+    return request({
+        url:"/api/acticle/getPreviewInfo",
+        method:'Post',
+        params:params,
+    })
+}
+
+export function getAllComment(params){
+    console.log("评论",params)
+    return request({
+        url:"/api/acticle/getAllComment",
+        method:'Get',
+        params:params,
+    })
+}
+
+export function getArticleCommentDetail(params,id){
+    console.log("文章评论详情",id)
+    return request({
+        url:"/api/acticle/getArticleCommentDetail?id="+id,
+        method:'Get',
+        params:params,
+    })
+}

src/lang/zh.js

@@ -51,8 +51,10 @@ export default {
     articleCategory: '文章分类',
     commentList: '评论列表',
     articleComment: '文章评论',
+    articleCommentDetail:'文章评论详情',
     editArticle: '编辑文章',
     articleList: '文章列表',
+    articlePreview:'文章预览',
     errorPages: '错误页面',
     page401: '401',
     page404: '404',

src/router/modules/article.js

@@ -40,6 +40,34 @@ export default {
       component: () => import('@/scrm_pages/article/articleComment'),
       name: 'articleComment',
       meta: { title: 'articleComment', noCache: true }
-    }
+    },
+    {
+      path: '/articles/articlePreview',
+      component: () => import('@/scrm_pages/article/articlePreview'),
+      name: 'articlePreview',
+      hidden:true,
+      meta: { title: 'articlePreview', noCache: true }
+    },
+    {
+      path: '/articles/editArticle/:id',
+      component: () => import('@/scrm_pages/article/editArticle'),
+      name: 'editArticle',
+      hidden:true,
+      meta: { title: 'editArticle', noCache: true }
+    },
+    {
+      path: '/articles/articleEditPreview',
+      component: () => import('@/scrm_pages/article/articleEditPreview'),
+      name: 'articleEditPreview',
+      hidden:true,
+      meta: { title: 'articleEditPreview', noCache: true }
+    },
+    {
+      path: '/articles/articleCommentDetail/:id',
+      component: () => import('@/scrm_pages/article/articleCommentDetail'),
+      name: 'articleCommentDetail',
+      hidden:true,
+      meta: { title: 'articleCommentDetail', noCache: true }
+    },
   ]
 }

src/scrm_pages/article/acticleCategory.vue

@@ -179,7 +179,7 @@
                 var res = response.data;
                 if(res.state === 1){
                     this.articsData.splice(index,1);
-                    this.$message.success("删除会员成功");
+                    this.$message.success("删除成功");
                 }else{
                    this.$message.error(res.msg);
                 }
@@ -193,7 +193,7 @@
         },
         openDeleteCategorys(){
             if (this.selectedMembers.length==0) {
-            this.$message.error("请选择要删除的会员");
+            this.$message.error("请选择要删除的信息");
             return false;
           }   
 

src/scrm_pages/article/articleComment.vue

@@ -6,28 +6,30 @@
     <div class="app-container">
       <el-row :gutter="12" style="margin-top: 10px">
         <el-table
-          :data="cancelStockDate"
-          :class="signAndWeighBoxPatients"
-          border
-          highlight-current-row
-          ref="multipleTable"
+         :data="articsData"
+          border fit highlight-current-row
           :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}"
-        >
+        >   
+           <el-table-column
+                align="center" 
+                type="selection"
+                width="55">
+          </el-table-column> 
           <el-table-column label="标题" align="center">
             <template slot-scope="scope">
-            123
+            {{scope.row.title}}
           </template>
           </el-table-column>
 
           <el-table-column label="评论状态" align="center">
-            <template slot-scope="scope">
-              456
+            <template>
+              <span>正常</span>
             </template>
           </el-table-column>
 
           <el-table-column label="总评论数" align="center">
             <template slot-scope="scope">
-              789
+             {{scope.row.comment_num}}
             </template>
           </el-table-column>
 
@@ -39,7 +41,7 @@
                   size="mini"
                   type="primary"
                   icon="el-icon-edit-outline"
-                  @click="handleEdit(scope.$index, scope.row)">
+                  @click="$router.push('/articles/articleCommentDetail/'+scope.row.id)">
                 </el-button>
               </el-tooltip>
             </template>
@@ -50,8 +52,8 @@
         <el-pagination
           @size-change="handleSizeChange"
           @current-change="handleCurrentChange"
-          :page-sizes="[7]"
-          :page-size="7"
+          :page-sizes="[10,20,50,100]"
+          :page-size="10"
           background
           style="margin-top:20px;float: right"
           layout="total, sizes, prev, pager, next, jumper"
@@ -65,6 +67,7 @@
 
 <script>
   import BreadCrumb from '../components/bread-crumb'
+   import { getAllComment } from '@/api/act/submitinfo'
   export default {
     name: 'articleComment',
     components:{
@@ -74,9 +77,39 @@
       return{
         crumbs: [
           { path: false, name: '文章管理' },
-          { path: '/articles/articleComment', name: '评论列表' }
+          { path: '/articles/articleComment', name: '文章评论' }
         ],
+        listQuery:{
+           page:1,
+           limit:10,
+           title:'',
+           commentNnum:'',
+        },
+         articsData:[],
+         handleSizeChange(limit) {
+            this.listQuery.limit = limit;
+            this.GetAllAritcles();
+        },
+         handleCurrentChange(page) {
+            this.listQuery.page = page;
+            this.GetAllAritcles();
+        },
+        total:0,
       }
+    },
+    methods:{
+         getAllComment(){
+           getAllComment(this.listQuery).then(response=>{
+                if(response.data.state == 1){
+                   this.articsData = response.data.data.articles; 
+                   console.log("文章内容",this.articsData)                 
+                   this.total =  response.data.data.total                 
+                }
+           });
+         }
+    },
+    created(){
+      this.getAllComment();
     }
   }
 </script>

src/scrm_pages/article/articleCommentDetail.vue

@@ -0,0 +1,70 @@
+<template>
+     <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs='crumbs'></bread-crumb>
+             <el-button  style="float:right;" type="primary" size="small"  @click="$router.push('/articles/articleComment')">返回全部文章</el-button>
+        </div>
+        <div class="app-container">
+             <div class="title">{{listQuerty.title}}</div>
+             <div>{{listQuerty.publicTime}}</div>
+             <div class="sort">已按最新热度排序</div>
+            <div class="border"></div>          
+        </div>
+     </div>
+</template>
+
+<script>
+   import BreadCrumb from '../components/bread-crumb'
+   import { getArticleCommentDetail } from '@/api/act/submitinfo'
+    export default {
+        name: "articleCommentDetail",
+        components:{
+            BreadCrumb
+         },
+         data(){
+             return{
+                 crumbs: [
+                   { path: false, name: '文章管理' },
+                   { path: '/articles/articleComment', name: '文章评论详情' }
+                ],
+                listQuerty:{
+                   title:'',
+                   publicTime:'',
+                }
+             }
+         },
+         created(){
+            this.getArticleCommentDetail(); 
+         },
+         methods:{
+             getArticleCommentDetail(){
+                 const id = this.$route.params && this.$route.params.id
+                 console.log("id",id)
+                 getArticleCommentDetail(this.listQuerty,id).then(response=>{
+                        if(response.data.state == 1){
+                            var articles = response.data.data.articles
+                            this.listQuerty.title = articles.title
+                            this.listQuerty.publicTime =  articles.publicTime
+                            console.log("内容是设么",articles)
+                        }
+                 })
+             }
+         }
+    }
+
+</script>
+
+<style scoped>
+   .border{
+       border: 1px #dcdfe6 solid;
+       margin-top: 30px;
+   }
+   .title{
+       font-size: 25px;
+       margin-bottom: 20px;
+   }
+   .sort{
+      float: right;
+      font-size: 18px;
+   }
+</style>

src/scrm_pages/article/articleEditPreview.vue

@@ -0,0 +1,89 @@
+<template>
+     <div class="main-contain">
+         <div class="position">
+            <bread-crumb :crumbs='crumbs'></bread-crumb>
+         </div>
+         <div class="app-container">
+            <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform">
+                 <el-row :span=20>
+                    <el-form-item>
+                        <div class="title">
+                           {{form.title}}
+                        </div>
+                    </el-form-item>
+                 </el-row>
+                 <el-row :span=20>
+                     <el-form-item>
+                         <div  class="cont">
+                           <li v-html="form.content"></li>
+                         </div>
+                     </el-form-item>
+                 </el-row>
+                 <el-row :span=20>
+                 <el-form-item>
+                    <div class="but">
+                      <el-button type="primary" @click="clossPreview()">关闭预览</el-button>
+                    </div>    
+                 </el-form-item>
+          </el-row>        
+            </el-form>
+       </div>
+     </div>
+</template>
+
+<script>
+    import BreadCrumb from '../components/bread-crumb'
+      import { getPreviewInfo } from '@/api/act/submitinfo'
+    export default {
+        name: "articleEditPreview",
+         components:{
+            BreadCrumb
+        },
+        data(){
+            return{
+                 crumbs: [
+                     { path: false, name: '文章管理' },
+                     { path: '/articles/articleEditPreview', name: '文章编辑预览' }
+                ],
+                form:{
+                    title:'',
+                    content:'',
+                }
+            }
+        },
+        methods:{
+            articleEditPreview(){
+                getPreviewInfo(this.form).then(response=>{
+                      if(response.data.state == 1){
+                         this.form =  response.data.data.articles;
+                         var articles =  response.data.data.articles
+                         console.log("articles",articles)        
+                      }
+                })   
+            },
+            clossPreview(){
+              this.$router.push({path:'/articles/articleList'})
+            }
+        },
+        created(){
+            this.articleEditPreview();
+        }
+    }
+</script>
+      
+<style scoped>
+    .title{
+       font-size: 20px;
+       position: relative;
+       left: 750px;
+    }
+
+    .cont{
+      position: relative;
+      left: 200px;
+    }
+    .but{
+      position: relative;
+      left: 750px;
+    }
+</style>

src/scrm_pages/article/articleList.vue

@@ -2,14 +2,14 @@
   <div class="main-contain">
     <div class="position">
       <bread-crumb :crumbs='crumbs'></bread-crumb>
-      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline">添加文章</el-button>
+      <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="AddArticle()">添加文章</el-button>
     </div>
     <div class="app-container">
           <div style="margin-bottom: 10px">
             <el-row :gutter="24">
               <el-col :span="8">
-                  <el-input style="width: 300px" v-model="listQuery.search"  placeholder="请输入您需要搜索的内容"></el-input>
-                  <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
+                  <el-input style="width: 300px" v-model="keyword"  placeholder="请输入您需要搜索的内容"></el-input>
+                  <el-button type="primary"  icon="el-icon-search" @click="changeKey()">搜索</el-button>
               </el-col>
             </el-row>
           </div>
@@ -17,8 +17,8 @@
             <label class="title"><span class="name">标签</span>:</label>
              <div class="time">
                 <ul class="">
-                  <li :class="0==schedulType?'active':''" @click="selectsign(0)">全部</li>
-                  <li :class="item.MenuId==schedulType?'active':''"  v-for="item in schedulArr" :key="item.MenuId" @click="selectsign(item.MenuId)">{{item.Name}}</li>
+                  <li :class="0==tagType?'active':''" @click="selectsign(0)">全部</li>
+                  <li :class="item.id==tagType?'active':''"  v-for="item in tagOptions" :key="item.id" @click="selectsign(item.id)">{{item.name}}</li>
                 </ul>
              </div>
           </div>
@@ -26,16 +26,18 @@
             <label class="title"><span class="name">状态:</span></label>
             <div class="time">
               <ul class="">
-                <!-- <li :class="0==systemType?'active':''" @click="selectStatus(0)">全部</li> -->
-                <li :class="item.value==systemType?'active':''" v-for="item in systemArr" :key="item.value">{{item.label}}</li>
+                 <li :class="{ active: selecting_status == 0 }" @click="changeSelectingStatus(0)">全部</li>
+                 <li :class="{ active: selecting_status == 1 }" @click="changeSelectingStatus(1)">已发布</li>
+                 <li :class="{ active: selecting_status == 2 }" @click="changeSelectingStatus(2)">草稿箱</li>
+                 <li :class="{ active: selecting_status == 3 }" @click="changeSelectingStatus(3)">未通过</li>
               </ul>
             </div>
           </div>
           <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
-            <el-checkbox style="width: 30px">全选</el-checkbox>
-            <el-button size="small" icon="el-icon-delete">删除</el-button>
+            <el-checkbox style="width: 30px" @change="changeCheck" v-model="checkAllStatus">全选</el-checkbox>
+            <el-button size="small" icon="el-icon-delete" @click="openDeletearticles">批量删除</el-button>
           </div>
-          <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="ArticleData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+          <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="articsData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;"  @selection-change="handleSelectionChange">
               <el-table-column
                 align="center" 
                 type="selection"
@@ -43,7 +45,13 @@
               </el-table-column> 
              <el-table-column label="文章图片" align="center">
                <template slot-scope="scope">
-                  <img :src="memberAvatar(scope.row)" alt="" srcset="" style="width:100px;height:100px;" >
+                  <div class="parent">
+                 <span class="text">已发布</span>  
+                 <div class="triangle-topleft">
+                       
+                 </div>
+                <img :src="memberAvatar(scope.row)" style="width:100%;height:100%">
+          </div>     
                </template>
              </el-table-column>
             <el-table-column label="文章标题" align="center">
@@ -63,7 +71,7 @@
             </el-table-column>
             <el-table-column label="点赞数" align="center">
               <template slot-scope="scope">
-                  {{scope.row.num}}
+                  {{scope.row.star_num}}
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -73,11 +81,11 @@
                     size="mini"
                     type="primary"
                     icon="el-icon-edit-outline"
-                    @click="handleEdit(scope.$index, scope.row)">
+                    @click="$router.push('/articles/editArticle/'+scope.row.id)">
                   </el-button>
                 </el-tooltip>
                  <el-tooltip class="item" effect="dark" content="删除" placement="top">
-                  <el-button size="mini" type="danger" icon="el-icon-delete" @click="openDelete(scope.row, scope.$index)" ></el-button>
+                  <el-button size="mini" type="danger" icon="el-icon-delete"  @click="openDelete(scope.row,scope.$index)" ></el-button>
                 </el-tooltip>
               </template>
             </el-table-column>
@@ -98,12 +106,13 @@
 
 <script>
   import BreadCrumb from '../components/bread-crumb'
-  import { GetAllArticles } from '@/api/act/submitinfo'
+  import { GetAllArticles,openDelete} from '@/api/act/submitinfo'
   export default {
     name: 'commentList',
     components:{
       BreadCrumb
     },
+    inject:['reload'],
     data(){
       return{
         crumbs: [
@@ -112,49 +121,42 @@
         ],
         time: '',
         active: true,
-        schedulType: 0,
-        schedulArr:[],
-        systemType: 0,
-        systemArr: [
-          { value: 0, label: "全部" },
-          { value: 1, label: "已发布" },
-          { value: 2, label: "草稿箱" },
-          { value: 2, label: "未通过" }
-        ],
+        tagType: 0,
+        tagOptions:[],
         listQuery:{
             page:1,
             limit:10,
-            search:'',
             classid:'',
+            name:'',
         },
-        ArticleData:[],
+        articsData:[],
         total:0,
+        selecting_status:'',
+        keyword:'',
+        dialogVisible: false,
+         checkAllStatus:false,
       }
     },
     methods:{
          GetAllArticles(){
-              GetAllArticles(this.listQuery).then(response=>{
+              GetAllArticles(this.listQuery,this.selecting_status,this.keyword,this.listQuery.classid).then(response=>{
                      if(response.data.state === 1){
-                        this.ArticleData = response.data.data.articles  
+                        this.articsData = response.data.data.articles  
                         this.total = response.data.data.total
-                        console.log("文章列表",this.ArticleData)
+                        console.log("文章列表",this.articsData)
                         console.log("total",this.total)                                                   
                      }
                      if(typeof(response.data.data.category != 'undefined')){
-                       this.schedulArr = response.data.data.category
-                        console.log("分类列表",response.data.data.category)
-                       
+                       this.tagOptions = response.data.data.category
+                        console.log("分类列表",this.tagOptions)                      
                      }
               })
          },
-         selectsign(MenuId){
-            this.listQuery.classid = MenuId;
-            this.schedulArr = MenuId;
-            this.GetAllArticles();
-         },
-         selectStatus(id){
-            this.listQuery.status = id;
-            this.systemType = id;
+         selectsign(id){
+           console.log("id",id)
+            this.listQuery.classid = id;
+            this.listQuery.name = name;
+            this.tagType = id;
             this.GetAllArticles();
          },
           handleSizeChange(limit) {
@@ -170,7 +172,75 @@
         },
         memberAvatar(row){
              return row.imgs
-        }
+        },
+        AddArticle(){
+           this.$router.push({path:'/articles/createArticle'})
+        },
+        changeSelectingStatus(status){
+          this.selecting_status = status;
+          this.GetAllArticles();
+        },
+        openDelete(row,index){
+             var  id = row.id;
+            this.$confirm('确认要删除该信息吗?删除后将无法恢复!',{
+              dangerouslyUseHTMLString:true,
+             confirmButtonText: '确定',
+             cancelButtonText: '取消',
+             type: 'warning' 
+            }).then(()=>{
+                var ids = [];
+                ids.push(row.id);
+                openDelete({ids:ids}).then(response=>{
+                    this.articsData.splice(index,1);
+                    this.$message.success("删除成功");
+                }).catch(e=>{});       
+          }).catch(e=>{});
+        },
+         
+          handleSelectionChange(val){
+             this.selectedArticles = val;
+         },
+         changeCheck(){
+          this.$refs.multipleTable.clearSelection();
+           if (this.checkAllStatus) {
+            this.$refs.multipleTable.toggleAllSelection();
+            }
+          },
+
+          openDeletearticles(){
+            if (this.selectedArticles.length==0) {
+              this.$message.error("请选择要删除的信息");
+            return false;
+           } 
+           this.$confirm('确定要删除吗?删除后信息将无法恢复!','删除提示',{
+               dangerouslyUseHTMLString:true,
+               confirmButtonText: '确定',
+               cancelButtonText: '取消',
+               type: 'warning'
+           }).then(()=>{
+                var ids = [];
+                var idMap = {};
+                for (const index in this.selectedArticles) {
+                ids.push(this.selectedArticles[index].id);
+                idMap[this.selectedArticles[index].id] = this.selectedArticles[index].id;
+            }
+               openDelete({ids:ids}).then(response=>{
+                   if(response.data.state == 1){
+                         var articsDatalength = this.articsData.length;
+                     for (let index = articsDatalength-1; index >= 0; index--) {
+                    if(this.articsData[index].id in idMap) {
+                    this.articsData.splice(index, 1);
+                   }                  
+                 }
+                  this.$message.success("删除成功");   
+                }else{
+                   this.$message.success("删除失败");   
+                 }
+               }).catch(e=>{});
+           }).catch(() => {
+              return false        
+           }); 
+          }
     },
     created(){
       this.GetAllArticles()
@@ -179,5 +249,26 @@
 </script>
 
 <style scoped>
-     
+      .parent{
+        position: relative;
+        width: 160px;
+        height: 120px;
+        left: 20px;
+    }
+    .parent .text{
+        display: inline-block;
+        transform: rotate(-45deg);
+        padding: 20px;
+        color:red;
+        position: relative;
+        left: -60px;
+    }
+   .triangle-topleft{
+        width: 0;
+        height: 0;
+        border-top: 70px solid yellow;
+        border-right: 70px solid transparent;
+        position: relative;
+        margin-top: -140px;       
+    }
 </style>

src/scrm_pages/article/articlePreview.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
+    </div>
+    <div class="app-container">
+          <el-form label-width="90px" class="clearfix" :model="form" ref="acticleform">
+           <el-row :span=20>
+            <el-form-item>
+                <div class="title">
+                 {{form.title}}
+                </div>    
+            </el-form-item>
+          </el-row> 
+           <el-row :span=20>
+            <el-form-item>
+                <div class="cont">
+                   <!-- {{form.content}} -->
+                   <li v-html="form.content"></li>
+                </div>    
+            </el-form-item>
+          </el-row>
+           <el-row :span=20>
+            <el-form-item>
+                <div class="but">
+                   <el-button type="primary" @click="clossPreview()">关闭预览</el-button>
+                </div>    
+            </el-form-item>
+          </el-row>         
+        </el-form>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from '../components/bread-crumb'
+  import { getarticlePreview } from '@/api/act/submitinfo'
+  export default {
+    name: 'articlePreview',
+    components:{
+      BreadCrumb
+    },
+    data(){
+      return{
+        crumbs: [
+          { path: false, name: '文章管理' },
+          { path: '/articles/articlePreview', name: '文章预览' }
+        ],
+        form:{
+            title:'',
+            content:'',
+        },
+      }
+    },
+    methods:{
+          getarticlePreview(){
+              getarticlePreview(this.form).then(response=>{
+                    if(response.data.state == 1){
+                       this.form =  response.data.data.articles;
+                       console.log("预览数据",this.form);
+                    }  
+              });
+          },
+          clossPreview(){
+            this.$router.push({path:'/articles/articleList'})
+          }
+    },
+    created(){
+        this.getarticlePreview();
+    },
+  }
+</script>
+
+<style scoped>
+    .title{
+        font-size: 20px;
+        position: relative;
+        left: 750px;
+    }
+
+    .cont{
+      position: relative;
+      left: 200px;
+    }
+    .but{
+      position: relative;
+      left: 750px;
+    }
+
+</style>

src/scrm_pages/article/commentList.vue

@@ -4,23 +4,16 @@
           <bread-crumb :crumbs='crumbs'></bread-crumb>
         </div>
         <div class="app-container">
-           评论列表
-           <el-form-item ref="videocontentvideo" style="display:none;">
-              <img :src="imgurl">
-              <video width="320" height="240" controls id="upvideo">
-              </video>
-              <img :src="modlevidel" />
-            </el-form-item>
-
-            <el-form-item class="upload-demo-content" v-show="formLabelAlign.type==2">
-            <el-upload class="upload-demo" :limit="1" :on-exceed="exceedhandle" drag :file-list="filsListArray" :action="configuploadurl" :on-success="successuploadhandle" accept="video" name="fileList" :before-upload="beforeUploadVideo">
-              <i class="el-icon-upload"></i>
-              <div class="el-upload__text">将视频文件拖到此处，或
-                <em>点击上传</em>
-              </div>
-              <div class="el-upload__tip" slot="tip"></div>
-            </el-upload>
-          </el-form-item>
+          <div class="parent">
+                 <span class="text"></span>  
+                 <div class="triangle-topleft">
+                   
+                 </div>
+                <div class="title">
+                  已使用
+                </div>
+                 <img src="/static/images/a.jpg" style="width:100%;height:100%">
+          </div>           
         </div>
     </div>
 </template>
@@ -38,86 +31,42 @@
           { path: false, name: '文章管理' },
           { path: '/articles/commentList', name: '评论列表' }
         ],
-        imgurl:'',
-        modlevidel:'',
-        formLabelAlign:'',
-        modlevidel:'',
-        filsListArray:[],
-        elForm:'',
-        configuploadurl:'',
       }
     },
     methods:{
-      successuploadhandle(response, file, fileList) {
-      this.formLabelAlign.video = this.modlevidel =
-        response.data.fileList[0].url;
-        this.filsListArray = [];
-        this.filsListArray.push({
-        name: this.formLabelAlign.video,
-        url: this.formLabelAlign.video
-       });
-        this.findvideocover();
-    },
-      exceedhandle(files, fileList) {
-      this.$message.error("只能上传一个视频额");
-      },
-      beforeUploadVideo(file) {
-      if (
-        [
-          "video/mp4",
-          "video/ogg",
-          "video/flv",
-          "video/avi",
-          "video/wmv",
-          "video/rmvb"
-        ].indexOf(file.type) == -1
-      ) {
-        this.$message.error("请上传正确的视频格式");
-        return false;
-      }
-     },
-
-     findvideocover() {
-      let _this = this;
-      this.$nextTick(() => {
-        let video = document.getElementById("upvideo");
-        let source = document.createElement("source");
-        // source.src = require("../../assets/5b086751dbb7af1ea8fa8d05e66fe5c3.mp4");this.formLabelAlign.video
-        source.src = this.formLabelAlign.video;
-        source.type = "video/mp4";
-        video.appendChild(source);
-        video.addEventListener("loadeddata", function() {
-          var canvas = document.createElement("canvas");
-          canvas.width = "320";
-          canvas.height = "320";
-          canvas
-            .getContext("2d")
-            .drawImage(video, 0, 0, canvas.width, canvas.width);
-          var img = document.createElement("img");
-          let imgsrc = canvas.toDataURL("image/png");
-          _this.Videoframehandle(imgsrc.split(",")[1]);
-        });
-      });
-      },
-
-      showvideohandle() {
-       this.$alert(
-        `<video width="320" height="240" controls>
-                      <source src="${
-                        this.filsListArray[0].url
-                      }"  type="video/mp4">
-                      您的浏览器不支持 HTML5 video 标签。
-                    </video>`,
-        "视频预览",
-        {
-          dangerouslyUseHTMLString: true
-        }
-      );
-    },
     }
   }
 </script>
 
 <style scoped>
-
+    .parent{
+        position: relative;
+        width: 200px;
+        height: 200px;
+        background: yellow;
+        font-size: 6px;
+    }
+    .parent .text{
+        display: inline-block;
+        transform: rotate(-45deg);
+        padding: 20px;
+        color: #fff;
+        position: relative;
+    }
+   .triangle-topleft{
+        width: 0;
+        height: 0;
+        border-top: 100px solid red;
+        border-right: 100px solid transparent;
+        position: relative;
+        margin-top: -42px;
+        top: 0px;
+        z-index: 0;   
+    }
+    .title{
+       transform: rotate(-45deg);
+       position: relative;
+       margin-top: -115px;
+       margin-left: -8px;
+    }
 </style>

src/scrm_pages/article/components/CreateArticleForm.vue

@@ -93,9 +93,9 @@
                             });
                        }   
                    });         
-          },  
-       }
-    }
+              },  
+          }
+      }  
 </script>
 
 <style scoped>

src/scrm_pages/article/components/EditArticleForm.vue

@@ -89,12 +89,10 @@ export default {
                            console.log("返回响应",res.state)
                            if(res.state ===1 ){
                               var categorys = res.data.category; 
-                              console.log("categorys是什么",categorys)
+                              console.log("categorys是什么",categorys.name)
                               this.articsData[this.artilceIndex].name = categorys.name;
                               this.articsData[this.artilceIndex].summary = categorys.summary;
                               this.articsData[this.artilceIndex].order = categorys.order;
-                              //this.articsData.unshift(categorys);
-                              // this.resetForm("acticleform");
                               this.centerDialogVisible = false;
                               this.$message.success("编辑文章分类成功");
                            }

src/scrm_pages/article/createArticle.vue

@@ -7,7 +7,7 @@
     <div class="app-container">
     <el-tabs type="border-card">
       <el-tab-pane label="文章">
-        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
+        <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="staffrules">
           <el-row>
             <el-col :span="23">
                 <el-form-item label="文章标题:" required prop="act_name">
@@ -96,8 +96,8 @@
                 <el-form-item>
                       <el-button size="small" type="primary" style="width: 100px"  @click="submitForm('arctileform');centerDialogVisible=false">发布</el-button>
                       <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
-                      <el-button size="small" style="width: 100px">保存草稿</el-button>
-                  <el-button size="small" style="width: 100px">取消</el-button>
+                      <el-button size="small" style="width: 100px" @click="save('arctileform');centerdraftVisible = false">保存草稿</el-button>
+                  <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
                 </el-form-item>
             </el-col>
           </el-row>
@@ -204,7 +204,7 @@
        center>
        <span style="center">是否确定取消编辑此文章/视频</span>
        <span slot="footer" class="dialog-footer">
-       <el-button type="primary" @click="centercancelVisible = false" >确认</el-button>
+       <el-button type="primary" @click="confirm()" >确认</el-button>
        <el-button @click="centercancelVisible = false">取消</el-button>   
         </span>   
       </el-dialog>
@@ -218,7 +218,7 @@
   import 'quill/dist/quill.snow.css'
   import 'quill/dist/quill.bubble.css'
   import Neditor from '@/components/Neditor'
-  import {submitForm,getArticleType,addVido,Savedraft} from '@/api/act/submitinfo'
+  import {submitForm,getArticleType,addVido,Savedraft,previewArticle,save} from '@/api/act/submitinfo'
   import { getToken } from '@/api/qiniu'
   import { getFileExtension} from '@/utils/tools'
   export default {
@@ -233,7 +233,7 @@
           { path: false, name: '文章管理' },
           { path: '/articles/createArticle', name: '发布文章' }
         ],
-         radio:'1',
+        radio:'1',
         options: [],
         value: '',
         show:false,
@@ -285,7 +285,6 @@
             act_type: [{required: true,message:"所属分类不能为空"}]
         },
         vidoform:[],
-        ue:'',
       }
     },
     created(){
@@ -390,6 +389,7 @@
             return false
       },
       beforeAvatarlastUpload(file) {
+        console.log("冷醒是",file.type)
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;
 
@@ -569,11 +569,35 @@
          console.log("文章内容",this.$refs.neditor.content)
          this.$refs[formName].validate((valid)=>{
             if(valid){
-               preview(this.form).then(response=>{
-                    this.$router.go(0);
+              //  console.log("内容是什么?",this.form)
+              //  this.$router.push({path:'/articles/articlePreview'})
+               previewArticle(this.form).then(response=>{
+                    if(response.data.state ==1){
+                        var art = response.data.data.art
+                        console.log("act的数据是",art);
+                        this.$router.push({path:'/articles/articlePreview'})
+                    }
                });
             }
          });
+      },
+      save(formName){
+         this.form.act_content = this.$refs.neditor.content;
+         console.log("文章内容",this.$refs.neditor.content);
+         this.$refs[formName].validate((valid)=>{
+             if(valid){
+                 save(this.form).then(response=>{
+                   if(response.data.state ==1){
+                     this.centerdraftVisible = true;
+                     var articles = response.data.data.articles;
+                     console.log("返回的数据是",articles)                   
+                   }
+                 });
+             }
+         });
+      },
+      confirm(){
+         this.$router.push({path:"/articles/articleList"})
       }
     },
   }

src/scrm_pages/article/editArticle.vue

@@ -0,0 +1,428 @@
+
+
+<template>
+    <div class="main-contain">
+        <div class="position">
+            <bread-crumb :crumbs='crumbs'></bread-crumb>
+        </div>
+        <div class="app-container">
+             <el-form label-width="100px" class="clearfix" :model="form" ref="arctileform"  :element-loading-text="loadingText" :rules="artilcrules">
+          <el-row>
+            <el-col :span="23">
+                <el-form-item label="文章标题:" required prop="title">
+                    <el-input v-model="form.title"></el-input>
+                </el-form-item>
+              <el-form-item label="文章内容:" required prop="content">
+                <keep-alive>
+                  <neditor ref="neditor"
+                           id="editor"
+                           v-bind:r_content="form.content">
+                  </neditor>
+                </keep-alive>
+              </el-form-item>
+              <el-form-item label="封面图片:">
+                  <el-radio v-model="radio" label="1" @click.native.prevent="select()" >单图</el-radio>
+                  <el-radio v-model="radio" label="2" @click.native.prevent="clickitem()" >三图</el-radio>
+              </el-form-item>
+              <el-form-item>
+                <el-col :span="3">
+                  <div>
+                    <el-upload
+                      v-loading="uploading"
+                      :element-loading-text="loadingText"
+                      class="avatar-uploader"
+                      :data="uploadData"
+                      action="https://upload.qiniup.com"
+                      :show-file-list="false"
+                      :on-error="handleAvatarError"
+                      :on-success="handleAvatarSuccess"
+                      :before-upload="beforeAvatarUpload">
+                      <img v-if="form.imgs" :src="form.imgs" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                  </div>
+                </el-col>
+                <el-col :span="3">
+                  <div v-if="show">
+                    <el-upload
+                      v-loading="uploading"
+                      :element-loading-text="loadingText"
+                      class="avatar-uploader"
+                      :data="uploadData"
+                      action="https://upload.qiniup.com"
+                      :show-file-list="false"
+                      :on-error="handleAvatartwoError"
+                      :on-success="handleAvatartwoSuccess"
+                      :before-upload="beforeAvatartwoUpload">
+                      <img v-if="imageUrlSecond" :src="imageUrlSecond" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                  </div>
+                </el-col>
+                <el-col :span="3">
+                  <div v-if="show">
+                    <el-upload
+                      v-loading="uploading"
+                      :element-loading-text="loadingText"
+                      class="avatar-uploader"
+                      :data="uploadData"
+                      action="https://upload.qiniup.com"
+                      :show-file-list="false"
+                      :on-error="handleAvatarlastError"
+                      :on-success="handleAvatarlastSuccess"
+                      :before-upload="beforeAvatarlastUpload">
+                      <img v-if="imageUrlLast" :src="imageUrlLast" class="avatar">
+                      <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                    </el-upload>
+                  </div>
+                </el-col>
+              </el-form-item>
+               <el-form-item label="所属分类:" prop="class_id">
+                 <el-select v-model="form.class_id" placeholder="请先选择文章所属分类"  @change="changeActtype()">
+                   <el-option
+                     v-for="item in options"
+                     :key="item.id"
+                     :label="item.name"
+                     :value="item.id">
+                   </el-option>
+                 </el-select>
+               </el-form-item>
+            </el-col>
+          </el-row>
+
+          <el-row :span="24">
+            <el-col :span="24">
+                <el-form-item>
+                      <el-button size="small" type="primary" style="width: 100px"  @click="UpdataArticleInfo('arctileform');">发布</el-button>
+                      <el-button size="small" style="width: 100px" @click="preview('arctileform')">预览</el-button>
+                      <el-button size="small" style="width: 100px" @click="save('arctileform');centerdraftVisible = false">保存草稿</el-button>
+                  <el-button size="small" style="width: 100px" @click="centercancelVisible = true">取消</el-button>
+                </el-form-item>
+            </el-col>
+          </el-row>
+        </el-form>
+
+        <el-dialog
+           title="发表成功"
+           :visible.sync="dialogVisible"
+            width="30%"
+            center>
+           <span>这是一段信息</span>
+           <span slot="footer" class="dialog-footer">
+           <el-button @click="gobackList()">返回文章列表</el-button>
+           </span>
+         </el-dialog>
+
+        <el-dialog
+           title="发表成功"
+           :visible.sync="dialogVisible"
+            width="30%"
+            center>
+           <span>这是一段信息</span>
+           <span slot="footer" class="dialog-footer">
+           <el-button @click="gobackList()">返回文章列表</el-button>
+           </span>
+         </el-dialog>
+         
+       <el-dialog
+         title="提示"
+         :visible.sync = "centercancelVisible"
+         width="30%"
+         center>
+         <span style="center">是否确定取消编辑此文章/视频</span>
+         <span slot="footer" class="dialog-footer">
+         <el-button type="primary" @click="centercancelVisible = false" >确认</el-button>
+         <el-button @click="centercancelVisible = false">取消</el-button>   
+        </span>   
+       </el-dialog>
+        </div>
+    </div>
+</template>
+
+<script>
+    import BreadCrumb from '../components/bread-crumb'
+    import { quillEditor } from 'vue-quill-editor'
+    import 'quill/dist/quill.core.css'
+    import 'quill/dist/quill.snow.css'
+    import 'quill/dist/quill.bubble.css'
+    import Neditor from '@/components/Neditor'
+    import { getToken } from '@/api/qiniu'
+    import { getFileExtension} from '@/utils/tools'
+    import {getEditArticle,getMenus,UpdataArticleInfo,previewEditArticle} from '@/api/act/submitinfo'
+    export default {
+        name: "editArticle",
+         components:{
+            BreadCrumb,
+            Neditor,
+         },
+         data(){
+            return {
+             crumbs: [
+              { path: false, name: '文章管理' },
+              { path: '/articles/editArticle/:id', name: '编辑文章' }
+              ],
+               radio:'1',
+        options: [],
+        value: '',
+        show:false,
+        content: '',
+        editorOption: {},
+        company:"",
+        fileList: [],
+        form:{
+          class_id:'', 
+          content:'',                        
+          imgs:'',                
+          title:'',                 
+          file:'',
+        },
+         acttypes:[],
+         imageUrl:'',
+         imageUrlSecond:'',
+         imageUrlLast:'',
+         formloading:false,
+         formsubmit:false,
+         qiniuDomain: 'https://images.shengws.com/',
+         uploading:false,
+         loadingText:'',
+         uploadData: { token: '', key: '' },
+         uploadFileData:{token:'',key:''},
+         uploadvidoData:{token:'',key:''},
+         centerDialogVisible: false,
+         centerdraftVisible:false,
+         centercancelVisible:false,
+         formLabelAlign:true,
+         modlevidel:'',
+         filsListArray:[],
+         show:true,
+         shows:false,
+         rules: {
+            vid_name: [{required: true, message: "视频标题不能为空"},],
+            vio_upload: [{required: true,message:"请上传视频"}],
+            vid_type: [{required: true,message:"所属分类不能为空"}]
+          },
+        artilcrules:{
+            title: [{required: true, message: "文章标题不能为空"},],
+            content: [{required: true,message:"文章内容不能为空"}],
+            class_id: [{required: true,message:"所属分类不能为空"}]
+        },
+        vidoform:[],
+        dialogVisible:false,
+        }
+    },
+         methods:{
+             //第一个图片
+      handleAvatarSuccess(res, file) {
+       this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
+      },
+       handleAvatarError(err, file, fileList) {
+            this.$message.error(err);
+            this.uploading = false;
+            return false
+      },
+      beforeAvatarUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.uploading = true;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
+                    _self._data.uploadData.token = token
+                    _self._data.uploadData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })
+      },
+      //第二个图片
+      handleAvatartwoSuccess(res, file) {
+        this.imageUrlSecond = URL.createObjectURL(file.raw);
+        this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
+      },
+       handleAvatartwoError(err, file, fileList) {
+            this.$message.error(err);
+            this.uploading = false;
+            return false
+      },
+      beforeAvatartwoUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.uploading = true;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
+                    _self._data.uploadData.token = token
+                    _self._data.uploadData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                    this.uploading = false;
+                })
+            })
+      },
+
+      //第三张图片
+      handleAvatarlastSuccess(res, file) {
+        this.imageUrlLast = URL.createObjectURL(file.raw);
+        this.form.org_logo = this.qiniuDomain + res.url;
+        this.uploading = false
+      },
+       handleAvatarlastError(err, file, fileList) {
+            this.$message.error(err);
+            this.uploading = false;
+            return false
+      },
+      beforeAvatarlastUpload(file) {
+        const isJPG = file.type === 'image/jpeg';
+        const isLt2M = file.size / 1024 / 1024 < 2;
+
+        if (!isJPG) {
+          this.$message.error('上传头像图片只能是 JPG 格式!');
+        }
+        if (!isLt2M) {
+          this.$message.error('上传头像图片大小不能超过 2MB!');
+        }
+
+            var date = new Date()
+            var ext = getFileExtension(file.name)
+            var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+            this.loadingText = '封面图片上传中'
+
+            const _self = this
+            return new Promise((resolve, reject) => {
+                getToken().then(response => {
+                    const token = response.data.data.uptoken
+                    console.log("token是什么?",token)
+                    _self._data.uploadData.token = token
+                    _self._data.uploadData.key = key
+                    resolve(true)
+                }).catch(err => {
+                    reject(false)
+                })
+            }) 
+        },
+        getEditArticle(id){
+           getEditArticle(id,this.form).then(response=>{
+                 if(response.data.state == 1){
+                     var articles = response.data.data.articles;
+                     this.form.title = articles.title;
+                     this.form.content = articles.content;
+                     this.form.imgs = articles.imgs;
+                     this.form.class_id = articles.class_id;
+                     console.log(articles.title)
+                     console.log("文章内容",articles)
+                 }
+           });
+        }, 
+        getMenus(){
+            getMenus().then(response =>{
+                if(response.data.state == 1){
+                   var categorys = response.data.data.categorys;
+                   this.options = categorys;
+                   console.log("分类号",categorys)
+                   
+                }
+            })
+        },
+        
+        UpdataArticleInfo(forName){
+              this.form.act_content = this.$refs.neditor.content;
+              const id = this.$route.params && this.$route.params.id;
+             console.log("文章内容",this.$refs.neditor.content);
+             console.log("id是多少?",id)
+             this.$refs[forName].validate((valid)=>{
+                 if(valid){
+                    UpdataArticleInfo(id,this.form).then(response=>{
+                         if(response.data.state == 1){
+                             this.dialogVisible = true;      
+                         }
+                    }); 
+                 }
+             })
+        },
+        gobackList(){
+           this.$router.push({path:'/articles/articleList'})
+        },
+        preview(forName){
+            this.form.act_content = this.$refs.neditor.content;
+            const id = this.$route.params && this.$route.params.id; 
+            this.$refs[forName].validate((valid)=>{
+              if(valid){
+                 previewEditArticle(id,this.form).then(response=>{
+                   if(response.data.state == 1){
+                       this.$router.push("/articles/articleEditPreview")
+                   }
+                 })
+              }
+            })
+        }
+      },
+      created(){
+         const id = this.$route.params && this.$route.params.id;
+         console.log("id是什么?",id)
+          this.getEditArticle(id)
+          this.getMenus()
+      },
+    }
+</script>
+
+<style scoped>
+     .avatar-uploader{
+    border: 1px solid #d9d9d9;
+    border-radius: 6px;
+    cursor: pointer;
+    overflow: hidden;
+    width: 140px;
+    height: 140px;
+  }
+  .avatar-uploader{
+    border-color: #f0f2f5;
+  }
+  .avatar-uploader-icon {
+    font-size: 25px;
+    color: #8c939d;
+    width: 140px;
+    height: 140px;
+    line-height: 140px;
+    text-align: center;
+  }
+  .avatar {
+    width: 178px;
+    height: 178px;
+    display: block;
+  }
+</style>

src/scrm_pages/marketing_tool/activity_list.vue

@@ -86,7 +86,7 @@ export default {
 
     getActivities() {
       this.loading_activities = true
-      fetchActivities(this.current_page, this.keyword, this.selecting_status).then(rs => {
+      fetchActivities(this.current_page, this.keyword,this.selecting_status).then(rs => {
         this.loading_activities = false
         var resp = rs.data
         if (resp.state == 1) {

src/scrm_pages/members/members.vue

@@ -222,6 +222,7 @@
                     this.total = res.data.total;
                     if(typeof(res.data.cards) != 'undefined') {
                         this.levelCards = res.data.cards;
+                        console.log("levelCard是什么",levelCards)
                     }
                     if(typeof(res.data.tags) != 'undefined') {
                         this.tagOptions = res.data.tags;

src/scrm_pages/systemsetting/components/CreateStaffForm.vue

@@ -0,0 +1,292 @@
+<template>
+        <div id="create-staff-form-box">
+        <el-dialog
+              title="添加会员"
+              :visible.sync="centerDialogVisible"
+              width="50%"
+              center>
+              <el-form label-width="100px" class="clearfix" :model="form" ref="staffform" :rules="staffrules">
+                 <el-row>
+                   <el-col :span="12">
+                      <el-form-item label="姓名:"  required prop="name">
+                           <el-input placeholder="请输入姓名" v-model="form.name">
+
+                           </el-input>
+                      </el-form-item>
+                   </el-col>
+                   <el-col :span="12">
+                     <el-form-item label="手机号:" required prop="phone">
+                       <el-input placeholder="请输入手机号" v-model="form.phone">
+
+                       </el-input>
+                     </el-form-item>
+                   </el-col>
+                 </el-row>
+                <el-row>
+                   <el-col :span="12">
+                       <el-form-item label="性别:" required prop="gender">
+                           <el-radio-group v-model="form.gender" @change="selectGender">
+                                <el-radio :label="gender.id" :value="gender.id" v-for="(gender, index) in genderOptions" :key="index">{{gender.name}}</el-radio>
+                            </el-radio-group>
+                       </el-form-item>
+                   </el-col>
+                  <el-col :span="12">
+                    <el-form-item label="生日:" required prop="birthday">
+                          <el-date-picker v-model="form.birthday"  prefix-icon="el-icon-date" :editable="false" style="width: 100%;" type="date" placeholder="请选择日期" align="right" format="yyyy-MM-dd" value-format="yyyy-MM-dd" ></el-date-picker>
+                    </el-form-item>
+                  </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="8">
+                        <el-form-item label="员工职称:" required prop="user_type">
+                          <template>
+                            <el-select v-model="form.user_type" placeholder="请选择">
+                             <el-option
+                                v-for="item in user_types"
+                                :key="item.index"
+                                :label="item.name"
+                                :value="item.index">
+                             </el-option>
+                            </el-select>
+                          </template>
+                        </el-form-item>
+                    </el-col>
+
+                  <el-col :span="6">
+                      <template>
+                        <el-select v-model="form.user_title"  placeholder="请选择">
+                          <el-option
+                            v-for="item in user_titles"
+                            :key="item.index"
+                            :label="item.name"
+                            :value="item.index">
+                          </el-option>
+                        </el-select>
+                      </template>
+                  </el-col>
+                  <el-col :span="4">
+                      <el-form-item label="医生头像:" required prop="dochead">
+                        <el-upload
+                          class="avatar-uploader"
+                          action="https://upload.qiniup.com"
+                          :show-file-list="false"
+                          :on-success="handleAvatarSuccess"
+                          :before-upload="beforeAvatarUpload"
+                          :on-error="handleAvatarError"
+                          :data="uploadData">
+                          <img v-if="form.dochead" :src="form.dochead" class="avatar">
+                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
+                        </el-upload>
+                      </el-form-item>
+                    </el-col>
+                </el-row>
+                 <el-row>
+                     <el-col :span="24">
+                         <el-form-item label="医生简介:" required prop="content">
+                           <keep-alive>
+                             <neditor ref="neditor"
+                                      id="editor"
+                                      v-bind:r_content="form.content">
+                             </neditor>
+                           </keep-alive>
+                         </el-form-item>
+                     </el-col>
+                 </el-row>
+              </el-form>
+              <span slot="footer" class="dialog-footer">
+              <el-button @click="centerDialogVisible = false">取 消</el-button>
+              <el-button type="primary" @click="addStaffInfo('staffform');">保存</el-button>
+               </span>
+          </el-dialog>
+         </div>
+</template>
+
+<script>
+      import Neditor from '@/components/Neditor'
+      import {addStaffInfo} from '@/api/act/staffmanager'
+      import {getToken} from '@/api/qiniu'
+      import {getFileExtension,checkMobile,uParseTime} from '@/utils/tools'
+    export default {
+        name: "CreateStaffForm",
+         components:{
+           Neditor,
+       },
+      props:{
+        staffsData:{
+         type: Array,
+         default: function () {
+          return [];
+        }
+        }
+     },
+       data(){
+          var checkMobileRule = (rule, value, callback) => {
+            if (!checkMobile(value)) {
+            callback(new Error('请填写正确的手机号'));
+              }else {
+               callback();
+             }
+          };
+   
+           return {
+                crumbs: [
+          { path: false, name: '系统设置' },
+          { path: '/Systemsetting/staffmanagement', name: '员工管理' }
+        ],
+         centerDialogVisible: false,
+          radio: '1',
+          value: '',
+          qiniuDomain: 'https://images.shengws.com/',
+          uploadData: { token: '', key: '' },
+         user_types: [
+            { index: 2, name: '医生' },
+            { index: 3, name: '护士' },
+            { index: 4, name: '运营' },
+            ],
+        user_titles: [
+            { index: 1, name: '医士' },
+            { index: 2, name: '医师' },
+            { index: 3, name: '住院医师' },
+            { index: 4, name: '主治医师' },
+            { index: 5, name: '副主任医师' },
+            { index: 6, name: '主任医师' },
+            { index: 7, name: '护士' },
+            { index: 8, name: '护师' },
+            { index: 9, name: '主管护师' },
+            { index: 10, name: '副主任护师' },
+            { index: 11, name: '主任护师' },
+            { index: 12, name: '运营专员' },
+            { index: 13, name: '运营主管' },
+            ],
+        imageUrl: '',
+
+        form:{
+          name:'',
+          phone:'',
+          birthday:'',
+          gender:'',
+          user_type:'',
+          user_title:'',
+          dochead:'',
+          page:1,
+          limit:10,
+          content:'',
+        },
+         keyword:'',
+        staffform:[],
+         staffrules:{
+            name: [{required: true, message: "姓名不能为空"},],
+            phone: [{required: true,message:"手机号码不能为空"},{validator:checkMobileRule}],
+            birthday: [{required: true,message:"生日不能为空"}],
+            gender: [{required: true,message:"性别不能为空"}],
+            user_type: [{required: true,message:"职称类别不能为空"}],
+            user_title: [{required: true,message:"职称不能为空"}],
+            content: [{required: true,message:"医生简介不能为空"}],
+            dochead: [{required: true,message:"头像不能为空"}],
+        },
+         genderOptions:[
+          {id:1, name:'男'},
+          {id:2, name:'女'},
+         ],
+         staffData:[],
+          }
+           },
+          methods:{
+            open:function(){
+            this.centerDialogVisible = true;
+            },
+            resetForm(formName) {
+               if (typeof(this.$refs[formName]) !='undefined') {
+                this.$refs[formName].resetFields();
+                }
+              },
+            handleAvatarSuccess(res, file) {
+              this.form.dochead =  this.qiniuDomain + res.url;
+              },
+             beforeAvatarUpload(file) {
+              const isJPG = file.type === 'image/jpeg';
+              console.log("是什么呢",isJPG)
+              const isLt2M = file.size / 1024 / 1024 < 2;
+             if (!isJPG) {
+              this.$message.error('上传头像图片只能是JPG或者png格式!');
+            }
+            if (!isLt2M) {
+              this.$message.error('上传头像图片大小不能超过 2MB!');
+            }
+
+             var date = new Date()
+             var ext = getFileExtension(file.name)
+             var key = date.getFullYear() + (date.getMonth() + 1) + date.getDate() + date.getHours()  + date.getMinutes()  + date.getSeconds()  +'_o_' + file.uid + '.' + ext;
+             this.uploading = true;
+             this.loadingText = '封面图片上传中'
+             const _self = this
+            return new Promise((resolve, reject) => {
+            getToken().then(response => {
+            const token = response.data.data.uptoken
+            console.log("token是什么?",token)
+            _self._data.uploadData.token = token
+             _self._data.uploadData.key = key
+               resolve(true)
+              }).catch(err => {
+                reject(false)
+                })
+               })
+              },
+          selectGender:function(gender) {
+            if(gender == 2) {
+             this.form.avatar = 'https://images.shengws.com/201809182128222.png';
+            }else {
+              this.form.avatar = 'https://images.shengws.com/201809182128111.png';
+            }
+          },
+             handleAvatarError(err, file, fileList) {
+               this.$message.error(err);
+               return false
+              },
+
+                addStaffInfo(forName){
+                this.form.content = this.$refs.neditor.content;
+                console.log("文章内容",this.$refs.neditor.content)
+                this.$refs[forName].validate((valid)=>{
+                 if(valid){
+                addStaffInfo(this.form).then(response=>{
+                 if(response.data.state ==1){
+                    var staffInfo = response.data.data.staffInfo
+                    this.centerDialogVisible=false;
+                    this.staffsData.unshift(staffInfo);
+                    this.resetForm("staffform");
+                    this.$message.success("保存成功");     
+                 }
+               })
+              }
+             })
+            },
+          }
+       }
+</script>
+
+<style scoped>
+     .avatar-uploader{
+      border: 1px dashed  #d9d9d9;
+      border-radius: 1px;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .avatar-uploader{
+      border-color: #d9d9d9;
+    }
+    .avatar-uploader-icon {
+      font-size: 20px;
+      color: #8c939d;
+      width: 44px;
+      height: 50px;
+      line-height: 50px;
+      text-align: center;
+    }
+    .avatar {
+      width: 68px;
+      height: 50px;
+      display: block;
+    }
+</style>

src/scrm_pages/systemsetting/staffmanagement.vue

@@ -2,49 +2,58 @@
   <div class="main-contain">
     <div class="position">
       <bread-crumb :crumbs='crumbs'></bread-crumb>
-       <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="centerDialogVisible = true" >添加员工</el-button>
+       <el-button  style="float:right;" type="primary" size="small" icon="el-icon-circle-plus-outline" @click="openCreate()" >添加员工</el-button>
     </div>
     <div class="app-container">
          <div>
              <el-row :gutter="24">
                 <el-col :span="8">
-                  <el-input style="width: 300px"  placeholder="请输入您需要搜索的内容"></el-input>
-                  <el-button type="primary"  icon="el-icon-search" @click="changeKey">搜索</el-button>
+                  <el-input style="width: 300px" v-model="keyword"  placeholder="请输入您需要搜索的内容"></el-input>
+                  <el-button type="primary"  icon="el-icon-search" @click="changeKey()">搜索</el-button>
                 </el-col>
              </el-row>
          </div>
          <div class="filter-container" style="margin-top: 10px;margin-left: 5px">
-            <el-checkbox style="width: 30px" v-model="checked" @change="changeAllSelected">全选</el-checkbox>
-            <el-button size="small" icon="el-icon-delete" @click="batchDelete">删除</el-button>
+            <el-checkbox style="width: 30px">全选</el-checkbox>
+            <el-button size="small" icon="el-icon-delete" @click="">删除</el-button>
           </div>
-              <el-table ref="multipleTable" :header-cell-style="{ backgroundColor: 'rgb(245, 247, 250)'}" :data="tableData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
+              <el-table ref="multipleTable" 
+              :header-cell-style="{ backgroundColor: 
+              'rgb(245, 247, 250)'}" 
+              :data="staffData" border fit highlight-current-row  style="width: 100%;margin-top: 10px;">
               <el-table-column
                 type="selection"
                 width="55">
               </el-table-column>
               <el-table-column label="员工" align="center">
                <template slot-scope="scope">
-
+                  <div style="display:flex;align-items: center;">
+                   <img :src="staffAvatar(scope.row)" alt="" srcset="" style="width:50px;height:50px; border-radius:50%;margin-right:5px;" >
+                    <div>
+                     <span>{{scope.row.name}}</span>
+                    </div>
+                 </div>
+                  <!-- {{scope.row.name}} -->
                </template>
              </el-table-column>
-            <el-table-column label="职称" align="center">
+            <el-table-column label="职称" align="center" >
               <template slot-scope="scope">
-
+                   {{staffTitle(scope.row.user_title)}}
               </template>
             </el-table-column>
             <el-table-column label="介绍" align="center">
               <template slot-scope="scope">
-
+                 <li v-html="scope.row.content"></li>
               </template>
             </el-table-column>
             <el-table-column label="手机号" align="center">
               <template slot-scope="scope">
-
+                 {{scope.row.phone}}
               </template>
             </el-table-column>
             <el-table-column label="创建时间" align="center">
               <template slot-scope="scope">
-
+                {{staffCreateTime(scope.row.ctime)}}
               </template>
             </el-table-column>
             <el-table-column label="操作" align="center">
@@ -70,107 +79,8 @@
             layout="total, sizes, prev, pager, next, jumper"
             :total="total">
           </el-pagination>
-
-          <el-dialog
-              title="添加会员"
-              :visible.sync="centerDialogVisible"
-              width="50%"
-              center>
-              <el-form label-width="80px" class="clearfix" :model="form" ref="form">
-                 <el-row>
-                   <el-col :span="12">
-                      <el-form-item label="姓名:">
-                           <el-input placeholder="请输入姓名">
-
-                           </el-input>
-                      </el-form-item>
-                   </el-col>
-                   <el-col :span="12">
-                     <el-form-item label="手机号:">
-                       <el-input placeholder="请输入手机号">
-
-                       </el-input>
-                     </el-form-item>
-                   </el-col>
-                 </el-row>
-                <el-row>
-                   <el-col :span="12">
-                       <el-form-item label="性别:">
-                         <el-radio v-model="radio" label="1">男</el-radio>
-                         <el-radio v-model="radio" label="2">女</el-radio>
-                       </el-form-item>
-                   </el-col>
-                  <el-col :span="12">
-                    <el-form-item label="生日:">
-                          <el-time-select
-                            v-model="value"
-                            :picker-options="{
-                              start: '08:30',
-                              step: '00:15',
-                              end: '18:30'}"
-                            placeholder="选择时间">
-                        </el-time-select>
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-row>
-                    <el-col :span="8">
-                        <el-form-item label="员工职称:">
-                          <template>
-                            <el-select v-model="value1" multiple placeholder="请选择">
-                              <el-option
-                                v-for="item in options"
-                                :key="item.value"
-                                :label="item.label"
-                                :value="item.value">
-                              </el-option>
-                            </el-select>
-                          </template>
-                        </el-form-item>
-                    </el-col>
-                  <el-col :span="6">
-                      <template>
-                        <el-select v-model="value2" multiple placeholder="请选择">
-                          <el-option
-                            v-for="item in options"
-                            :key="item.value"
-                            :label="item.label"
-                            :value="item.value">
-                          </el-option>
-                        </el-select>
-                      </template>
-                  </el-col>
-                  <el-col :span="4">
-                      <el-form-item label="医生头像:">
-                        <el-upload
-                          class="avatar-uploader"
-                          action="https://jsonplaceholder.typicode.com/posts/"
-                          :show-file-list="false"
-                          :on-success="handleAvatarSuccess"
-                          :before-upload="beforeAvatarUpload">
-                          <img v-if="imageUrl" :src="imageUrl" class="avatar">
-                          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
-                        </el-upload>
-                      </el-form-item>
-                    </el-col>
-                </el-row>
-                 <el-row>
-                     <el-col :span="24">
-                         <el-form-item label="医生简介:">
-                           <keep-alive>
-                             <neditor ref="neditor"
-                                      id="editor">
-                             </neditor>
-                           </keep-alive>
-                         </el-form-item>
-                     </el-col>
-                 </el-row>
-              </el-form>
-              <span slot="footer" class="dialog-footer">
-              <el-button @click="centerDialogVisible = false">取 消</el-button>
-              <el-button type="primary" @click="centerDialogVisible = false">确 定</el-button>
-               </span>
-          </el-dialog>
+            <!-- 添加员工 -->
+          <create-staff-form ref="createStaffForm" :staffsData="staffsData"></create-staff-form>
 
     </div>
   </div>
@@ -178,12 +88,15 @@
 
 <script>
   import BreadCrumb from '../components/bread-crumb'
-  import Neditor from '@/components/Neditor'
+  import {getAllStaffInfo} from '@/api/act/staffmanager'
+  import {getToken} from '@/api/qiniu'
+  import {getFileExtension,uParseTime} from '@/utils/tools'
+  import CreateStaffForm from "./components/CreateStaffForm";
   export default {
     name: 'articleComment',
     components:{
       BreadCrumb,
-      Neditor,
+      CreateStaffForm,
     },
     data(){
       return{
@@ -194,69 +107,107 @@
          centerDialogVisible: false,
           radio: '1',
           value: '',
-          options: [{
-          value: '选项1',
-          label: '黄金糕'
-        }, {
-          value: '选项2',
-          label: '双皮奶'
-        }, {
-          value: '选项3',
-          label: '蚵仔煎'
-        }, {
-          value: '选项4',
-          label: '龙须面'
-        }, {
-          value: '选项5',
-          label: '北京烤鸭'
-        }],
-        value1: [],
-        value2: [],
-        imageUrl: ''
+          qiniuDomain: 'https://images.shengws.com/',
+          uploadData: { token: '', key: '' },
+         user_types: [
+            { index: 2, name: '医生' },
+            { index: 3, name: '护士' },
+            { index: 4, name: '运营' },
+            ],
+        user_titles: [
+            { index: 1, name: '医士' },
+            { index: 2, name: '医师' },
+            { index: 3, name: '住院医师' },
+            { index: 4, name: '主治医师' },
+            { index: 5, name: '副主任医师' },
+            { index: 6, name: '主任医师' },
+            { index: 7, name: '护士' },
+            { index: 8, name: '护师' },
+            { index: 9, name: '主管护师' },
+            { index: 10, name: '副主任护师' },
+            { index: 11, name: '主任护师' },
+            { index: 12, name: '运营专员' },
+            { index: 13, name: '运营主管' },
+            ],
+        imageUrl: '',
+        staffsData:[],
+        form:{
+          name:'',
+          phone:'',
+          birthday:'',
+          gender:'',
+          user_type:'',
+          user_title:'',
+          dochead:'',
+          page:1,
+          limit:10,
+          content:'',
+        },
+         total:0,
+         keyword:'',
+        staffform:[],
+         staffData:[],
       }
     },
     methods: {
-      handleAvatarSuccess(res, file) {
-        this.imageUrl = URL.createObjectURL(file.raw);
+      openCreate(){
+           this.$refs.createStaffForm.open();
+        },
+        staffAvatar(row) {
+          if(typeof(row.avatar) == "undefined" || !row.avatar || row.avatar.length==0) {
+              if(row.gender == 2) {
+             return 'https://images.shengws.com/201809182128222.png';
+              }else {
+                return 'https://images.shengws.com/201809182128111.png';
+              }
+           }else {
+             return row.avatar
+          }
+        },
+        handleSelectionChange(val){
+           this.selectedArticles = val;
+        },
+        handleSizeChange(limit) {
+            this.from.limit = limit;
+            this.getAllStaffInfo();
+          },
+        handleCurrentChange(page) {
+         this.form.page = page;
+          this.getAllStaffInfo();
+        },
+        getAllStaffInfo(){
+          getAllStaffInfo(this.form,this.keyword).then(response=>{
+            if(response.data.state ==1){
+              this.staffData = response.data.data.userStaffInfo;
+              console.log("数据",this.staffData)
+              this.total = response.data.data.total;
+              console.log("总页数",this.total)
+           }
+         })
       },
-      beforeAvatarUpload(file) {
-        const isJPG = file.type === 'image/jpeg';
-        const isLt2M = file.size / 1024 / 1024 < 2;
+        staffCreateTime(time) {
+          return uParseTime(time, "{y}-{m}-{d} {h}:{i}:{s}");
+        },
+        staffTitle(title){
+            if(title == 1){
+              return "医士";
+            }else if(title == 2){
+                return "医师";
+            }else if(title == 3){
+                return "住院医师";
+            }
 
-        if (!isJPG) {
-          this.$message.error('上传头像图片只能是 JPG 格式!');
-        }
-        if (!isLt2M) {
-          this.$message.error('上传头像图片大小不能超过 2MB!');
-        }
-        return isJPG && isLt2M;
-      }
-    }
+        },     
+          changeKey(){
+          this.getAllStaffInfo()
+         },
+    },
+    created(){
+      this.getAllStaffInfo();
+     }
   }
 </script>
 
 <style scoped>
-    .avatar-uploader{
-      border: 1px solid #d9d9d9;
-      border-radius: 1px;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .avatar-uploader{
-      border-color: #d9d9d9;
-    }
-    .avatar-uploader-icon {
-      font-size: 20px;
-      color: #8c939d;
-      width: 65px;
-      height: 50px;
-      line-height: 50px;
-      text-align: center;
-    }
-    .avatar {
-      width: 50px;
-      height: 50px;
-      display: block;
-    }
+
 </style>