头像资源加载

3 years ago · e23cc32423
80 changed files with 1329 additions and 0 deletions
--- a/src/api/imgUtil.js
+++ b/src/api/imgUtil.js
@ -0,0 +1,150 @@
 import axios from '@/utils/request'
 import config from '@/common/config'
 var h1=require('../../static/images/head/1.png') 
 var h2=require('../../static/images/head/2.png')  
 var h3=require('../../static/images/head/3.png') 
 var h4=require('../../static/images/head/4.png') 
 var h5=require('../../static/images/head/5.png') 
 var h6=require('../../static/images/head/6.png') 
 var h7=require('../../static/images/head/7.png') 
 var h8=require('../../static/images/head/8.png') 
 var h9=require('../../static/images/head/9.png') 
 var h10=require('../../static/images/head/10.png') 
 var h11=require('../../static/images/head/11.png') 
 var h12=require('../../static/images/head/12.png') 
 var h13=require('../../static/images/head/13.png') 
 var h14=require('../../static/images/head/14.png') 
 var h15=require('../../static/images/head/15.png') 
 var h16=require('../../static/images/head/16.png') 
 var h17=require('../../static/images/head/17.png') 
 var h18=require('../../static/images/head/18.png') 
 var h19=require('../../static/images/head/19.png') 
 var h20=require('../../static/images/head/20.png')  
 var h21=require('../../static/images/head/21.png')  
 var h22=require('../../static/images/head/22.png')  
 var h23=require('../../static/images/head/23.png')  
 var h24=require('../../static/images/head/24.png')  
 var h25=require('../../static/images/head/25.png') 
 var h26=require('../../static/images/head/26.png')  
 var h27=require('../../static/images/head/27.png')  
 var h28=require('../../static/images/head/28.png')  
 var h29=require('../../static/images/head/29.png')  
 var h30=require('../../static/images/head/30.png')  
 var h31=require('../../static/images/head/31.png')  
 var h32=require('../../static/images/head/32.png')  
 var h33=require('../../static/images/head/33.png')  
 var h33=require('../../static/images/head/33.png')  
 var h33=require('../../static/images/head/33.png')  
 var h34=require('../../static/images/head/34.png')  
 var h35=require('../../static/images/head/35.png') 
 var h36=require('../../static/images/head/36.png')  
 var h37=require('../../static/images/head/37.png')  
 var h38=require('../../static/images/head/38.png')  
 var h39=require('../../static/images/head/39.png')  
 var h40=require('../../static/images/head/40.png')  
 var h41=require('../../static/images/head/41.png')   
 var h42=require('../../static/images/head/42.png')  
 var h43=require('../../static/images/head/43.png')  
 var h44=require('../../static/images/head/44.png')  
 var h45=require('../../static/images/head/45.png') 
 var h46=require('../../static/images/head/46.png')  
 var h47=require('../../static/images/head/47.png')  
 var h48=require('../../static/images/head/48.png')  
 var h49=require('../../static/images/head/49.png')  
 var h50=require('../../static/images/head/50.png')  
 var h51=require('../../static/images/head/51.png')  
 var h52=require('../../static/images/head/52.png')   
 var h53=require('../../static/images/head/53.png')  
 var h54=require('../../static/images/head/54.png')  
 var h55=require('../../static/images/head/55.png') 
 var h56=require('../../static/images/head/56.png')  
 var h57=require('../../static/images/head/57.png')  
 var h58=require('../../static/images/head/58.png')  
 var h59=require('../../static/images/head/59.png')  
 var h60=require('../../static/images/head/60.png')  
 var h61=require('../../static/images/head/61.png')  
 var h62=require('../../static/images/head/62.png')  
 var h63=require('../../static/images/head/63.png')  
 var h64=require('../../static/images/head/64.png')  
 var h65=require('../../static/images/head/65.png') 
 var h66=require('../../static/images/head/66.png')  
 var h67=require('../../static/images/head/67.png')  
 var h68=require('../../static/images/head/68.png')  
 var h69=require('../../static/images/head/69.png')  
 var h70=require('../../static/images/head/70.png')   
 var defaultMan=require('../../static/images/man.png')
 var noData=require('../../static/images/no-information.png') 
 var imgList=[ h1,h2,h3,h4,h5,h6,h7,h8,h9,h10,h11,h12,h13,h14,h15,h16,h17,h18,h19,h20,h21,h22,h23,h24,h25,h26,
 h27,h28,h29,h30,h31,h32,h33,h34,h35,h36,h37,h38,h39,h40,h41,h42,h43,h44,h45,h46,h47,h48,h49,h50,h51,h52,h53,h54,
 h55,h56,h57,h58,h59,h60,h61,h62,h63,h64,h64,h66,h67,h68,h69,h70
 ]
 export default {
  onImgError:function(userid,$event){
    let img = $event.srcElement;
    img.src = this.getDefHeadimg(userid)
    img.onerror = null; //防止闪图
  },
 /**
 * 对于给定的用户编号，返回一个固定的默认头像，用于用户未设置头像的情况下，给页面显示一个头像
 * @param {*} userid 
 * @returns 
 */
 getDefHeadimg:function(userid){  
  if(userid){
    var nums=0;
    var codes = userid.split('');
    codes.forEach(e=>{
      nums=nums+e.charCodeAt();
    })
    var cp=imgList[nums%imgList.length]
    return cp;
  }else{ 
    return defaultMan;
  }
 },
 /**
 * 通过用户编号组装请求用户头像的url
 * @param {*} userid 用户编号
 * @param {*} headimgurl 用户配置的头像地址
 * @param {*} rand false || true ,是否给url添加随机数，用于立即刷新头像，否则头像更新后，会被cdn缓存一段时间
 * @returns 
 */
 getHeadimgurl:function (userid,headimgurl,rand) { 
  if(headimgurl){
    return headimgurl;
  }else{
    var authorStr=sessionStorage.getItem('authorMsg_' + userid) 
    if(authorStr){
      var author=JSON.parse(authorStr)
      if(author && author.headimgurl){
        return author.headimgurl
      }
    }
  }
  if(rand){
    var dateTime=new Date().getTime();
    return `/api/m1/arc/${dateTime}/arc/image/user/${userid}.jpg`
  }else{
    return `/api/m1/arc/arc/image/user/${userid}.jpg`
  }
 },
 noDataImg:function(){
  return noData;
 }
 }
--- a/src/api/xm/core/xmMenuComment.js
+++ b/src/api/xm/core/xmMenuComment.js
@ -0,0 +1,44 @@
 import axios from '@/utils/request'
 import { getDicts,initSimpleDicts,initComplexDicts } from '@/api/mdp/meta/item';//字典表
 import config from '@/common/config'
 let base = config.getCoreBasePath();
 /**-------------------------与后端通讯接口------------------请写在下面-------------------------------------------- */
 /**
 * 档案评论表
 *1    默认只开放普通查询，所有查询，只要上传	 分页参数 {pageNum:当前页码从1开始,pageSize:每页记录数,total:总记录【数如果是0后台会自动计算总记录数非0不会自动计算】}，后台都会自动按分页查询 其它 api用到再打开，没用到的api请注释掉，
 *2 查询、新增、修改的参数格式  params={id:'主键 主键',userid:'评论人',username:'评论人姓名',star:'星级',cdate:'时间',menuId:'需求编号',pid:'上级评论',ups:'点赞数量',isShow:'是否显示0否1是',toUserid:'回复用户编号',toUsername:'回复用户名',lvl:'层级0,1,2,3,4',context:'评论内容',branchId:'机构编号',ip:'ip地址',cityId:'城市编号',cityName:'城市名称',status:'状态0未审核，1已审核，3审核不通过',childNums:'儿子节点数量'}
 **/
 //普通查询 条件之间and关系  
 export const listXmMenuComment = params => { return axios.get(`${base}/xm/core/xmMenuComment/list`, { params: params }); };
 //删除一条档案评论表 params={id:'主键 主键'}
 export const delXmMenuComment = params => { return axios.post(`${base}/xm/core/xmMenuComment/del`,params); };
 //批量删除档案评论表  params=[{id:'主键 主键'}]
 export const batchDelXmMenuComment = params => { return axios.post(`${base}/xm/core/xmMenuComment/batchDel`, params); };
 //修改一条档案评论表记录
 export const editXmMenuComment = params => { return axios.post(`${base}/xm/core/xmMenuComment/edit`, params); };
 //新增一条档案评论表
 export const addXmMenuComment = params => { return axios.post(`${base}/xm/core/xmMenuComment/add`, params); };
 //批量修改某些字段
 export const editSomeFieldsXmMenuComment = params => { return axios.post(`${base}/xm/core/xmMenuComment/editSomeFields`, params); };
 /**-------------------------前端mng|add|edit界面公共函数---------------请写在下面----------------------------------------------- */
 //初始化页面上的字典
 export const initDicts = (that) => {
 var itemCodes=[];//在此添加要加载的字典 如['sex','grade','lvl']
 if(itemCodes.length>0){
    initSimpleDicts('all',itemCodes).then(res=>{
        Object.assign(that.dicts,res.data.data)
    });
 }
 }; 
--- a/src/views/xm/core/xmMenuComment/XmMenuCommentEdit.vue
+++ b/src/views/xm/core/xmMenuComment/XmMenuCommentEdit.vue
@ -0,0 +1,204 @@
 <template>
 	<section  class="page-container padding">
 	    <el-row class="page-header">
 	    </el-row>
 		<el-row class="page-main" :style="{overflowX:'auto',height:maxTableHeight+'px'}" ref="table">
 		<!--编辑界面 XmMenuComment 档案评论表--> 
 			<el-form :model="editForm"  label-width="120px" :rules="editFormRules" ref="editFormRef">
 				<el-form-item label="主键" prop="id">
 					<el-input v-model="editForm.id" placeholder="主键" :maxlength="50" @change="editSomeFields(editForm,'id',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="评论人" prop="userid">
 					<el-input v-model="editForm.userid" placeholder="评论人" :maxlength="50" @change="editSomeFields(editForm,'userid',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="评论人姓名" prop="username">
 					<el-input v-model="editForm.username" placeholder="评论人姓名" :maxlength="50" @change="editSomeFields(editForm,'username',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="星级" prop="star">
 					<el-input v-model="editForm.star" placeholder="星级" :maxlength="1" @change="editSomeFields(editForm,'star',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="时间" prop="cdate">
 					<el-date-picker type="date" placeholder="选择日期" v-model="editForm.cdate"  value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd"></el-date-picker>
 				</el-form-item> 
 				<el-form-item label="需求编号" prop="menuId">
 					<el-input v-model="editForm.menuId" placeholder="需求编号" :maxlength="50" @change="editSomeFields(editForm,'menuId',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="上级评论" prop="pid">
 					<el-input v-model="editForm.pid" placeholder="上级评论" :maxlength="50" @change="editSomeFields(editForm,'pid',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="点赞数量" prop="ups">
 					<el-input v-model="editForm.ups" placeholder="点赞数量" :maxlength="10"></el-input>
 				</el-form-item> 
 				<el-form-item label="是否显示0否1是" prop="isShow">
 					<el-input v-model="editForm.isShow" placeholder="是否显示0否1是" :maxlength="1" @change="editSomeFields(editForm,'isShow',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="回复用户编号" prop="toUserid">
 					<el-input v-model="editForm.toUserid" placeholder="回复用户编号" :maxlength="50" @change="editSomeFields(editForm,'toUserid',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="回复用户名" prop="toUsername">
 					<el-input v-model="editForm.toUsername" placeholder="回复用户名" :maxlength="50" @change="editSomeFields(editForm,'toUsername',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="层级0,1,2,3,4" prop="lvl">
 					<el-input v-model="editForm.lvl" placeholder="层级0,1,2,3,4" :maxlength="1" @change="editSomeFields(editForm,'lvl',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="评论内容" prop="context">
 					<el-input v-model="editForm.context" placeholder="评论内容" :maxlength="65535" @change="editSomeFields(editForm,'context',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="机构编号" prop="branchId">
 					<el-input v-model="editForm.branchId" placeholder="机构编号" :maxlength="50" @change="editSomeFields(editForm,'branchId',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="ip地址" prop="ip">
 					<el-input v-model="editForm.ip" placeholder="ip地址" :maxlength="50" @change="editSomeFields(editForm,'ip',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="城市编号" prop="cityId">
 					<el-input v-model="editForm.cityId" placeholder="城市编号" :maxlength="50" @change="editSomeFields(editForm,'cityId',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="城市名称" prop="cityName">
 					<el-input v-model="editForm.cityName" placeholder="城市名称" :maxlength="50" @change="editSomeFields(editForm,'cityName',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="状态0未审核，1已审核，3审核不通过" prop="status">
 					<el-input v-model="editForm.status" placeholder="状态0未审核，1已审核，3审核不通过" :maxlength="1" @change="editSomeFields(editForm,'status',$event)"></el-input>
 				</el-form-item> 
 				<el-form-item label="儿子节点数量" prop="childNums">
 					<el-input-number v-model="editForm.childNums" :min="0" :max="200"></el-input-number>
 				</el-form-item> 
 			</el-form>
 		</el-row>
 		<el-row v-if="opType=='add'" class="page-bottom bottom-fixed">
 		    <el-button @click.native="handleCancel">取消</el-button>
            <el-button v-loading="load.edit" type="primary" @click.native="saveSubmit" :disabled="load.edit==true">提交</el-button>
 		</el-row>
 	</section>
 </template>
 <script>
 	import util from '@/common/js/util';//全局公共库
 	import config from "@/common/config"; //全局公共库import
 	import { initDicts, addXmMenuComment,editXmMenuComment,editSomeFieldsXmMenuComment } from '@/api/xm/core/xmMenuComment';
 	import { mapGetters } from 'vuex'
 	export default {
 	    name:'xmMenuCommentEdit',
 	    components: {
        },
 		computed: {
 		    ...mapGetters([ 'userInfo'  ]),
 		},
 		props:['xmMenuComment','visible','opType'],
 		watch: {
 	      'xmMenuComment':function( xmMenuComment ) {
 	        if(xmMenuComment){
 	            this.editForm = {...xmMenuComment};
 	        }
 	      },
 	      'visible':function(visible) { 
 	      	if(visible==true){
 	      		this.initData()
 	      	}
 	      } 
 	    },
 		data() {
 			return {
 			    currOpType:'add',//add/edit
 				load:{ list: false, edit: false, del: false, add: false },//查询中...
 				dicts:{},//下拉选择框的所有静态数据 params={categoryId:'all',itemCodes:['sex']} 返回结果 {sex: [{id:'1',name:'男'},{id:'2',name:'女'}]}
 				editFormRules: {
 					id: [
 						//{ required: true, message: '主键不能为空', trigger: 'blur' }
 					]
 				},
 				editForm: {
 					id:'',userid:'',username:'',star:'',cdate:'',menuId:'',pid:'',ups:'',isShow:'',toUserid:'',toUsername:'',lvl:'',context:'',branchId:'',ip:'',cityId:'',cityName:'',status:'',childNums:''
 				},
                maxTableHeight:300,
 			}//end return
 		},//end data
 		methods: {
 		    ...util,
 			// 取消按钮点击 父组件监听@cancel="editFormVisible=false" 监听
 			handleCancel:function(){
 				this.$refs['editFormRef'].resetFields();
 				this.$emit('cancel');
 			},
 			//新增、编辑提交XmMenuComment 档案评论表父组件监听@submit="afterEditSubmit"
 			saveSubmit: function () {
 				this.$refs.editFormRef.validate((valid) => {
 					if (valid) {
 						this.$confirm('确认提交吗？', '提示', {}).then(() => { 
 							this.load.edit=true
 							let params = Object.assign({}, this.editForm);
 							var func=addXmMenuComment
 							if(this.currOpType=='edit'){
 							    func=editXmMenuComment
 							}
 							func(params).then((res) => {
                                this.load.edit=false
                                var tips=res.data.tips;
                                if(tips.isOk){
                                    this.editForm=res.data.data
                                    this.initData()
                                    this.currOpType="edit";
                                    this.$emit('submit');//  @submit="afterAddSubmit"
                                }
                                this.$notify({ position:'bottom-left',showClose:true, message: tips.msg, type: tips.isOk?'success':'error' });
                            }).catch( err =>this.load.edit=false);
 						});
 					}else{
 					    this.$notify({ showClose:true, message: "表单验证不通过，请修改表单数据再提交", type: 'error' });
 					}
 				});
 			},
 			initData: function(){
 			    this.currOpType=this.opType
 			    if(this.xmMenuComment){
                    this.editForm = Object.assign({},this.xmMenuComment);
                }
                if(this.opType=='edit'){
                }else{
                }
                this.editFormBak={...this.editForm}
            },
            editSomeFields(row,fieldName,$event){
                if(this.opType=='add'){
                    return;
                }
                let params={};
                params['ids']=[row].map(i=>i.id)
                params[fieldName]=$event
                var func = editSomeFieldsXmMenuComment
                func(params).then(res=>{
                  let tips = res.data.tips;
                  if(tips.isOk){
                    this.editFormBak=[...this.editForm]
                  }else{
                    Object.assign(this.editForm,this.editFormBak)
                    this.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'})
                  }
                }).catch((e)=>Object.assign(this.editForm,this.editFormBak))
            },
 		},//end method
 		mounted() {
 		    this.$nextTick(() => {
                initDicts(this);
                this.initData()
                this.maxTableHeight = util.calcTableMaxHeight(this.$refs.table.$el)
            });
 		}
 	}
 </script>
 <style scoped>
 </style>
--- a/src/views/xm/core/xmMenuComment/XmMenuCommentMng.vue
+++ b/src/views/xm/core/xmMenuComment/XmMenuCommentMng.vue
@ -0,0 +1,372 @@
 <template>
 	<section class="page-container border padding">
 		<el-row>
 			<el-input v-model="filters.key" style="width: 20%;" placeholder="模糊查询"></el-input>
 			<el-button v-loading="load.list" :disabled="load.list==true" @click="searchXmMenuComments" icon="el-icon-search">查询</el-button>
 			<span style="float:right;">
 			    <el-button type="primary" @click="showAdd" icon="el-icon-plus" plain> </el-button>
 			    <el-button type="danger" v-loading="load.del" @click="batchDel" :disabled="this.sels.length===0 || load.del==true" icon="el-icon-delete" plain></el-button>
 		    </span>
 		</el-row>
 		<el-row class="padding-top">
 			<!--列表 XmMenuComment 档案评论表-->
 			<el-table ref="xmMenuCommentTable" :data="xmMenuComments" :height="maxTableHeight" @sort-change="sortChange" highlight-current-row v-loading="load.list" border @selection-change="selsChange" @row-click="rowClick" style="width: 100%;">
 				<el-table-column  type="selection" width="55" show-overflow-tooltip fixed="left"></el-table-column>
 				<el-table-column sortable type="index" width="55" show-overflow-tooltip  fixed="left"></el-table-column>
 				<!--
 				<el-table-column sortable prop="username" width="55" show-overflow-tooltip  fixed="left">
 				    <span class="cell-text">  {{scope.row.username}}}  </span>
 				    <span class="cell-bar"><el-input style="display:inline;" v-model="scope.row.username" placeholder="" @change="editSomeFields(scope.row,'username',$event)" :maxlength="22"></el-input></span>
 				</el-table-column>
 				-->
 				<el-table-column prop="id" label="主键" min-width="120" show-overflow-tooltip  fixed="left"></el-table-column>
 				<el-table-column prop="userid" label="评论人" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.userid}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="username" label="评论人姓名" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.username}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="star" label="星级" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.star}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="cdate" label="时间" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.cdate}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="menuId" label="需求编号" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.menuId}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="pid" label="上级评论" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.pid}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="ups" label="点赞数量" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.ups}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="isShow" label="是否显示0否1是" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.isShow}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="toUserid" label="回复用户编号" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.toUserid}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="toUsername" label="回复用户名" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.toUsername}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="lvl" label="层级0,1,2,3,4" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.lvl}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="context" label="评论内容" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.context}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="branchId" label="机构编号" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.branchId}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="ip" label="ip地址" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.ip}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="cityId" label="城市编号" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.cityId}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="cityName" label="城市名称" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.cityName}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="status" label="状态0未审核，1已审核，3审核不通过" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.status}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column prop="childNums" label="儿子节点数量" min-width="120" show-overflow-tooltip>
 				    <template slot-scope="scope">
 				        <span> {{scope.row.childNums}} </span>
                    </template>
 				</el-table-column>
 				<el-table-column label="操作" width="180" fixed="right">
 				    <template scope="scope">
 				        <el-button type="primary" @click="showEdit( scope.row,scope.$index)" icon="el-icon-edit"  plain></el-button>
 				        <el-button type="danger" @click="handleDel(scope.row,scope.$index)" icon="el-icon-delete"  plain></el-button>
 				    </template>
 				</el-table-column>
 			</el-table>
 			<el-pagination  layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange" @size-change="handleSizeChange" :page-sizes="[10,20, 50, 100, 500]" :current-page="pageInfo.pageNum" :page-size="pageInfo.pageSize"  :total="pageInfo.total" style="float:right;"></el-pagination>
 		</el-row>
 		<el-row>
 			<!--编辑 XmMenuComment 档案评论表界面-->
 			<el-drawer title="编辑档案评论表" :visible.sync="editFormVisible"  size="60%"  append-to-body   :close-on-click-modal="false">
 			    <xm-menu-comment-edit op-type="edit" :xm-menu-comment="editForm" :visible="editFormVisible" @cancel="editFormVisible=false" @submit="afterEditSubmit"></xm-menu-comment-edit>
 			</el-drawer>
 			<!--新增 XmMenuComment 档案评论表界面-->
 			<el-drawer title="新增档案评论表" :visible.sync="addFormVisible"  size="60%"  append-to-body  :close-on-click-modal="false">
 			    <xm-menu-comment-edit op-type="add" :visible="addFormVisible" @cancel="addFormVisible=false" @submit="afterAddSubmit"></xm-menu-comment-edit>
 			</el-drawer>
 	    </el-row>
 	</section>
 </template>
 <script>
 import util from '@/common/js/util';//全局公共库
 import config from '@/common/config';//全局公共库
 import { initDicts,listXmMenuComment, delXmMenuComment, batchDelXmMenuComment,editSomeFieldsXmMenuComment } from '@/api/xm/core/xmMenuComment';
 import  XmMenuCommentEdit from './XmMenuCommentEdit';//新增修改界面
 import { mapGetters } from 'vuex'
 export default {
    name:'xmMenuCommentMng',
    components: {
        XmMenuCommentEdit,
    },
    props:['visible'],
    computed: {
        ...mapGetters(['userInfo']),
    },
    watch:{
        visible(val){
            if(val==true){
                this.initData();
                this.searchXmMenuComments()
            }
        }
    },
    data() {
        return {
            filters: {
                key: ''
            },
            xmMenuComments: [],//查询结果
            pageInfo:{//分页数据
                total:0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
                pageSize:10,//每页数据
                count:false,//是否需要重新计算总记录数
                pageNum:1,//当前页码、从1开始计算
                orderFields:[],//排序列 如 ['sex','student_id']，必须为数据库字段
                orderDirs:[]//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
            },
            load:{ list: false, edit: false, del: false, add: false },//查询中...
            sels: [],//列表选中数据
            dicts:{
                //sex: [{id:'1',name:'男'},{id:'2',name:'女'}]
            },//下拉选择框的所有静态数据 params={categoryId:'all',itemCodes:['sex']} 返回结果 {sex: [{id:'1',name:'男'},{id:'2',name:'女'}]}
            addFormVisible: false,//新增xmMenuComment界面是否显示
            addForm: {
                id:'',userid:'',username:'',star:'',cdate:'',menuId:'',pid:'',ups:'',isShow:'',toUserid:'',toUsername:'',lvl:'',context:'',branchId:'',ip:'',cityId:'',cityName:'',status:'',childNums:''
            },
            editFormVisible: false,//编辑界面是否显示
            editForm: {
                id:'',userid:'',username:'',star:'',cdate:'',menuId:'',pid:'',ups:'',isShow:'',toUserid:'',toUsername:'',lvl:'',context:'',branchId:'',ip:'',cityId:'',cityName:'',status:'',childNums:''
            },
            maxTableHeight:300,
        }
    },//end data
    methods: {
        ...util,
        handleSizeChange(pageSize) {
            this.pageInfo.pageSize=pageSize;
            this.getXmMenuComments();
        },
        handleCurrentChange(pageNum) {
            this.pageInfo.pageNum = pageNum;
            this.getXmMenuComments();
        },
        // 表格排序 obj.order=ascending/descending,需转化为 asc/desc ; obj.prop=表格中的排序字段,字段驼峰命名
        sortChange( obj ){
            if(obj.order==null){
                this.pageInfo.orderFields=[];
                this.pageInfo.orderDirs=[];
            }else{
                var dir='asc';
                if(obj.order=='ascending'){
                    dir='asc'
                }else{
                    dir='desc';
                }
                this.pageInfo.orderFields=[util.toLine(obj.prop)];
                this.pageInfo.orderDirs=[dir];
            }
            this.getXmMenuComments();
        },
        searchXmMenuComments(){
             this.pageInfo.count=true;
             this.getXmMenuComments();
        },
        //获取列表 XmMenuComment 档案评论表
        getXmMenuComments() {
            let params = {
                pageSize: this.pageInfo.pageSize,
                pageNum: this.pageInfo.pageNum,
                total: this.pageInfo.total,
                count:this.pageInfo.count
            };
            if(this.pageInfo.orderFields!=null && this.pageInfo.orderFields.length>0){
                let orderBys=[];
                for(var i=0;i<this.pageInfo.orderFields.length;i++){
                    orderBys.push(this.pageInfo.orderFields[i]+" "+this.pageInfo.orderDirs[i])
                }
                params.orderBy= orderBys.join(",")
            }
            if(this.filters.key){
                params.key=this.filters.key
            }
            this.load.list = true;
            listXmMenuComment(params).then((res) => {
                var tips=res.data.tips;
                if(tips.isOk){
                    this.pageInfo.total = res.data.total;
                    this.pageInfo.count=false;
                    this.xmMenuComments = res.data.data;
                }else{
                    this.$notify({ position:'bottom-left',showClose:true, message: tips.msg, type: 'error' });
                }
                this.load.list = false;
            }).catch( err => this.load.list = false );
        },
        //显示编辑界面 XmMenuComment 档案评论表
        showEdit: function ( row,index ) {
            this.editFormVisible = true;
            this.editForm = Object.assign({}, row);
        },
        //显示新增界面 XmMenuComment 档案评论表
        showAdd: function () {
            this.addFormVisible = true;
            //this.addForm=Object.assign({}, this.editForm);
        },
        afterAddSubmit(){
            this.addFormVisible=false;
            this.pageInfo.count=true;
            this.getXmMenuComments();
        },
        afterEditSubmit(){
            this.editFormVisible=false;
        },
        //选择行xmMenuComment
        selsChange: function (sels) {
            this.sels = sels;
        },
        //删除xmMenuComment
        handleDel: function (row,index) {
            this.$confirm('确认删除该记录吗?', '提示', {
                type: 'warning'
            }).then(() => {
                this.load.del=true;
                let params = {  id:row.id };
                delXmMenuComment(params).then((res) => {
                    this.load.del=false;
                    var tips=res.data.tips;
                    if(tips.isOk){
                        this.searchXmMenuComments();
                    }
                    this.$notify({ position:'bottom-left', showClose:true, message: tips.msg, type: tips.isOk?'success':'error' });
                }).catch( err  => this.load.del=false );
            });
        },
        //批量删除xmMenuComment
        batchDel: function () {
            if(this.sels.length<=0){
                return;
            }
            var params=this.sels.map(i=>{
                return { id:i.id}
            })
            this.$confirm('确认删除选中记录吗？', '提示', {
                type: 'warning'
            }).then(() => {
                this.load.del=true;
                batchDelXmMenuComment(params).then((res) => {
                    this.load.del=false;
                    var tips=res.data.tips;
                    if( tips.isOk ){
                        this.searchXmMenuComments();
                    }
                    this.$notify({ position:'bottom-left',showClose:true, message: tips.msg, type: tips.isOk?'success':'error'});
                }).catch( err  => this.load.del=false );
            });
        },
      editSomeFields(row,fieldName,$event){
        let params={};
        if(this.sels.length>0){
          if(!this.sels.some(k=> k.id==row.id)){
            this.$notify({position:'bottom-left',showClose:true,message:'请编辑选中的行',type:'warning'})
            Object.assign(this.editForm,this.editFormBak)
            return;
          }
            params['ids']=this.sels.map(i=>i.id)
        }else{
            params['ids']=[row].map(i=>i.id)
        }
        params[fieldName]=$event
        var func = editSomeFieldsXmMenuComment
        func(params).then(res=>{
          let tips = res.data.tips;
          if(tips.isOk){
            if(this.sels.length>0){
                this.searchXmMenuComments();
            }
            this.editFormBak=[...this.editForm]
          }else{
            Object.assign(this.editForm,this.editFormBak)
            this.$notify({position:'bottom-left',showClose:true,message:tips.msg,type:tips.isOk?'success':'error'})
          }
        }).catch((e)=>Object.assign(this.editForm,this.editFormBak))
      },
        rowClick: function(row, event, column){
            this.editForm=row
            this.editFormBak={...row};
            this.$emit('row-click',row, event, column);//  @row-click="rowClick"
        },
        initData: function(){
        },
    },//end methods
    mounted() {
        this.$nextTick(() => {
            initDicts(this);
            this.initData()
            this.searchXmMenuComments();
            this.maxTableHeight = util.calcTableMaxHeight(this.$refs.xmMenuCommentTable.$el)
        });
    }
 }
 </script>
 <style scoped>
 </style>
--- a/src/views/xm/core/xmMenuComment/comment-area.vue
+++ b/src/views/xm/core/xmMenuComment/comment-area.vue
@ -0,0 +1,233 @@
 <template>
  <div class="comment-box">
    <div class="w-box">
      <div class="edit">
        <img :src="getHeadimgurl(userInfo.userid,userInfo.headimgurl)" class="avatar" @error="onImgError(userInfo.userid,$event)" />
        <div class="input-box">
          <el-input type="textarea" :rows="8" placeholder="请输入你的评论" v-model="commentTxt"> </el-input>
        </div>
      </div>
      <div class="bottom-btns">
        <img src="../../../../../static/images/expression.png" class="expression" />
        <el-button type="primary" @click="publishComment">发表评论</el-button>
      </div>
    </div>
    <div v-if="commentsList.length > 0" class="comment-list">
      <comment-list v-for="(item, index) in commentsList" :self="item" :parent="item" :key="item.id" @getList="getCList">
      </comment-list>
      <div class="page-set">
        <el-pagination layout="total, sizes, prev, pager, next" @current-change="handleCurrentChange"
        @size-change="handleSizeChange" :page-sizes="[10, 20, 50, 100, 500]" :current-page="pageInfo.pageNum"
        :page-size="pageInfo.pageSize" :total="pageInfo.total"></el-pagination>
      </div>
    </div>
    <div v-else class="no-msg">
      <img src="../../../../../static/images/no-comment.png" class="no-pic" />
      <span>当前文章暂无评论 ~~</span>
    </div>
  </div>
 </template>
 <script>
 import { initDicts,listXmMenuComment, delXmMenuComment, batchDelXmMenuComment,editSomeFieldsXmMenuComment } from '@/api/xm/core/xmMenuComment';
 import commentList from './comment-list.vue';
 import { mapGetters } from 'vuex';
 import imgUtil from '@/api/imgUtil.js';
 export default {
  name: 'commentArea',
  props: ['targetId'],
  components: {
    commentList,
  },
  computed: {
    ...mapGetters(['userInfo']),
  },
  data() {
    return {
      avatarUrl: '',
      commentTxt: '',
      commentsList: [],
      pageInfo: {//分页数据
        total: 0,//服务器端收到0时，会自动计算总记录数，如果上传>0的不自动计算。
        pageSize: 10,//每页数据
        count: false,//是否需要重新计算总记录数
        pageNum: 1,//当前页码、从1开始计算
        orderFields: ['CREATE_DATE'],//排序列 如 ['sex','student_id']，必须为数据库字段
        orderDirs: ['desc']//升序 asc,降序desc 如 性别 升序、学生编号降序 ['asc','desc']
      },
    };
  },
  methods: {
    ...imgUtil,
    handleSizeChange(pageSize) {
      this.pageInfo.pageSize = pageSize;
      this.getCList();
    },
    handleCurrentChange(pageNum) {
      this.pageInfo.pageNum = pageNum;
      this.getCList();
    }, 
    // 格式化评论数据
    commentListFormat() {
      this.commentsList.forEach((item) => {
        this.$set(item, 'childList', []);
        // 将回复该评论的评论放入childList中
        let arr = this.commentsList.filter((i) => i.pcommentId === item.id);
        if (arr.length > 0) {
          item.childList = arr;
        }
      });
      // 过滤出最高级
      this.commentsList = this.commentsList.filter((item) => item.pcommentId === null);
    },
    publishComment() {
      if (this.userInfo.userid) {
        let params = {
          archiveId: this.targetId,
          context: this.commentTxt,
        };
        if (params.context) {
          addarchiveComment(params).then((res) => {
            let tips = res.data.tips;
            if (tips.isOk) {
              this.$message({
                type: 'success',
                message: '评论成功',
              });
              this.commentTxt = ''; 
              this.getCList();
            } else {
              this.$message({
                message: tips.msg,
                type: 'error',
              });
            }
          });
        } else {
          this.$message({
            type: 'error',
            message: '评论内容不能为空',
          });
        }
      } else {
        this.$message({
          type: 'error',
          message: '您还没有登录，请先登录！',
        });
      }
    },
    getCList() {
      if (!this.targetId) {
        return;
      }
      let params = {
        pageSize: this.pageInfo.pageSize,
        pageNum: this.pageInfo.pageNum,
        total: this.pageInfo.total,
        count: this.pageInfo.count,
        archiveId: this.targetId,
        pcommentIdIsNull: "1",
      };
      if (this.pageInfo.orderFields != null && this.pageInfo.orderFields.length > 0) {
        let orderBys = [];
        for (var i = 0; i < this.pageInfo.orderFields.length; i++) {
          orderBys.push(this.pageInfo.orderFields[i] + " " + this.pageInfo.orderDirs[i])
        }
        params.orderBy = orderBys.join(",")
      }
      getCommentList(params).then((res) => {
        let tips = res.data.tips;
        if (tips.isOk) {
          this.pageInfo.total = res.data.total;
          this.pageInfo.count = false;
          let list = res.data.data;
          this.commentsList = list;
          if (res.data.children && res.data.children.length > 0) {
            this.commentsList.push(...res.data.children)
          }
          this.commentListFormat();
        } else {
          this.$message({
            message: tips.msg,
            type: 'error',
          });
        }
      });
    },
  },
  mounted() { 
    this.getCList();
  },
 };
 </script>
 <style lang="scss" scoped>
 .comment-box {
  .w-box {
    margin-bottom: 50px;
    .edit {
      display: flex;
      .avatar {
        width: 50px;
        height: 50px;
        margin-right: 24px;
        border-radius: 50%;
        border: 1px solid #f1f1f1;
      }
      .input-box {
        width: calc(100% - 74px);
      }
    }
    .bottom-btns {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .expression {
        width: 22px;
        height: 22px;
        margin-right: 16px;
        border-radius: 50%;
        cursor: pointer;
      }
      .expression:hover {
        opacity: 0.8;
      }
    }
  }
  .comment-list {
    .page-set {
      text-align: right;
    }
  }
  .no-msg {
    padding: 40px 0;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 16px;
    color: #b5b5b5;
    .no-pic {
      width: 60px;
      height: 60px;
      margin-right: 12px;
    }
  }
 }
 </style>
--- a/src/views/xm/core/xmMenuComment/comment-list.vue
+++ b/src/views/xm/core/xmMenuComment/comment-list.vue
@ -0,0 +1,326 @@
 <template>
  <div class="comment-list-box">
    <div class="comment-list">
      <!-- 回复 -->
      <div v-if="self.pcommentId" class="list-item clear-bd">
        <div class="top-msg">
          <div class="info" @click="toPersonCenter(self)" style="cursor: pointer;">
            <img :src="getHeadimgurl(self.userid)" class="user-avatar" @error="onImgError(self.userid,$event)" />
            <span class="user-name">{{ self.username }} </span>
            <span class="time">{{ self.createDate }}</span>
          </div>
          <div class="btns">
            <span v-if="!self.isPraise" class="like"><img src="../../../../../static/images/like.png" class="like-logo" @click="praiseComment(self)" />{{ self.praiseSum }}</span>
            <span v-else class="like"><img src="../../../../../static/images/like-selected.png" class="like-logo" />{{ self.praiseSum }}</span>
            <span class="reply" @click="isShow = true"><i class="el-icon-s-comment"></i>&nbsp;回复</span>
          </div>
        </div>
        <div class="bottom-con">
          <span class="con">{{ self.context }}</span>
        </div>
        <!-- 递归组件 -->
        <div v-if="self.childList.length < flagNum || showAll" class="child-box">
          <comment-list v-for="(child, index) in self.childList" :self="child" :parent="self" :key="index"></comment-list>
        </div>
        <!-- 查看全部 -->
        <div v-if="self.childList.length >= flagNum ||self.childNums>0" class="show-all">
          <span @click="viewAll">{{ !showAll ? `查看全部 ${self.childNums} 条回复 >>` : `<< 收起 ${self.childList.length} 条回复` }}</span>
        </div>
      </div>
      <!-- 评论 -->
      <div v-else class="list-item">
        <div class="top-msg">
          <div class="info" @click="toPersonCenter(self)" style="cursor: pointer;">
            <img :src="getHeadimgurl(self.userid)" class="user-avatar" @error="onImgError(self.userid,$event)" />
            <span class="user-name">{{ self.username }}</span>
            <span class="time">{{ self.createDate }}</span>
          </div>
          <div class="btns">
            <span v-if="!self.isPraise" class="like"><img src="../../../../../static/images/like-not.png" class="like-logo" @click="praiseComment(self)" />{{ self.praiseSum }}</span>
            <span v-else class="like"><img src="../../../../../static/images/like-selected.png" class="like-logo" />{{ self.praiseSum }}</span>
            <span class="reply" @click="isShow = true"><i class="el-icon-s-comment"></i>&nbsp;回复</span>
          </div>
        </div>
        <div class="bottom-con">
          <span class="con">{{ self.context }}</span>
        </div>
        <!-- 递归组件 -->
        <div v-if="showAll" class="child-box">
          <comment-list  v-for="(child, index) in self.childList" :self="child" :parent="self" :key="index"></comment-list>
        </div>
        <!-- 查看全部 -->
        <div v-if="self.childList.length >= flagNum||self.childNums>0" class="show-all">
          <span @click="viewAll">{{ !showAll ? `查看全部 ${self.childNums} 条回复 >>` : `<< 收起 ${self.childList.length} 条回复` }}</span>
        </div>
      </div>
    </div>
    <el-dialog title="评论回复" :visible.sync="isShow" width="50%">
      <div class="w-box">
        <div class="edit">
          <el-input type="textarea" :rows="8" placeholder="请输入你的回复内容 ......" v-model="replyTxt"> </el-input>
        </div>
        <div class="bottom-btns">
          <img src="../../../../../static/images/expression.png" class="expression" />
          <el-button type="primary" @click="publishComment">发表评论</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
 </template>
 <script>
 import { initDicts,listXmMenuComment, delXmMenuComment, batchDelXmMenuComment,editSomeFieldsXmMenuComment } from '@/api/xm/core/xmMenuComment';
 import commentList from './comment-list.vue';
 import imgUtil from '@/api/imgUtil.js';
 export default {
  name: 'commentList',
  props: ['self', 'parent'],
  components: {
    commentList,
  },
  data() {
    return {
      flagNum: 1, // 超过多少条折叠
      showAll: false,
      isShow: false,
      replyTxt: '',
      avatarUrl: '',
      commentsList:[],
    };
  },
  methods: {
    ...imgUtil,
    toPersonCenter(self){
      this.$router.push({
        name: 'personForum',
        query: {
          userid: self.userid,
        },
      });
    }, 
    praiseComment() {
      this.self.praiseSum += 1;
      praisearchiveComment(this.self).then((res) => {
        let tips = res.data.tips;
        if (tips.isOk) {
          this.self.isPraise = true;
          this.$forceUpdate();
        } else {
          this.$message({
            message: tips.msg,
            type: 'error',
          });
        }
      });
    },
    // 点击被回复的昵称事件
    parentClick() {
      console.log(this.parent);
    },
    // 评论人点击事件
    commentUserNameClick() {
      console.log(this.self);
    },
    // 查看/收起回复
    viewAll() {
      if(this.showAll==true){
        this.showAll=false;
        return;
      }
      let params = {  
          pcommentId:this.self.id 
      };
      params.orderBy=" CREATE_DATE DESC "
      getCommentList(params).then((res) => { 
        let tips = res.data.tips;
        if (tips.isOk) { 
          let list = res.data.data;
          this.commentsList = list;  
          this.commentListFormat();
          this.showAll = !this.showAll; 
        } else {
          this.$message({
            message: tips.msg,
            type: 'error',
          });
        }
      });
    },
    publishComment() {
      let params = {
        archiveId: this.self.archiveId,
        pcommentId: this.self.id,
        toUserid: this.self.userid,
        toUsername: this.self.username,
        context: this.replyTxt,
      };
      if (params.context) {
        addarchiveComment(params).then((res) => {
          let tips = res.data.tips;
          if (tips.isOk) {
            this.$message({
              type: 'success',
              message: '评论回复成功',
            });
            this.self.childList.unshift(res.data.data); 
            if(!this.self.childNums){
              this.$set(this.self,"childNums",1); 
            }else{
              this.$set(this.self,"childNums",this.self.childNums+1); 
            }
            this.isShow = false;
            this.replyTxt = '';
          } else {
            this.$message({
              message: tips.msg,
              type: 'error',
            });
          }
        });
      } else {
        this.$message({
          type: 'error',
          message: '回复内容不能为空',
        });
      }
    },
    // 格式化评论数据
    commentListFormat() {
      this.commentsList.forEach((item) => {
        this.$set(item, 'childList', []); 
      }); 
       this.$set(this.self, 'childList',this.commentsList); 
    },
  },
  mounted() {
     self.isPraise = false;
  },
 };
 </script>
 <style lang="scss" scoped>
 .comment-list-box {
  .comment-list {
    .list-item {
      padding-bottom: 4px;
      margin-bottom: 14px;
      border-bottom: 1px solid #eeeeee;
      .top-msg {
        display: flex;
        justify-content: space-between;
        .info {
          display: flex;
          align-items: center; 
          .user-avatar {
            width: 38px;
            height: 38px;
            margin-right: 10px;
            border-radius: 50%; 
          }
          .user-name {
            display: flex;
            align-items: center;
            font-size: 13px;
            color: #7a7a7a;
            .act {
              display: inline-block;
              margin-left: 4px;
              font-size: 13px;
              color: #d4d4d4;
            }
          }
          .time {
            margin-left: 10px;
            font-size: 13px;
            color: #7a7a7a;
          }
        }
        .btns {
          display: flex;
          font-size: 13px;
          color: #a9a9a9;
          .like {
            display: flex;
            align-items: center;
            margin-right: 20px;
            .like-logo {
              width: 13px;
              height: 13px;
              margin-right: 4px;
              cursor: pointer;
            }
          }
          .reply {
            display: flex;
            align-items: center;
            cursor: pointer;
          }
          .reply:hover {
            color: #1f7eea;
          }
        }
      }
      .bottom-con {
        display: flex;
        flex-direction: column;
        padding: 4px 20px;
        padding-left: 52px;
        .con {
          font-size: 13px;
          color: #333333;
        }
      }
      .child-box {
        padding-left: 52px;
      }
      .show-all {
        margin-bottom: 4px;
        margin-top: 2px;
        padding-left: 52px;
        span {
          font-size: 12px;
          color: #1f7eea;
          cursor: pointer;
        }
        span:hover {
          text-decoration: underline;
          color: #64a1e6;
        }
      }
    }
    .clear-bd {
      margin-bottom: 0;
      margin-top: 8px;
      border-bottom: none;
    }
  }
  .w-box {
    .edit {
      display: flex;
    }
    .bottom-btns {
      margin-top: 14px;
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .expression {
        width: 22px;
        height: 22px;
        margin-right: 16px;
        border-radius: 50%;
        cursor: pointer;
      }
      .expression:hover {
        opacity: 0.8;
      }
    }
  }
 }
 </style>
--- a/static/expression.png
+++ b/static/expression.png
--- a/static/head/1.png
+++ b/static/head/1.png
--- a/static/head/10.png
+++ b/static/head/10.png
--- a/static/head/11.png
+++ b/static/head/11.png
--- a/static/head/12.png
+++ b/static/head/12.png
--- a/static/head/13.png
+++ b/static/head/13.png
--- a/static/head/14.png
+++ b/static/head/14.png
--- a/static/head/15.png
+++ b/static/head/15.png
--- a/static/head/16.png
+++ b/static/head/16.png
--- a/static/head/17.png
+++ b/static/head/17.png
--- a/static/head/18.png
+++ b/static/head/18.png
--- a/static/head/19.png
+++ b/static/head/19.png
--- a/static/head/2.png
+++ b/static/head/2.png
--- a/static/head/20.png
+++ b/static/head/20.png
--- a/static/head/21.png
+++ b/static/head/21.png
--- a/static/head/22.png
+++ b/static/head/22.png
--- a/static/head/23.png
+++ b/static/head/23.png
--- a/static/head/24.png
+++ b/static/head/24.png
--- a/static/head/25.png
+++ b/static/head/25.png
--- a/static/head/26.png
+++ b/static/head/26.png
--- a/static/head/27.png
+++ b/static/head/27.png
--- a/static/head/28.png
+++ b/static/head/28.png
--- a/static/head/29.png
+++ b/static/head/29.png
--- a/static/head/3.png
+++ b/static/head/3.png
--- a/static/head/30.png
+++ b/static/head/30.png
--- a/static/head/31.png
+++ b/static/head/31.png
--- a/static/head/32.png
+++ b/static/head/32.png
--- a/static/head/33.png
+++ b/static/head/33.png
--- a/static/head/34.png
+++ b/static/head/34.png
--- a/static/head/35.png
+++ b/static/head/35.png
--- a/static/head/36.png
+++ b/static/head/36.png
--- a/static/head/37.png
+++ b/static/head/37.png
--- a/static/head/38.png
+++ b/static/head/38.png
--- a/static/head/39.png
+++ b/static/head/39.png
--- a/static/head/4.png
+++ b/static/head/4.png
--- a/static/head/40.png
+++ b/static/head/40.png
--- a/static/head/41.png
+++ b/static/head/41.png
--- a/static/head/42.png
+++ b/static/head/42.png
--- a/static/head/43.png
+++ b/static/head/43.png
--- a/static/head/44.png
+++ b/static/head/44.png
--- a/static/head/45.png
+++ b/static/head/45.png
--- a/static/head/46.png
+++ b/static/head/46.png
--- a/static/head/47.png
+++ b/static/head/47.png
--- a/static/head/48.png
+++ b/static/head/48.png
--- a/static/head/49.png
+++ b/static/head/49.png
--- a/static/head/5.png
+++ b/static/head/5.png
--- a/static/head/50.png
+++ b/static/head/50.png
--- a/static/head/51.png
+++ b/static/head/51.png
--- a/static/head/52.png
+++ b/static/head/52.png
--- a/static/head/53.png
+++ b/static/head/53.png
--- a/static/head/54.png
+++ b/static/head/54.png
--- a/static/head/55.png
+++ b/static/head/55.png
--- a/static/head/56.png
+++ b/static/head/56.png
--- a/static/head/57.png
+++ b/static/head/57.png
--- a/static/head/58.png
+++ b/static/head/58.png
--- a/static/head/59.png
+++ b/static/head/59.png
--- a/static/head/6.png
+++ b/static/head/6.png
--- a/static/head/60.png
+++ b/static/head/60.png
--- a/static/head/61.png
+++ b/static/head/61.png
--- a/static/head/62.png
+++ b/static/head/62.png
--- a/static/head/63.png
+++ b/static/head/63.png
--- a/static/head/64.png
+++ b/static/head/64.png
--- a/static/head/65.png
+++ b/static/head/65.png
--- a/static/head/66.png
+++ b/static/head/66.png
--- a/static/head/67.png
+++ b/static/head/67.png
--- a/static/head/68.png
+++ b/static/head/68.png
--- a/static/head/69.png
+++ b/static/head/69.png
--- a/static/head/7.png
+++ b/static/head/7.png
--- a/static/head/70.png
+++ b/static/head/70.png
--- a/static/head/8.png
+++ b/static/head/8.png
--- a/static/head/9.png
+++ b/static/head/9.png
--- a/static/like-not.png
+++ b/static/like-not.png
--- a/static/like-selected.png
+++ b/static/like-selected.png
--- a/static/no-comment.png
+++ b/static/no-comment.png