dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterMyConsultingService1.vue

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyProject">
        <div style="height: 60px;line-height: 60px;padding-top: 30px;margin-left: 30px;margin-right: 30px; border-bottom: 1px solid rgba(228, 228, 228, 1);">
            {{$t('common.IntentionConsultation')}}
        </div>
        <div style="margin-left: 30px;" class="red">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                @cell-click="projectToView"
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column type="index" fixed :label="$t('common.serialNumber')" width="120"> </el-table-column>
                <el-table-column style="color: red"  prop="columnCodeName" :label="$t('common.projectName')" width='320'> </el-table-column>
                <el-table-column prop="content" :label="$t('common.ConsultingContent')" width='320'> </el-table-column>
                <el-table-column prop="consultMessageInfo.content" :label="$t('common.ReplyContent')" width='320'> </el-table-column>
                <el-table-column :prop="senderDate" :formatter="dateFormat"  :label="$t('common.ConsultationTime')" width="150"></el-table-column>
                <el-table-column fixed="right" prop="address5" :label="$t('common.Option')" width="210">
                    <template slot-scope="scope">
                        <el-button
                          @click="change(scope.row)"
                          type="text"
                          size="small"
                          :disabled="!scope.row.consultMessageInfo"
                          >
                          {{$t('common.check')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="deleteRow(scope.$index, tableData)"
                          type="text"
                          size="small">
                           {{$t('common.Delete')}}
                        </el-button>
                      </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="width: 100%;text-align: center;">
            <el-pagination
                style="margin-top: 50px;height: 80px;"
                background
                layout="prev, pager, next"
                :total=totalCount  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <el-dialog
        v-if="row.consultMessageInfo"
        :title="$t('common.IntentionConsultation')"
        :visible.sync="dialogVisible"
        width="30%"
        :before-close="handleClose">
           <div style="padding: 0 20px;">
               <div class="consultTitle">
                   <span>{{projectName}}</span>
               </div>
               <div style="border-bottom:1px solid #dfdfdf">
                   <div style="margin-top:24px;">
                       <div style="display:inline-block;background:#0091ff;width:20px;height:20px;color:#fff;line-height:20px;border-radius:50%;text-align:center">Q</div>
                       <span style="color:#0091ff;margin-left:10px">{{$t('common.qustion')}}：</span>
                   </div>
                   <p v-html="row.content"></p>
                   <span style="float:right;margin-bottom:20px">{{$t('common.qustionTime')}}：{{dateFormat(row)}}</span>
                    <div style="clear:both"></div>
               </div>
               <div>
                   <div style="margin-top:24px;">
                       <div style="display:inline-block;background:#6dd400;width:20px;height:20px;color:#fff;line-height:20px;border-radius:50%;text-align:center">A</div>
                       <span style="color:#6dd400;margin-left:10px">{{$t('common.replyMessage')}}</span>
                   </div>
                   <p v-html="row.consultMessageInfo.content"></p>
                   <span style="float:right;margin-bottom:20px">{{$t('common.replyMessageTime')}}：{{dateFormat(row)}}</span>
                    <div style="clear:both"></div>
               </div>
           </div>
        </el-dialog>
    </div>
</template>
<script>
    import {getReplyAndSenderMessage,gateDelConsultMessageInfo} from "@/api/operation/consultMessageInfo"
    import { getToken,resetToken } from '@/utils/auth'
    import { getBaseProjectInfoName } from '@/api/project/baseProjectEntity'
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import Bus from "@/api/bus"; 
    import moment from 'moment'
    export default {
        name: 'userCenterMyConsultingService',
        extends: Base,
        data () {
            return {
                formInline: {
                    user: '',
                    region: ''
                },
                totalCount:0,
                param:{
                    pageNo:0,
                    pageSize:10,
                    language:'',
                },
                projectName: "",
                tableData: [],
                row:{},
                dialogVisible:false,
                params: {
                    pageNo: 1,
                    pageSize: 6,
                    language: '',
                    continentCountry: "",
                    technicalCategories: "",
                    //0为默认排序，1为关注排序
                    descStatus:0,
                    messageOpenType:"Y",
                    status:1
                },
            }
        },
        mounted(){
            this.getReply();
        },
        computed: {
            // projectMap: function() {
            // return this.projectDicts.array2Obj("value", "label");
            // }
        },
        methods:{
            toView(router, json) {
            var index = this.params.descStatus;

          var dataIndex = this.params;
          var cruPage = this.params.pageNo;
          window.localStorage.setItem('router', router);
          this.$store.commit('modify', router);
          Bus.$emit("router", router);    //存 Bus.$emit
          const { href } =this.$router.resolve({
            name: router,
            query: {
              key: json,
              screenId:index,
              dataIndex:index,
              cruPage:cruPage
            }
          });
          window.open(href, '_blank');
            },
            getReply(){
                let token = getToken();
                this.param.language = this.$i18n.locale.toUpperCase();
                getReplyAndSenderMessage(this.param,this.param.language,token).then(res=>{
                    console.log(res);
                    this.tableData=res.data.consultMessageInfos;
                    this.totalCount=res.data.page.totalCount-0;
                    this.resetToken();
                })

                
            },
            dateFormat(row) {
                return  moment(row.senderDate).format('YYYY-MM-DD');
            },
            // 编辑
            change(row) {
                this.row=row;
                this.dialogVisible=true;
                var language = this.$i18n.locale.toUpperCase()
                getBaseProjectInfoName(language,row.columnCode).then(res=>{
                    this.projectName = res.data.baseProjectInfoName;
                })
            },
            projectToView(row,column,event,cell) {
                if(column.property=='columnCodeName'){
                    this.toView('projectPresentationDetails',row.columnCode)
                }
            },
            // 删除
            deleteRow(index, rows) {
                this.$confirm(this.$t('common.Thisoperationwillpermanently'), this.$t('common.Tips'), {
                    confirmButtonText: this.$t('common.OK'),
                    cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                }).then(() => {
                    gateDelConsultMessageInfo(rows[index].id).then(res=>{
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.getReply();
                        }).catch((error) => {
                            this.$message.error(res.msg);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$i18n.locale === 'zh' ? '已取消删除' : 'Deletion canceled',
                    });          
                });
               
            },
            handleCurrentChange(val) {
               
                this.param.pageNo=val;
                this.getReply()
                
            }
        }
    }
</script>
<style scoped>

    .el-input {
        width: 200px ;
    }
    .el-form-item__content,.el-select {
        width: 200px !important;
    }
    .el-table thead {
        background: #eee;
    }
    .userCenterMyProject >>> .el-pagination .el-pager li,
    .userCenterMyProject >>> .el-pagination .btn-next,
    .userCenterMyProject >>> .el-pagination .btn-prev{
        width: 35px;
        height: 35px;
        line-height: 35px;
    }
    .userCenterMyProject >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
        background: #0050d8;
    }
    .consultTitle{
        font-size: 16px;
        font-weight: 700;
        text-align: center;
    }
     .red .el-table >>> td:nth-child(2)  .cell{
        color: red;
    }
    
</style>