zuel-itsm-3.0.2/src/views/evaluate.vue

<template>
    <div class="bgColor">
        <div class="rapirMessage">
            <div class="label">
                报修信息
            </div>
            <div class="state">
                <div>报修编号:&nbsp;{{data.incident.incidentsign}}</div>
                <div :class="stateClassFn(data.state.name)">{{data.state.name}}</div>
            </div>
            <div class="description">
                <div>
                    报修内容:
                </div>
                <div>
                    {{data.description||"暂无"}}
                </div>
            </div>
            <div class="ipt">
                <div>
                    报修图片:
                </div>
                <div class="imgs-container">
                    <img :src="img" v-for="(img, index) in imgs" @click="handleImgsClick(index)" v-if="imgs.length">
                    <span v-if="!imgs.length">暂无</span>
                </div>
            </div>
            <div class="faultLocation">
                <div>
                    报修地址:
                </div>
                <div>
                    {{data.address}}
                </div>
            </div>
        </div>
        <div class="label">
            报修评价
        </div>
        <div class="rate">
            <span class="pj">评价:</span><cube-rate v-model="rate"></cube-rate>
        </div>
        <div class="rateText">
            <cube-textarea v-model="rateText" placeholder="您可以从响应速度、解决情况、服务态度等方面,给我们作出相应的评价"></cube-textarea>
        </div>
        <div class="chehuiBox">

        </div>
        <div class="chehui">
            <div class="btn" @click="evaluate()">提&nbsp;交&nbsp;评&nbsp;价</div>
        </div>
        <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
    </div>
</template>
<script>
import PrompTing from './../views/prompting.vue'
export default {
    data(){
        return{
            data:"",
            imgs:[],
            rate:5,
            rateText:"暂无内容",
            rateData:0,
            promptingConent:"",
            promptingStatus:"",
            degreeDictionary:[]
        }
    },
    methods:{
        evaluate(){
            if(!this.rate){
                this.$createDialog({
                    type: 'alert',
                    title: '评分未选',
                    content: '请选择评分',
                    icon: 'cubeic-wrong'
                }).show()
            }
            // else if(this.rateText==""){
            //     this.$createDialog({
            //         type: 'alert',
            //         title: '评价未填',
            //         content: '请作出您的评价',
            //         icon: 'cubeic-wrong'
            //     }).show()
            // }
            else{
                var that=this;
                this.$http.post('service/apply/bpm/degree',{
                    "id":that.data.id,
                    "degree":this.rateData===0?this.degreeDictionary[0].id:this.rateData,
                    "degreeRemark":this.rateText
                }).then(function(res){
                    if(res.status==200){
                        that.promptingConent="恭喜您,评价成功!";
                        that.promptingStatus=true;
                        $("#fade").fadeIn();
                        setTimeout(function(){
                            $("#fade").fadeOut();
                        },2000);
                        that.dialog = that.$createDialog({
                            type: 'alert',
                            title: '恭喜您,提交评价成功!',
                            content: '点击返回事件列表',
                            icon: 'cubeic-right',
                            onConfirm: (e, promptValue) => {
                                that.$router.push({path:'/main/incidentList'})
                            }
                        }).show()
                    }else{
                        that.promptingConent="对不起,评价失败,请稍后再试!";
                        that.promptingStatus=false;
                        $("#fade").fadeIn();
                        setTimeout(function(){
                            $("#fade").fadeOut();
                        },2000);
                    }
                })
            }
        },
        getDeggreDictionart(){
            var that=this;
            this.$http.post('service/common/common/getDictionary',{
                key: "incident_degree",
                type: "list"
            }).then(function(res){
                that.degreeDictionary=res.data
            })
        },
        getParams(){
            this.data=JSON.parse(this.$route.params.data)
        },
        stateClassFn(data){
            if(data=="未转换"){
                return "weishouli"
            }else if(data=="不受理"){
                return "bushouli"
            }else if(data=="处理中"){
                return "chulizhong"
            }else if(data=="待评价"){
                return "daipingjia"
            }else if(data=="已解决"){
                return "yijiejue"
            }else if(data=="已撤回"){
                return "yichehui"
            }else{
                return "yichehui"
            }
        },
        getImgsData(){
            var that=this;
            this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.id,{
            // this.$http.get('service/common/common/listAttachment/wechatRequesterIncident/'+this.data.bxcode,{
            }).then(function(res){
                for(var i=0;i<res.data.data.length;i++){
                    // that.imgs.push("http://localhost/service/common/common/downloadAttachment/"+res.data.data[i].token)
                    // that.imgs.push("http://weixintest.ngser.dashitech.com/service/common/common/downloadAttachment/"+res.data.data[i].token)
                    that.imgs.push("http://itsmpoc.dashitech.com/service/common/common/downloadAttachment/"+res.data.data[i].token)
                    // that.imgs.push("http://192.168.3.95/service/common/common/downloadAttachment/"+res.data.data[i].token)
                }
            })
        },
        handleImgsClick(index) {
            this.initialIndex = index
            const params = {
            $props: {
                imgs: this.imgs,
                initialIndex: 'initialIndex',
                loop: false
            },
            $events: {
                change: (i) => {
                this.initialIndex = i
                }
            }
            }
            this.$createImagePreview({ ...params }).show()
        },
    },
    created(){
        this.getParams(),
        this.getImgsData(),
        this.getDeggreDictionart()
    },
    mounted(){
    },
    components: {
        PrompTing
    },
    watch:{
        rate:{
            handler:function(val){
                console.log(this.degreeDictionary);
                if(val==0){
                    this.rateData=this.degreeDictionary[0].id
                }else if(val==1){
                    this.rateData=this.degreeDictionary[4].id
                }else if(val==2){
                    this.rateData=this.degreeDictionary[3].id
                }else if(val==3){
                    this.rateData=this.degreeDictionary[2].id
                }else if(val==4){
                    this.rateData=this.degreeDictionary[1].id
                }else if(val==5){
                    this.rateData=this.degreeDictionary[0].id
                }
            },
            deep:true
        }
    }
}
</script>
<style scoped>
.bgColor{
    background-color: white
}
.label{
    background-color: rgb(238, 238, 238);
    height: .6rem;
    line-height: .6rem;
    padding-left: .24rem;
    font-size: .24rem;
    color: #666666
}
.state{
  display: flex;
  justify-content:space-between;
  align-items:center;
  padding: 0 .24rem;
  height: .88rem;
  border-top: .01rem rgb(223, 222, 222) solid;
  border-bottom: .01rem rgb(223, 222, 222) solid;
}
.state div:nth-child(1){
  font-size: .32rem;
  line-height: .45rem;
  color:#333333
}
.state div:nth-child(2){
  padding: .05rem .3rem;
  /* border: 0.01rem rgb(0,0,255) solid; */
  border-radius: 16px ;
  /* color: rgb(0,0,255) */
}
.description{
    display: flex;
    justify-content:space-between;
    padding: .24rem;
    border-bottom: .01rem rgb(223, 222, 222) solid;
}
.description div:nth-child(1){
    width: 20%;
    font-size: .32rem;
    color: #333333;
    line-height: .45rem
}
.description div:nth-child(2){
    width: 80%;
    font-size: .32rem;
    line-height: .45rem;
    color: #333333
}
.ipt{
    display: flex;
    justify-content:space-between;
    padding: .24rem;
    border-bottom: .01rem rgb(223, 222, 222) solid;
}
.ipt div:nth-child(1){
    width: 20%;
    font-size: .32rem;
    line-height: .45rem;
    color: #333333
}
.ipt div:nth-child(2){
    width: 80%;
}
.faultLocation{
    display: flex;
    justify-content:space-between;
    padding: .24rem;
    border-bottom: .01rem rgb(223, 222, 222) solid;
}
.faultLocation div:nth-child(1){
    width: 20%;
    font-size: .32rem;
    line-height: .45rem;
    color: #333333
}
.faultLocation div:nth-child(2){
    width: 80%;
    font-size: .32rem;
    line-height: .45rem;
    color: #333333
}
.imgs-container img{
    width: 1.5rem;
    height: 1.5rem;
    margin-left: .2rem
}
.imgs-container img:nth-child(1){
    margin-left: 0
}
.imgs-container span{
    font-size: .32rem;
    line-height: .45rem
}
.weishouli{
  color:#991f00;
  border: 0.01rem #991f00 solid;
  background-color: #f4e8e5
}
.bushouli{
  color:#666666;
  background-color: #eeeeee;
  border: 0.01rem #666666 solid;
}
.chulizhong{
  color:#003057;
  background-color: #e5eaee;
  border: 0.01rem #003057 solid;
}
.daipingjia{
  color:#825b00;
  background-color: #f2eee5;
  border: 0.01rem #825b00 solid;
}
.yijiejue{
  color:#40a19c;
  background-color: #ebf5f5;
  border: 0.01rem #40a19c solid;
}
.yichehui{
  color:#48a843;
  background-color: #ecf6ec;
  border: 0.01rem #48a843 solid;
}
.rate{
    height: .88rem;
    display: flex;
    align-items:center;
    padding: 0 .24rem;
    border-bottom: .01rem rgb(223, 222, 222) solid;
}
.rate .pj{
    font-size: .32rem;
    display: inline-block;
    margin-right: .2rem
}
.rateText{
    padding: .24rem
}
.chehuiBox{
    width: 100%;
    height: 1.3rem;
}
.chehui{
    height: 1.3rem;
    width: 100%;
    border-top: .01rem rgb(223, 222, 222) solid;
    background-color: rgb(248,248,248);
    position: fixed;
    left: 0;
    bottom: 0;
    display: flex;
    align-items:center;
    justify-content:center
}
.chehui .btn{
    width: 90%;
    height: 1rem;
    background-color: #005395;
    border-radius: 10px;
    line-height: 1rem;
    color: white;
    font-size: .36rem;
    text-align: center
}
</style>
<style>
   .cube-textarea-wrapper{
       height: 60px!important;
   }
</style>