Merge branch 'master' of http://git.shengws.com/zhangbj/scrm-vue

package-lock.json

       "integrity": "sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=",
       "dev": true
     },
+    "spark-md5": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/spark-md5/-/spark-md5-3.0.0.tgz",
+      "integrity": "sha1-NyIifFTi+vJLHcbZM8wUTm9xv+8="
+    },
     "spdx-correct": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.1.0.tgz",
         "minimalistic-assert": "^1.0.0"
       }
     },
+    "webim-tencent": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/webim-tencent/-/webim-tencent-1.0.2.tgz",
+      "integrity": "sha512-sdSRjcTsb/4t9riUpEv3+01wNMxP8hbWOllPbmkqKJ2jhXy88w57K7Ae4BnaeFH55prdcpsKwBhsX7BiJYGv/w=="
+    },
     "webpack": {
       "version": "3.10.0",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-3.10.0.tgz",

package.json

     "showdown": "1.8.5",
     "simplemde": "1.11.2",
     "sortablejs": "1.7.0",
+    "spark-md5": "^3.0.0",
     "vue": "2.5.16",
     "vue-count-to": "1.0.13",
     "vue-i18n": "7.3.2",
     "vue-splitpane": "1.0.2",
     "vuedraggable": "^2.16.0",
     "vuex": "3.0.1",
+    "webim-tencent": "^1.0.2",
     "xlsx": "^0.11.16"
   },
   "devDependencies": {

src/App.vue

 <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

+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

      })
 }
 
-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,
      })
 }
 
         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/api/kefu/tencentim.js

+import request from '@/utils/request'
+
+export function getusersig() {
+  return request({
+    url: '/api/tencent/usersig', 
+    method: 'get',
+  })
+}

src/lang/zh.js

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

src/router/index.js

 import marketing_tool from './modules/marketing_tool'
 import system from './modules/system'
 import site from './modules/site'
+import kefu from './modules/kefu'
 
 /** note: submenu only apppear when children.length>=1
  *   detail see  https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
 
 var _asy_router_map = [
   member,
+  kefu,
   article,
   marketing_tool,
   org,

src/router/modules/article.js

       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/router/modules/kefu.js

+import Layout from '@/views/layout/Layout'
+//客服管理模块
+
+
+export default {
+    alwaysShow: true,
+    path: '/kefu',
+    component: Layout,
+    redirect: 'noredirect',
+    name: 'kefu',
+    meta: {
+      title: '客服管理',
+      icon: 'message'
+    },
+    children: [
+      {
+        path: '/kefu',
+        component: () => import('@/scrm_pages/kefu'),
+        name: 'kefuBox',
+        meta: { title: '咨询管理', noCache: true }
+      },
+    ]
+  }

src/scrm_pages/article/acticleCategory.vue

                 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);
                 }
         },
         openDeleteCategorys(){
             if (this.selectedMembers.length==0) {
-            this.$message.error("请选择要删除的会员");
+            this.$message.error("请选择要删除的信息");
             return false;
           }   
 

src/scrm_pages/article/articleComment.vue

     <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>
 
                   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>
         <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"
 
 <script>
   import BreadCrumb from '../components/bread-crumb'
+   import { getAllComment } from '@/api/act/submitinfo'
   export default {
     name: 'articleComment',
     components:{
       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

+<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

+<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

   <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>
             <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>
             <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"
               </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">
             </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">
                     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>
 
 <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: [
         ],
         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) {
         },
         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()
 </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

+<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

           <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>
           { 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

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

src/scrm_pages/article/components/EditArticleForm.vue

                            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

     <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">
                 <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>
        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>
   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 {
           { path: false, name: '文章管理' },
           { path: '/articles/createArticle', name: '发布文章' }
         ],
-         radio:'1',
+        radio:'1',
         options: [],
         value: '',
         show:false,
             act_type: [{required: true,message:"所属分类不能为空"}]
         },
         vidoform:[],
-        ue:'',
       }
     },
     created(){
             return false
       },
       beforeAvatarlastUpload(file) {
+        console.log("冷醒是",file.type)
         const isJPG = file.type === 'image/jpeg';
         const isLt2M = file.size / 1024 / 1024 < 2;
 
          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

+
+
+<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/contactBox/index.vue

 <template>
     <div class="contact-box" id="contact-box">
         <div class="contact-box-item msg-box" >
-            <div class="box-btn " @click="showMsgBox=true">
+            <div class="box-btn " @click="toggleMsgBox">
                 <i class="el-icon-service"></i>
                 <span>在线客服</span>
             </div>
-            <div class="contact-info-box" v-show="!showMsgBox">
-                点击打开在线客服
-            </div>
             <div class="contact-msg-box" v-show="showMsgBox">
                 <div class="msg-box-panel">
                     <div class="panel-header">
                     </div>
                     <div class="panel-body">
                         <ul class="msg-inner scroll-y">
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
-                            <li>1</li>
+                            <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="cell clearfix" :class="messageitem.float=='right'?'cell_right':''">
+                                <template v-if="messageitem.float=='right'">
+                                    <div class="msg_body fl">
+                                        <div class="inner" v-html="messageitem.message"></div>
+                                    </div>
+                                    <div class="cell_pic fl">
+                                        <div class="pic">
+                                            <img :src="messageitem.avatar" alt="">
+                                        </div>
+                                    </div>
+                                </template>
+                                <template v-else>
+                                    <div class="cell_pic fl">
+                                        <div class="pic">
+                                            <img :src="messageitem.avatar" alt="">
+                                        </div>
+                                    </div>
+                                    <div class="msg_body fl">
+                                        <div class="inner" v-html="messageitem.message"></div>
+                                    </div>
+                                </template>
+                            </li>
                         </ul>
                     </div>
+                    <div class="panel-tool">
+                        <i class="icon-face" title="表情" @click="showEmotion"></i>
+                        <el-upload
+                        class="avatar-uploader"
+                        action="https://jsonplaceholder.typicode.com/posts/"
+                        :show-file-list="false"
+                        :http-request='handleIMPicUload'
+                        :on-success="handleIMPicSuccess"
+                        :before-upload="beforeIMPicUpload">
+                        <i class="el-icon-picture" title="图片"></i>
+                        </el-upload>
+                        <div class="face-box" v-show="showFace">
+                            <div class="face-box-title">
+                                <span>表情</span>
+                                <i class="el-icon-close " @click="showFace=false" style="float:right" ></i>
+                            </div>
+                            <ul class="face-box-list clearfix">
+                                <li v-for="(faceitem, index) in facelist" :key="index" @click="selectEmotion(faceitem)" >
+                                    <img :src="faceitem[1]" :id="faceitem[0]"  alt="">
+                                </li>
+                            </ul>
+                        </div>
+
+                    </div>
+                    <div class="panel-booter">
+                        <div class="msg-input-box">
+                            <textarea class="textarea scroll-y message-textarea"  v-model="message" placeholder="请输入"></textarea>
+                        </div>
+                        <div class="msg-send-btn-box">
+                            <span class="time fl">服务时间:工作时间:9:00-22:00 节假日:9:00-18:00</span>
+                            <el-button type="primary" icon="el-icon-edit" class="fr" size="mini" @click="sendMessage">发送</el-button>
+                            <!-- <button type="submit" id="sendadminkfmsg" class="send_btn fr">发送</button> -->
+                        </div>
+                    </div>
                 </div>
             </div>
         </div>
         <div class="contact-box-item phone-box">
-            <div class="box-btn">
+            <div class="box-btn" @click="togglePhoneBox">
                 <i class="el-icon-phone-outline"></i>
                 <span>客服电话</span>
             </div>
-            <div class="contact-phone-box">
-                <i class="el-icon-phone-outline"></i>
+            <div class="contact-phone-box" v-show="showPhoneBox">
+                <i class="el-icon-phone-outline" ></i>
                 <span>0755-86526342</span>
             </div>
         </div>
     </div>
 </template>
 <script>
+import {getusersig} from "@/api/kefu/tencentim";
+import webim from 'webim-tencent';
+let selType =  webim.SESSION_TYPE.C2C;
+let reqMsgCount = 15; //每次请求的历史消息(c2c获取群)条数
+var msgList = [];
+var getPrePageC2CHistroyMsgInfoMap = {};
 export default {
     name:'contactBox',
     data(){
         return{
             showMsgBox:false,
+            showPhoneBox:false,
+            selToID:'',
+            loginInfo: {
+                sdkAppID: '', //用户所属应用id,必填
+                appIDAt3rd: '',
+                identifier: '', //当前用户ID,必须是否字符串类型，必填
+                accountType: '', //用户所属应用帐号类型，必填
+                userSig: '', //当前用户身份凭证，必须是字符串类型，必填
+                identifierNick: '', //当前用户昵称，不用填写，登录接口会返回用户的昵称，如果没有设置，则返回用户的id
+                headurl: '', //当前用户默认头像，选填，如果设置过头像，则可以通过拉取个人资料接口来得到头像信息
+            },
+            useradmin:{
+                usersig: '',
+                Indentifier: '',
+                appIDAt3rd:'',
+                IdentifierNick:'',
+                HeadURL:'',
+            },
+            kefuUrl:'https://images.shengws.com/ico_gjh.png',
+            userSigFlag:false,
+            imloginFlag:false,
+            message:'',
+            messageBox:[],
+            facelist:[],
+            showFace:false,
         }
-    }
+    },
+    created(){
+        
+        this.getusersig();
+    },
+    methods:{
+        getusersig() {
+            getusersig().then(response => {
+                if (response.data.state == 0) {
+                    this.$message.error(response.data.msg);
+                    return false;
+                } else {
+                    this.useradmin = {
+                        usersig: response.data.data.sig,
+                        Indentifier: response.data.data.Indentifier,
+                        appIDAt3rd:response.data.data.appIDAt3rd,
+                        IdentifierNick:response.data.data.IdentifierNick,
+                        HeadURL:response.data.data.HeadURL,
+                    } 
+                    
+                    this.loginInfo.appIDAt3rd = this.useradmin.appIDAt3rd
+                    this.loginInfo.identifier = this.useradmin.Indentifier
+                    this.loginInfo.userSig = this.useradmin.usersig
+                    this.loginInfo.identifierNick = this.useradmin.IdentifierNick
+                    this.loginInfo.headurl = this.useradmin.HeadURL
+                    this.loginInfo.sdkAppID = response.data.data.sdkAppID
+                    this.loginInfo.accountType = response.data.data.accountType
+                    this.selToID = response.data.data.selToAdmin;
+                    this.userSigFlag = true;
+                }
+            });
+        },
+        showEmotion:function(){
+            this.facelist = [];
+            for (const index in webim.Emotions) {
+                this.facelist.push(webim.Emotions[index]);
+            }
+            this.showFace = true;
+        },
+        selectEmotion:function(face){
+            this.message += face[0];
+            this.showFace = false;
+        },
+        sendMessage:function(){
+            var message = this.message.trim();
+            var msgLen = webim.Tool.getStrBytes(message);
+            if(message == '') {
+                this.$message.error('不能发送空消息');
+                return false;
+            }
+            var maxLen, errInfo;
+            if (selType == webim.SESSION_TYPE.C2C) {
+                maxLen = webim.MSG_MAX_LENGTH.C2C;
+                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+            } else {
+                maxLen = webim.MSG_MAX_LENGTH.GROUP;
+                errInfo = "消息长度超出限制(最多" + Math.round(maxLen / 3) + "汉字)";
+            }
+            if (msgLen > maxLen) {
+                this.$message.error(errInfo);
+                return false;
+            }
+            this.handleMsgSend(message);
+        },
+        handleMsgSend(msgContent) {
+            var selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
+            var isSend = true; //是否为自己发送
+            var seq = -1; //消息序列，-1表示sdk自动生成，用于去重
+            var random = Math.round(Math.random() * 4294967296); //消息随机数，用于去重
+            var msgTime = Math.round(new Date().getTime() / 1000); //消息时间戳
+            var subType; //消息子类型
+            if (selType == webim.SESSION_TYPE.C2C) {
+                subType = webim.C2C_MSG_SUB_TYPE.COMMON;
+            } else {
+                subType = webim.GROUP_MSG_SUB_TYPE.COMMON;
+            }
+            var msg = new webim.Msg(selSess, isSend, seq, random, msgTime, this.loginInfo.identifier, subType, this.loginInfo.identifierNick);
+
+            var text_obj, face_obj, tmsg, emotionIndex, emotion, restMsgIndex;
+            //解析文本和表情
+            var expr = /\[[^[\]]{1,3}\]/mg;
+            var emotions = msgContent.match(expr);
+            if (!emotions || emotions.length < 1) {
+                text_obj = new webim.Msg.Elem.Text(msgContent);
+                msg.addText(text_obj);
+            } else {
+                for (var i = 0; i < emotions.length; i++) {
+                    tmsg = msgContent.substring(0, msgContent.indexOf(emotions[i]));
+                    if (tmsg) {
+                        text_obj = new webim.Msg.Elem.Text(tmsg);
+                        msg.addText(text_obj);
+                    }
+                    emotionIndex = webim.EmotionDataIndexs[emotions[i]];
+                    emotion = webim.Emotions[emotionIndex];
+
+                    if (emotion) {
+                        face_obj = new webim.Msg.Elem.Face(emotionIndex, emotions[i]);
+                        msg.addFace(face_obj);
+                    } else {
+                        text_obj = new webim.Msg.Elem.Text(emotions[i]);
+                        msg.addText(text_obj);
+                    }
+                    restMsgIndex = msgContent.indexOf(emotions[i]) + emotions[i].length;
+                    msgContent = msgContent.substring(restMsgIndex);
+                }
+                if (msgContent) {
+                    text_obj = new webim.Msg.Elem.Text(msgContent);
+                    msg.addText(text_obj);
+                }
+            }
+
+            msg.PushInfo = {
+                "PushFlag": 0,
+                "Desc": '测试离线推送内容', //离线推送内容
+                "Ext": '测试离线推送透传内容', //离线推送透传内容
+                "AndroidInfo": {
+                    "Sound": "android.mp3" //离线推送声音文件路径。
+                },
+                "ApnsInfo": {
+                    "Sound": "apns.mp3", //离线推送声音文件路径。
+                    "BadgeMode": 1
+                }
+            };
+
+            msg.PushInfoBoolean = true; //是否开启离线推送push同步
+            msg.sending = 1;
+            msg.originContent = msgContent;
+            // turnoffFaces_box();
+            var _this = this;
+
+            webim.sendMsg(msg, function (resp) {
+                _this.addMsg(msg);
+                _this.message = '';
+            }, function (err) {
+                console.log(err)
+            });
+        },
+        addMsg(msg, prepage) {
+            var messageitem = {
+                id:'',
+                message:'',
+                avatar:'',
+                time:'',
+                float:''
+            };
+            var isSelfSend, fromAccount, fromAccountNick, fromAccountImage, sessType, subType;
+
+            //webim.SESSION_TYPE.GROUP-群聊，
+            //webim.SESSION_TYPE.C2C-私聊，
+            sessType = msg.getSession().type();
+            isSelfSend = msg.getIsSend();//消息是否为自己发的
+            fromAccount = msg.getFromAccount();
+            if (!fromAccount) {
+                return;
+            }
+            if (isSelfSend) {//如果是自己发的消息
+                messageitem.avatar = this.loginInfo.headurl;
+                messageitem.float = "right";
+            } else {
+                messageitem.avatar = this.kefuUrl;
+                messageitem.float = "left";
+            }
+            messageitem.id = msg.random;
+            messageitem.time = webim.Tool.formatText2Html(webim.Tool.formatTimeStamp(msg.getTime()));
+            messageitem.message = this.convertMsgtoHtml(msg)
+            this.messageBox.push(messageitem);
+
+            var msgflow = document.getElementsByClassName("msg-inner")[0];
+            if (prepage) {
+                //300ms后,等待图片加载完，滚动条自动滚动到底部
+                if (msgflow.scrollTop == 0) {
+                    setTimeout(function () {
+                        msgflow.scrollTop = 0;
+                    }, 300);
+                }
+            } else {
+                //300ms后,等待图片加载完，滚动条自动滚动到底部
+                setTimeout(function () {
+                    msgflow.scrollTop = msgflow.scrollHeight;
+                }, 300);
+            }
+        },
+        sendPic(images, imgName) {
+            var _this = this;
+            if (!this.selToID) {
+                alert("请先选择对话用户");
+                return;
+            }
+
+            if (!this.selSess) {
+                this.selSess = new webim.Session(selType, this.selToID, this.selToID, this.kefuUrl, Math.round(new Date().getTime() / 1000));
+            }
+            var msg = new webim.Msg(this.selSess, true, -1, -1, -1, this.loginInfo.identifier, 0, this.loginInfo.identifierNick);
+            var images_obj = new webim.Msg.Elem.Images(images.File_UUID);
+            for (var i in images.URL_INFO) {
+                var img = images.URL_INFO[i];
+                var newImg;
+                var type;
+                switch (img.PIC_TYPE) {
+                    case 1://原图
+                        type = 1;//原图
+                        break;
+                    case 2://小图（缩略图）
+                        type = 3;//小图
+                        break;
+                    case 4://大图
+                        type = 2;//大图
+                        break;
+                }
+                newImg = new webim.Msg.Elem.Images.Image(type, img.PIC_Size, img.PIC_Width, img.PIC_Height, img.DownUrl);
+                images_obj.addImage(newImg);
+            }
+            msg.addImage(images_obj);
+            //if(imgName){
+            //    var data=imgName;//通过自定义消息中的data字段保存图片名称
+            //    var custom_obj = new webim.Msg.Elem.Custom(data, '', '');
+            //    msg.addCustom(custom_obj);
+            //}
+            //调用发送图片消息接口
+            webim.sendMsg(msg, function (resp) {
+                if (selType == webim.SESSION_TYPE.C2C) {//私聊时，在聊天窗口手动添加一条发的消息，群聊时，长轮询接口会返回自己发的消息
+                    _this.addMsg(msg);
+                }
+            }, function (err) {
+                alert(err.ErrorInfo);
+            });
+        },
+        bindScrollHistoryEvent(axtion){
+            var msgflow = document.getElementsByClassName("msg-inner")[0];
+            var _this = this;
+            if (axtion=='init') {
+                msgflow.onscroll = function () {
+                    if (msgflow.scrollTop == 0) {
+                        msgflow.scrollTop = 10;
+                        if (selType == webim.SESSION_TYPE.C2C) {
+                            _this.getPrePageC2CHistoryMsgs();
+                        } 
+                    }
+                }
+            }else {
+                msgflow.onscroll = null;
+            }
+        },
+        getPrePageC2CHistoryMsgs  (cbOk, cbError) {
+            var _this = this;
+            if (selType == webim.SESSION_TYPE.GROUP) {
+                _this.$message.error("当前的聊天类型为群聊天，不能进行拉取好友历史消息操作");
+                return;
+            }
+            var tempInfo = getPrePageC2CHistroyMsgInfoMap[_this.selToID];//获取下一次拉取的c2c消息时间和消息Key
+            var lastMsgTime;
+            var msgKey;
+            if (tempInfo) {
+                lastMsgTime = tempInfo.LastMsgTime;
+                msgKey = tempInfo.MsgKey;
+            } else {
+                _this.$message.error("获取下一次拉取的c2c消息时间和消息Key为空");
+                return;
+            }
+            var options = {
+                'Peer_Account': _this.selToID, //好友帐号
+                'MaxCnt': reqMsgCount, //拉取消息条数
+                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+                'MsgKey': msgKey
+            };
+            webim.getC2CHistoryMsgs(
+                options,
+                function (resp) {
+                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+                    if (resp.MsgList.length == 0) {
+                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                        return;
+                    }
+                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                        'LastMsgTime': resp.LastMsgTime,
+                        'MsgKey': resp.MsgKey
+                    };
+                    if (cbOk) {
+                        cbOk(resp.MsgList);
+                    } else {
+                        _this.getHistoryMsgCallback(resp.MsgList, true);
+                    }
+                },
+                cbError
+            );
+        },
+        getLastC2CHistoryMsgs (cbOk, cbError) {
+            var _this = this;
+            var lastMsgTime = 0;//第一次拉取好友历史消息时，必须传0
+            var msgKey = '';
+            var options = {
+                'Peer_Account': this.selToID, //好友帐号
+                'MaxCnt': reqMsgCount, //拉取消息条数
+                'LastMsgTime': lastMsgTime, //最近的消息时间，即从这个时间点向前拉取历史消息
+                'MsgKey': msgKey
+            };
+            this.selSess = null;
+            webim.MsgStore.delSessByTypeId(selType, this.selToID);
+
+            webim.getC2CHistoryMsgs(
+                options,
+                function (resp) {
+                    var complete = resp.Complete;//是否还有历史消息可以拉取，1-表示没有，0-表示有
+
+                    if (resp.MsgList.length == 0) {
+                        webim.Log.warn("没有历史消息了:data=" + JSON.stringify(options));
+                        return;
+                    }
+                    getPrePageC2CHistroyMsgInfoMap[_this.selToID] = {//保留服务器返回的最近消息时间和消息Key,用于下次向前拉取历史消息
+                        'LastMsgTime': resp.LastMsgTime,
+                        'MsgKey': resp.MsgKey
+                    };
+                    
+                    if (cbOk)
+                        cbOk(resp.MsgList);
+                },
+                cbError
+            );
+        },
+        getHistoryMsgCallback(msgList, prepage) {
+            var msg;
+            var prepage = prepage || false;
+
+            //如果是加载前几页的消息，消息体需要prepend，所以先倒排一下
+            if (prepage) {
+                msgList.reverse();
+            }
+
+            for (var j in msgList) {//遍历新消息
+                msg = msgList[j];
+                if (msg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                    this.selSess = msg.getSession();
+                    //在聊天窗体中新增一条消息
+                    this.addMsg(msg, prepage);
+                }
+            }
+            //消息已读上报，并将当前会话的消息设置成自动已读
+            webim.setAutoRead(this.selSess, true, true);
+        },
+        convertMsgtoHtml(msg) {
+            var html = "",
+                elems, elem, type, content;
+            elems = msg.getElems(); //获取消息包含的元素数组
+            var count = elems.length;
+            for (var i = 0; i < count; i++) {
+                elem = elems[i];
+                type = elem.getType();//获取元素类型
+                content = elem.getContent();//获取元素对象
+                switch (type) {
+                    case webim.MSG_ELEMENT_TYPE.TEXT:
+                        var eleHtml = this.convertTextMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.FACE:
+                        html += this.convertFaceMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.IMAGE:
+                        if (i <= count - 2) {
+                            var customMsgElem = elems[i + 1];//获取保存图片名称的自定义消息elem
+                            var imgName = customMsgElem.getContent().getData();//业务可以自定义保存字段，demo中采用data字段保存图片文件名
+                            html += this.convertImageMsgToHtml(content, imgName);
+                            i++;//下标向后移一位
+                        } else {
+                            html += this.convertImageMsgToHtml(content);
+                        }
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.SOUND:
+                        html += this.convertSoundMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.FILE:
+                        html += this.convertFileMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.LOCATION:
+                        html += this.convertLocationMsgToHtml(content);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.CUSTOM:
+                        var eleHtml = this.convertCustomMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    case webim.MSG_ELEMENT_TYPE.GROUP_TIP:
+                        var eleHtml = this.convertGroupTipMsgToHtml(content);
+                        //转义，防XSS
+                        html += webim.Tool.formatText2Html(eleHtml);
+                        break;
+                    default:
+                        webim.Log.error('未知消息元素类型: elemType=' + type);
+                        break;
+                }
+            }
+            return html;
+        },
+        convertTextMsgToHtml(content) {
+            return content.getText();
+        },
+        //解析表情消息元素
+        convertFaceMsgToHtml(content) {
+            var faceUrl = null;
+            var data = content.getData();
+            var index = webim.EmotionDataIndexs[data];
+
+            var emotion = webim.Emotions[index];
+            if (emotion && emotion[1]) {
+                faceUrl = emotion[1];
+            }
+            if (faceUrl) {
+                return "<img src='" + faceUrl + "'/>";
+            } else {
+                return data;
+            }
+        },
+        //解析图片消息元素
+        convertImageMsgToHtml(content, imageName) {
+            var smallImage = content.getImage(webim.IMAGE_TYPE.SMALL);//小图
+            var bigImage = content.getImage(webim.IMAGE_TYPE.LARGE);//大图
+            var oriImage = content.getImage(webim.IMAGE_TYPE.ORIGIN);//原图
+            if (!bigImage) {
+                bigImage = smallImage;
+            }
+            if (!oriImage) {
+                oriImage = smallImage;
+            }
+            return "<img name='" + imageName + "' src='" + smallImage.getUrl() + "#" + bigImage.getUrl() + "#" + oriImage.getUrl() + "' style='CURSOR: hand' id='" + content.getImageId() + "' bigImgUrl='" + bigImage.getUrl() + "'/>";
+        }, 
+        handleIMPicUload:function(fileobj){
+            var file = fileobj.file
+            console.log("file", file);
+            var _this = this;
+            var businessType;//业务类型，1-发群图片，2-向好友发图片
+            if (selType != webim.SESSION_TYPE.C2C) {//向好友发图片
+                this.$message.error('不支持群聊');
+                return; 
+            } 
+            businessType = webim.UPLOAD_PIC_BUSSINESS_TYPE.C2C_MSG;
+            //封装上传图片请求
+            var opt = {
+                'file': file, //图片对象
+                'onProgressCallBack': this.onProgressCallBack, //上传图片进度条回调函数
+                //'abortButton': document.getElementById('upd_abort'), //停止上传图片按钮
+                'To_Account': this.selToID, //接收者
+                'businessType': businessType//业务类型
+            };
+            //上传图片
+            webim.uploadPic(opt,
+                function (resp) {
+                    //上传成功发送图片
+                    _this.sendPic(resp, file.name);
+                    
+                },
+                function (err) {
+                    alert(err.ErrorInfo);
+                }
+            );
+        },
+        handleIMPicSuccess:function(){},
+        beforeIMPicUpload:function(file){
+            var fileType = file.type;
+            const isJPG = fileType.indexOf("image") > -1;
+            if (!isJPG) {
+                this.$message.error('只能上传图片');
+            }
+            return isJPG;
+        },
+        togglePhoneBox:function(){
+            if (this.showPhoneBox) {
+                this.showPhoneBox = false;
+            }else {
+                this.showPhoneBox = true;
+            }
+            this.showMsgBox = false;
+        },
+        toggleMsgBox:function(){
+            if (this.showMsgBox) {
+                this.showMsgBox = false;
+            }else {
+                this.showMsgBox = true;
+            }
+            this.showPhoneBox = false;
+        },
+        webimlogin(){
+            let _this = this;
+            let listeners = {
+                "onConnNotify": this.onConnNotify //监听连接状态回调变化事件,必填
+                , "jsonpCallback": this.jsonpCallback //IE9(含)以下浏览器用到的jsonp回调函数，
+                , "onMsgNotify": this.onMsgNotify //监听新消息(私聊，普通群(非直播聊天室)消息，全员推送消息)事件，必填
+                , "onProfileSystemNotifys": this.onProfileSystemNotifys //监听资料系统（自己或好友）通知事件，选填
+                , "onKickedEventCall": this.onKickedEventCall //被其他登录实例踢下线
+                , "onC2cEventNotifys": this.onC2cEventNotifys //监听C2C系统消息通道
+            };
+            webim.login(this.loginInfo, listeners, this.loginOptions, 
+                function(resp){
+                    _this.$message.success('webim登录成功');
+                    _this.imloginFlag = true;
+                },
+                function(err) {
+                    _this.$message.error('webim登录错误');
+                }
+            );
+        },
+        onConnNotify(){},
+        jsonpCallback(){},
+        onMsgNotify(newMsgList){
+            //监听新消息事件
+            var msgList = [];
+            var dateStart = null;
+            var dateEnd = null;
+
+            //console.warn(newMsgList);
+            var sess, newMsg, formId;
+            //获取所有聊天会话
+            var sessMap = webim.MsgStore.sessMap();
+
+            for (var j in newMsgList) {//遍历新消息
+
+                newMsg = newMsgList[j];
+                formId = newMsg.getSession().id();
+                if (formId.indexOf("AdminKeFu")<0) {
+                    continue;
+                }else {
+                    if (newMsg.getSession().id() == this.selToID) {//为当前聊天对象的消息
+                        this.addMsg(newMsg);
+                    }
+                    msgList.push(newMsg.elems[0].content.text);
+                }
+                
+            }
+        },
+        onProfileSystemNotifys(){},
+        onKickedEventCall(){},
+        onC2cEventNotifys(){},
+    },
+    watch:{
+        'userSigFlag':function(value){
+            if(this.userSigFlag) {
+                this.webimlogin();
+            }
+        },
+        'imloginFlag':function(value) {
+            var _this = this;
+            if (this.imloginFlag) {
+                this.bindScrollHistoryEvent('reset');
+                this.getLastC2CHistoryMsgs(function (msgList) {
+                    _this.getHistoryMsgCallback(msgList);
+                    _this.bindScrollHistoryEvent('init');
+                    //绑定滚动操作
+                }, function (err) {
+                    alert(err.ErrorInfo);
+                });
+            }
+        }
+    },
 
 }
 </script>
     right: 12px;
     bottom: 10%;
     margin-top: -100px;
-    z-index: 99999;
+    z-index: 9999;
 }
     
 .contact-box .contact-box-item{
     color: #59a3ec;
     display: inline-block;
 }
-.contact-box .contact-box-item .box-btn:hover {
-    background: #5aa6f1;
-}
+/* .contact-box .contact-box-item .box-btn:hover {
+} */
 .contact-box .box-btn span{
     display: none;
-}
-
-.contact-box .box-btn:hover span{
-    display: block;
     color:#fff;
     padding: 8px;
     font-size: 14px;
+    background: #5aa6f1;
+}
+.contact-box .box-btn:hover span{
+    display: block;
 }
 .contact-box .box-btn:hover i{
     display: none;
     bottom: 0px;
     right: 56px;
     height: 48px;
-    /* display: block; */
+    display:flex;
     background: #fff;
     width: 230px;
-    display:none;
     align-items: center;
 }
 .contact-box .contact-phone-box i {
     font-size:30px; 
     margin: 9px;
 }
-.contact-box .phone-box:hover .contact-phone-box{
-    display:flex;
-}
-
 .contact-box .contact-phone-box span {
     font-size:20px; 
     margin-left: 15px;
     display: none;
     background: #fff;
     width: 175px;
-    z-index: 1000000;
+    z-index: 10000;
 }
 .contact-box .msg-box:hover .contact-info-box{
     display:block;
 .contact-box .scroll-y::-webkit-scrollbar-track {
     border-radius: 2px;
 }
+.contact-box .msg-inner .cell {
+    margin-bottom: 15px;
+}
+.contact-box .cell_right {
+    float: right;
+}
+
+.contact-box .clearfix {
+    clear: both;
+}
+.contact-box .msg-inner .msg_body {
+    border: 1px #e5e5e5 solid;
+    line-height: 22px;
+    display: inline-block;
+    padding: 6px;
+    max-width: 292px;
+}
+.contact-box .fl {
+    float: left;
+}
+.contact-box .msg-inner .msg_body .inner {
+    color: #465b6e;
+}
+.contact-box .msg-inner .cell_pic {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    margin: 0 20px;
+}
+.contact-box .msg-inner .cell_pic .pic {
+    width: 40px;
+    height: 40px;
+    display: flex;
+}
+.contact-box .msg-inner .cell_pic .pic img {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    object-fit: cover;
+    object-position: center;
+}
+
+.contact-box .msg-box-panel .panel-booter .textarea {
+    border: 1px #fff solid;
+    padding: 10px 20px;
+    color: #465b6e;
+    height: 100px;
+    resize: none;
+    width: 100%;
+}
+.contact-box .msg-box-panel .panel-booter .msg-send-btn-box {
+    padding: 0 20px 10px 20px;
+    float: left;
+    background: #fff;
+    width: 408px;
+}
+.contact-box .msg-box-panel .panel-booter .time {
+    font-size: 12px;
+    color: #bebebe;
+    height: 26px;
+    line-height: 26px;
+}
+.contact-box .msg-box-panel .panel-booter .msg-send-btn-box .send_btn {
+    color: #fff;
+    padding: 6px 20px;
+    border-radius: 4px;
+    font-size: 12px;
+    background: #58a1ed;
+    border: none;
+}
+
+.contact-box  .panel-tool {
+    color: #465b6e;
+    height: 30px;
+    border-bottom: 1px #e5e5e5 solid;
+    display:flex;
+    align-items: center;
+}
+
+.contact-box  .panel-tool i {
+    font-size: 20px;
+    padding: 0 5px;
+    margin: 0 5px;
+    cursor: pointer;
+}
+
+.contact-box  .panel-tool .icon-face::before {
+    content: '\1F642';
+    font-size: 15px;
+}
+.contact-box .face-box {
+    width: 304px;
+    z-index: 10001;
+    background: #fff;
+    position: relative;
+    bottom: 70px;
+    left: -100px;
+    border: 2px #e5e5e5 solid;
+}
+.contact-box .face-box-list li {
+    display: inline-block;
+    
+    border-right: 1px #CCC solid;
+    border-bottom: 1px #CCC solid;
+    cursor: pointer;
+}
+.contact-box .face-box-title {
+    border-bottom: 1px #e5e5e5 solid;
+    margin: 2px 0;
+}
 </style>

src/scrm_pages/kefu/index.vue

+<template>
+  <div class="main-contain">
+    <div class="position">
+      <bread-crumb :crumbs='crumbs'></bread-crumb>
+    </div>
+    <div class="app-container">
+        <div class="customer_plate white-bg">
+            <div class="aside">
+                <div class="customer_search clearfix">
+                <div class="super_searchbox">
+                    <span class="search_icon"></span>
+                    <input type="text" class="cus_search_input" v-model="searchname" placeholder="请输入客户名称">
+                </div>
+                </div>
+                <div class="client_list_box">
+                <div class="client_list">
+                    <ul class="users-list">
+                    <li v-for="(patient, key) in patientsMap" v-show="searchname == '' || (patient.name.indexOf(searchname)>=0)" :class="thisPatient && patient.user_id==thisPatient.user_id?'Active':''" :key="key" :id="'sessDiv_User_'+patient.user_id" class="item" :data-username="patient.name" @click="chooseThisUser(patient)">
+                        <span :id="'badgeDiv_User_'+patient.user_id" class="circle-count" style="" v-show="patient.unread_msg_count"><i class="count">{{patient.unread_msg_count}}</i></span>
+                        <figure :id="'faceImg_User_'+patient.user_id" class="session-pic"><img :src="patient.avatar"></figure>
+                        <h3 :id="'nameDiv_User_'+patient.user_id" class="nick">{{patient.name}}</h3>
+                        <!-- <span class="square-close" title="退出接待" :data-toid="'User_'+patient.user_id">×</span> -->
+                    </li>
+                    </ul>
+                </div>
+                </div>
+            </div>
+
+            <div class="left_content">
+                <div class="conversation-admin">
+                <span class="nickname">
+                    <span></span>
+                </span>
+                </div>
+                <div class="message-list-wrap">
+                <div class="message-list-item">
+                    <ul class="message-list">
+                    
+                    <li v-for="(messageitem, key) in messageBox" :key="key" :id="'id_'+messageitem.id" class="message-item clearfix">
+                        <div class="time"><span v-html="messageitem.time"></span></div>
+                        <div class="user " :class="messageitem.float">
+                            <figure class="bg-pic circle-bg-pic">
+                            <div class="bg-pic-content">
+                                <img :src="messageitem.avatar">
+                            </div>
+                            </figure>
+                        </div>
+                        <div class="message-body " :class="messageitem.float"><div class="inner" v-html="messageitem.message"></div></div>
+                    </li>
+
+                    </ul>
+                </div>
+                <div class="no_session">
+                    <span class="no_session_pic"></span>
+                    <p class="no_session_txt">没有选中会话哦！</p>
+                </div>
+                </div>
+                <div class="send_box" v-loading="loadingbox" :element-loading-text="loadingboxtext">
+                <div class="inputer_actions">
+                    <!-- <div class="face">
+                    <span class="face_icon" @click="showEmotionDialog"></span>
+                    </div> -->
+                    <div class="picture">
+                    <span class="picture_icon" @click="selectPicClick"></span>
+                    </div>
+                </div>
+                <div id="wl_faces_box" class="wl_faces_box" v-bind:style="{left:'0px', display:facesBoxDisplay}">
+                    <div class="wl_faces_content">
+                    <div class="title">
+                        <ul>
+                        <li class="title_name">常用表情</li>
+                        <li class="wl_faces_close">
+                            <span @click="facesBoxDisplay='none'">&nbsp;</span>
+                        </li>
+                        </ul>
+                    </div>
+                    <div id="wl_faces_main" class="wl_faces_main">
+                        <ul id="emotionUL">
+                        <li v-for="(emotion, key) in emotionList" :key="key" @click="chooseThisFace(emotion)">
+                            <img :src="emotion.src" :id="emotion.id" alt="" style="cursor:pointer;">
+                        </li>
+                        </ul>
+                    </div>
+                    </div>
+                    <div class="wlf_icon"></div>
+                </div>
+                <div class="inputer-area">
+                    <textarea
+                    maxlength="500" v-model="message"
+                    class="message-textarea transparent-txta"
+                    placeholder
+                    id="message"
+                    ></textarea>
+                </div>
+                <div class="send_box_btn">
+                    <button class="send_btn" id="sendMessaeg" @click="sendMessage">发送</button>
+                </div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  import BreadCrumb from '../components/bread-crumb'
+  export default {
+    name: 'commentList',
+    components:{
+      BreadCrumb,
+    },
+    data(){
+      return{
+        crumbs: [
+          { path: false, name: '客服管理' },
+          { path: false, name: '咨询管理' }
+        ],
+        searchname:'',
+        patientsMap:{},
+        thisPatient:null,
+        messageBox:[],
+      }
+    },
+    methods:{},
+    created(){
+    }
+  }
+</script>
+
+<style scoped>
+  /*.app-container .cell.clearfix .time ul li {*/
+    /*float: left;*/
+    /*list-style: none;*/
+    /*cursor: pointer;*/
+    /*padding: 6px 20px;*/
+    /*color: #606266;*/
+    /*border-radius: 4px;*/
+    /*margin: 0 8px 0 0;*/
+    /*font-size: 14px;*/
+    /*text-align: center;*/
+  /*}*/
+
+  
+.app-container{
+  height: 750px;  
+}
+.customer_plate {
+  width: 100%;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  height:100%;
+}
+.customer_plate .aside {
+  width: 282px;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  position: relative;
+  border-right: 1px solid #e5e8ea;
+}
+.customer_plate .aside .client_list_box {
+  position: absolute;
+  width: 100%;
+  top: 50px;
+  left: 0;
+  bottom: 0;
+  overflow-x: visible;
+  overflow-y: auto;
+}
+.channelswitch-wrap {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+}
+.customer_plate .aside .client_list_box .client_list {
+  height: 100%;
+  overflow: hidden;
+  overflow-y: auto;
+}
+.customer_plate .aside .customer_search {
+  margin: 0 10px;
+  height: 34px;
+}
+.customer_plate .aside .super_searchbox {
+  padding: 0 8px;
+  background-color: #f4f7fa;
+  border-radius: 30px;
+  margin-top: 15px;
+  font-size: 12px;
+}
+.customer_plate .aside .super_searchbox .cus_search_input {
+  border: none;
+  background: none;
+  width: 224px;
+  height: 22px;
+  line-height: 22px;
+}
+.customer_plate .aside .super_searchbox .search_icon {
+  display: inline-block;
+  width: 12px;
+  height: 12px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat;
+  float: left;
+  background-position: -460px -314px;
+  margin: 4px 5px 0 0;
+}
+.left_content {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  position: relative;
+  width: 100%;
+  justify-content: flex-start;
+  flex-direction: column;
+}
+.left_content .message-list-wrap {
+  position: absolute;
+  top: 50px;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  border-bottom: 1px #e5e8ea solid;
+  bottom: 210px;
+}
+.left_content .message-list-wrap .message-list-item {
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+.left_content .message-list-wrap .message-list {
+  padding: 0 12px 20px;
+}
+.left_content .conversation-admin {
+  height: 48px;
+  line-height: 48px;
+  border-bottom: 1px #e5e8ea solid;
+  margin-left: 2px;
+  width: 100%;
+}
+.left_content .conversation-admin .nickname {
+  padding-left: 22px;
+}
+.client_list ul {
+  list-style: none;
+}
+.client_list ul .item {
+  padding: 17px 12px 17px 62px;
+  min-height: 36px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: background-color 0.2s linear;
+  -webkit-transition: background-color 0.2s linear;
+  -moz-transition: background-color 0.2s linear;
+  position: relative;
+}
+.client_list ul .Active {
+  background: #f4f7fa;
+}
+.client_list ul .item .nick {
+  font-size: 14px;
+  color: #485b6d;
+  margin-bottom: 7px;
+}
+.client_list ul .item:hover {
+  background: #dfedfb;
+}
+.client_list ul .item .time {
+  position: absolute;
+  top: 14px;
+  right: 12px;
+  color: #a8b3ba;
+}
+.client_list ul .item .circle-count {
+  padding: 2px;
+  background-color: #ff7979;
+  text-align: center;
+  left: 8px;
+  z-index: 2;
+  min-width: 17px;
+  min-height: 15px;
+  line-height: 12px;
+  border-radius: 10px;
+  position: absolute;
+  top: 12px;
+  display: inline-block;
+}
+.client_list ul .item .circle-count .count {
+  color: #fff;
+  display: inline-block;
+  -webkit-transform: scale(0.83);
+  -moz-transform: scale(0.83);
+  -ms-transform: scale(0.83);
+  transform: scale(0.83);
+}
+.client_list ul .item .session-pic {
+  position: absolute;
+  top: 17px;
+  left: 13px;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  overflow: hidden;
+  display: inline-block;
+}
+.client_list ul .item .session-pic img {
+  width: 40px;
+  height: 40px;
+}
+.client_list ul .item .square-close {
+  color: #fff;
+  background-color: #d2d2d5;
+  display: none;
+  width: 14px;
+  height: 14px;
+  line-height: 12px;
+  text-align: center;
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.client_list ul .item:hover .square-close {
+  display: block;
+}
+.client_list ul .item .desc {
+  color: #a8b3ba;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  width: 150px;
+}
+.service_fixed {
+  position: fixed;
+}
+.message-list-wrap ul li {
+  padding: 12px;
+}
+.message-list-wrap .message-item .time {
+  text-align: center;
+  margin: 20px 0 6px 0;
+}
+.message-list-wrap .message-item .time span {
+  font-size: 12px;
+  color: #a8b3ba;
+}
+.message-list .message-item .user .bg-pic {
+  display: inline-block;
+  margin-right: 20px;
+}
+.message-list .message-item .message-body {
+  background: #e5e8ea;
+  padding: 16px 12px 12px 12px;
+  border-radius: 4px;
+  color: #485b6d;
+  max-width: 520px;
+}
+.message-list .message-item .user .bg-pic .bg-pic-content {
+  border-radius: 50%;
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+}
+.message-list .message-item .user .bg-pic img {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  display: inline-block;
+}
+.no_session {
+  text-align: center;
+}
+.send_box {
+  position: absolute;
+  font-size: 13px;
+  bottom: 0;
+  height: 210px;
+  left: 0;
+  right: 0;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-orient: vertical;
+  -webkit-box-direction: normal;
+  -webkit-flex-direction: column;
+  -moz-box-orient: vertical;
+  -moz-box-direction: normal;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.send_box .inputer_actions {
+  padding: 10px;
+  background: #f5f5f5;
+}
+
+.send_box .inputer_actions .face {
+  float: left;
+  margin: 0;
+  height: auto;
+}
+.send_box .inputer_actions .face_icon {
+  width: 24px;
+  height: 22px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -478px -314px;
+  display: inline-block;
+  margin-right: 22px;
+  cursor: pointer;
+}
+.send_box .inputer_actions .picture_icon {
+  width: 28px;
+  height: 24px;
+  background: url(http://jk.kuyicloud.com/static/images/ico.png) no-repeat -508px -314px;
+  display: inline-block;
+  margin-right: 22px;
+  cursor: pointer;
+}
+.inputer-area {
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  margin: 2px;
+  overflow: hidden;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-direction: normal;
+  -webkit-box-orient: vertical;
+  -webkit-flex-direction: column;
+  -moz-flex-direction: column;
+  -ms-flex-direction: column;
+  flex-direction: column;
+}
+.inputer-area .message-textarea {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -moz-flex;
+  display: -ms-flexbox;
+  display: -moz-box;
+  display: flex;
+  -webkit-box-flex: 1;
+  -webkit-flex: 1;
+  -moz-box-flex: 1;
+  -moz-flex: 1;
+  -ms-flex: 1;
+  flex: 1;
+  width: auto;
+  height: 100%;
+  resize: none;
+  margin: 0;
+  padding: 9px 4px;
+  font-size: 14px;
+  line-height: 1.5em;
+  border: none;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 0;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  padding: 0 9px 4px;
+}
+.send_box .send_box_btn {
+  position: absolute;
+  bottom: 26px;
+  right: 40px;
+}
+.send_box .send_box_btn .send_btn {
+  background: #58a2ec;
+  color: #fff;
+  padding: 12px 55px;
+  border-radius: 4px;
+  border: none;
+  font-size: 14px;
+}
+/*
+To change this license header, choose License Headers in Project Properties.
+To change this template file, choose Tools | Templates
+and open the template in the editor.
+*/
+/*
+    Created on : 2015-7-6, 15:55:30
+    Author     : peakerdong
+*/
+
+#login {
+    display: block;
+    margin: 150px auto;
+    text-align: center;
+}
+
+.aio {
+    display: none;
+    width: 734px;
+    border: 1px black solid;
+    padding: 0px;
+    background: white;
+    margin: 20px auto;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.titlebar {
+    height: 82px;
+    background: #5c95b3;
+}
+
+.titlebar #p_my_face {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border: 1px white solid;
+    margin: 10px;
+    float: left;
+}
+
+.titlebar #t_my_name {
+    position: relative;
+    top: 10px;
+    left: 10px;
+    float: left;
+    font-size: 20px;
+    color: white;
+}
+
+.titlebar #t_my_menu {
+    width: 150px;
+    position: relative;
+    top: 5px;
+    right: 5px;
+    float: right;
+
+}
+
+.sesspart {
+    clear: both;
+    float: left;
+    width: 208px;
+    height: 535px;
+    background: #d7eaf3;
+}
+
+.accordion {
+    margin-bottom: 18px;
+}
+
+.accordion-group {
+    margin-bottom: 2px;
+    border: 1px solid #e5e5e5;
+    -webkit-border-radius: 4px;
+    -moz-border-radius: 4px;
+    border-radius: 4px;
+}
+
+.accordion-heading {
+    border-bottom: 0;
+    background-color: bisque;
+}
+
+.accordion-heading .accordion-toggle {
+    display: block;
+    padding: 8px 15px;
+    font-size: medium;
+}
+
+.accordion-inner {
+    padding: 9px 15px;
+    border-top: 1px solid #e5e5e5;
+}
+.sesslist-recent {
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+}
+
+
+.sesslist {
+    /* height: 400px; */
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    overflow: auto;
+}
+
+.sesslist-group {
+    /* height: 400px; */
+    height: 450px;
+    background: #f5f5f5;
+    border-width: 0px 1px 0px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    overflow: auto;
+}
+
+.sessinfo {
+    clear: both;
+    height: 50px;
+    border-width: 0px 0px 1px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+}
+
+.sessinfo-sel {
+    clear: both;
+    height: 50px;
+    border-width: 0px 0px 1px 0px;
+    border-color: #d5d6d7;
+    border-style: solid;
+    background: #d7eaf3;
+}
+
+.face {
+    float: left;
+    width: 40px;
+    height: 40px;
+    margin: 5px 5px 5px 10px;
+}
+
+.name {
+    float: left;
+    height: 20px;
+    text-indent: 2px;
+    font-size: 12px;
+    color: #1f1f1f;
+    margin: 15px 0 0 0;
+}
+
+.badge {
+    display: none;
+    float: right;
+    margin: 18px 0 0 0;
+    width: 32px;
+    height: 20px;
+    background: #f00000;
+    color: white;
+    text-align: center;
+    -webkit-border-radius: 10px;
+    -moz-border-radius: 10px;
+    border-radius: 10px;
+}
+
+.badge span {
+    position: relative;
+    top: 1px;
+    font-size: 10px;
+}
+
+.chatpart {
+    float: right;
+    width: 526px;
+    border: 0px red solid;
+    background: #d7eaf3;
+    margin-top: -535px;
+}
+
+.msgflow {
+    width: 525px;
+    height: 380px;
+    border: 1px rgb(181, 178, 178) solid;
+    padding: 20px 6px 0 6px;
+    background: #f5f5f5;
+    overflow: auto;
+}
+.msgflow .onemsg{position:relative;}
+.msgflow .onemsg .msghead {
+    color: green;
+    line-height: 12px;
+    font-size: 12px;
+}
+
+.msgflow .onemsg .msgbody {
+    margin: 0 0 0 18px;
+    line-height: 13px;
+    font-size: 14px;
+}
+
+.msgflow .msgbody img {
+    max-width: 500px;
+}
+
+.editbar {
+    width: 526px;
+    height: 25px;
+}
+
+.chat02_title_btn {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') no-repeat 0 0;
+    cursor: pointer;
+    float: left;
+    display: block;
+    width: 15px;
+    height: 15px;
+    margin: 5px 6px;
+}
+
+.ctb01 {
+    background-position: 0 -90px;
+    margin-left: 18px;
+    _margin-left: 8px;
+}
+
+.ctb03 {
+    background-position: 0 -152px;
+}
+
+.ctb02 {
+    background-position: 0 -457px;
+}
+
+.ctb05 {
+    background-position: 0 -217px;
+}
+
+.ctb04 {
+    background-position: 0 -543px;
+}
+
+.wl_faces_box {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_bg.png') repeat 0 0;
+    position: relative;
+    /*position: absolute;*/
+    width: 428px;
+    height: 225px;
+    bottom: 290px;
+    left: -42px;
+    display: none;
+}
+
+.wl_faces_content {
+    background: #fff;
+    border: 1px #ccc solid;
+    width: 417px;
+    height: 216px;
+    margin: 3px 4px;
+}
+
+.wl_faces_content .title {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_bg.jpg') repeat-x 0 0;
+    height: 40px;
+    position: relative;
+}
+
+.wl_faces_content .title ul {
+
+}
+
+.wl_faces_content .title ul li {
+    position: absolute;
+    display: block;
+}
+
+.wl_faces_content .title ul li.title_name {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/wlf_title_btn.jpg') no-repeat 0 0;
+    width: 82px;
+    height: 30px;
+    bottom: 0;
+    _bottom: -2px;
+    left: 15px;
+    text-align: center;
+    line-height: 32px;
+    font-weight: bold;
+    color: #333;
+}
+
+.wl_faces_content .title ul li.wl_faces_close {
+    right: 8px;
+    top: 15px;
+}
+
+.wl_faces_content .title ul li.wl_faces_close span {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/icon.png') repeat-x 0 0;
+    cursor: pointer;
+    display: block;
+    width: 15px;
+    height: 15px;
+}
+
+.wl_faces_main {
+
+}
+
+.wl_faces_main ul {
+    margin: 12px 12px;
+    padding: 0px;
+    overflow: hidden;
+    border-top: 1px #CCC solid;
+    border-left: 1px #CCC solid;
+    list-style: none;
+    width: 393px;
+}
+
+.wl_faces_main ul li {
+    float: left;
+    border-right: 1px #CCC solid;
+    border-bottom: 1px #CCC solid;
+    height: 28px;
+    width: 28px;
+    margin: 0px 0px 0px 0px;
+    padding: 4px 2px;
+    text-align: center;
+}
+
+.wl_faces_main ul li img {
+    width: 24px;
+    height: 24px;
+}
+
+.wlf_icon {
+    background: url('http://jk.kuyicloud.com/static/plugins/tencentim/IMSDK_V1.7/img/layer_arrow.png') no-repeat 0 0;
+    position: absolute;
+    width: 22px;
+    height: 9px;
+    bottom: -4px;
+    _bottom: -11px;
+    left: 61px;
+}
+
+.msgedit {
+    width: 525px;
+    height: 100px;
+    border: 1px rgb(181, 178, 178) solid;
+    background: #f5f5f5;
+    padding: 6px 6px;
+    line-height: 1.5;
+}
+
+.sendbar {
+    width: 526px;
+    height: 30px;
+}
+
+.sendbtn {
+    float: right;
+    width: 80px;
+    margin-right: 10px;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.closebtn {
+    float: right;
+    width: 80px;
+    margin-right: 10px;
+    font: 10px/1.5 "微软雅黑";
+}
+
+.bottom {
+    clear: both;
+    height: 3px;
+    background: #d7eaf3;
+}
+
+#demo_type_desc {
+    color: red;
+}
+
+#myself_type_desc {
+    display: none;
+    color: red;
+}
+
+#qcloudLink {
+    color: blue;
+}
+
+#sdkAppIdDiv {
+    display: none;
+}
+
+#accountTypeDiv {
+    display: none;
+}
+
+.pic_thumb {
+    width: 200px;
+    height: 200px;
+}
+
+
+
+.spinner {
+    width: 60px;
+    text-align: center;
+    position: absolute;
+    right: 10px;
+    top: 32px;
+    text-align: right;
+}
+
+.spinner > div {
+  width: 6px;
+  height: 6px;
+  background-color: #333;
+
+  border-radius: 100%;
+  display: inline-block;
+  -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+  animation: sk-bouncedelay 1.4s infinite ease-in-out both;
+}
+
+.spinner .bounce1 {
+  -webkit-animation-delay: -0.32s;
+  animation-delay: -0.32s;
+}
+
+.spinner .bounce2 {
+  -webkit-animation-delay: -0.16s;
+  animation-delay: -0.16s;
+}
+
+@-webkit-keyframes sk-bouncedelay {
+  0%, 80%, 100% { -webkit-transform: scale(0) }
+  40% { -webkit-transform: scale(1.0) }
+}
+
+@keyframes sk-bouncedelay {
+  0%, 80%, 100% {
+    -webkit-transform: scale(0);
+    transform: scale(0);
+  } 40% {
+    -webkit-transform: scale(1.0);
+    transform: scale(1.0);
+  }
+}
+
+.headurlClass{
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+}
+
+.delChat{
+    color: red;
+    width: 50px;
+    padding: 16px 0;
+    float: right;
+    margin-right: 5px;
+}
+figure {
+  margin: 0;
+}
+</style>

src/scrm_pages/marketing_tool/activity_list.vue

 
     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

                     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

+<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

   <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">
             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>
 
 <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{
          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>