dev/dcp-web-gate/src_old/views/userCenter/userCenterItem/userCenterCommunication.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.Interactive')}}（{{totalCount}}）
        </div>
        <div style="margin-left: 30px;">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                @row-click="toLook"
                class="projectName"
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column prop="senderName" fixed :label="$t('common.userName')" width="120"> </el-table-column>
                <el-table-column prop="columnName" :label="$t('common.projectName')" width='120'> </el-table-column>
                <el-table-column prop="content" :label="$t('common.MessageContent')" width='320'> </el-table-column>
                <el-table-column :prop="createDate" :formatter="dateFormat"  :label="$t('common.MessageTime')" width="150"></el-table-column>
                <el-table-column fixed="right" prop="address5" :label="$t('common.Option')" width="210">
                    <template slot-scope="scope">
                        <el-button
                          v-if="scope.row.interactiveMessageInfo == undefined"
                          @click.native.prevent="reply(scope.row)"
                          @click.stop
                          type="text"
                          size="medium">
                          {{$t('common.Reply')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="look(scope.row)"
                          @click.stop
                          type="text"
                          size="medium">
                          {{$t('common.look')}}
                        </el-button>
                        <el-button
                          @click.native.prevent="deleteRow(scope.$index, tableData)"
                          @click.stop
                          type="text"
                          size="medium">
                          {{$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
        title="留言回复"
        :visible.sync="dialogVisible"
        width="30%"
        v-if="$i18n.locale == 'zh'"
        >
           <div style="padding: 0 20px;" >
                <span>回复内容：</span>
                <el-input required="required" type="textarea" style="margin-top: 10px;" placeholder="请输入内容"
                    v-model="text" maxlength="200" show-word-limit>
                </el-input>
                <span slot="footer" class="dialog-footer" style="margin-left: 150px;display:block;margin-top: 20px;">
                    <el-button @click="dialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="replyMessage">确 定</el-button>
                </span>
           </div>
           
        </el-dialog>
        <el-dialog
        title="Message Reply"
        :visible.sync="dialogVisible"
        width="30%"
        v-if="$i18n.locale == 'en'"
        >
           <div style="padding: 0 20px;" >
                <span>Message Content：</span>
                <el-input required="required" type="textarea" style="margin-top: 10px;" placeholder="Please input the content"
                    v-model="text">
                </el-input>
                <span slot="footer" class="dialog-footer" style="margin-left: 150px;display:block;margin-top: 20px;">
                    <el-button @click="dialogVisible = false">Close</el-button>
                    <el-button type="primary" @click="replyMessage">Save</el-button>
                </span>
           </div>
           
        </el-dialog>
        <el-dialog
  
        title="互动交流"
        v-if="$i18n.locale == 'zh'"
        :visible.sync="dialogVisibles"
        width="30%"
        >
           <div style="padding: 0 20px;">
                <div>
                    <span style="display: inline-block;width: 50px;height: 50px;border-radius: 50px;overflow: hidden; background: #666;">{{$t('common.userAvatar')}}</span>
                    <span style="line-height: 50px;display: inline-block;vertical-align: top;margin-left: 20px;">{{row.senderName}}</span> 
                    <span style="float: right;">{{dateFormat(row)}}</span>
    
                </div>
                <div style="line-height:30px;font-size:13px;color:#333;margin-top:20px;margin-left: 60px;">
                    {{row.content?row.content:""}}
                </div>
                <div style="margin-top: 20px;">{{$t('common.replyMessage')}}</div>
                <div style="margin-left: 60px;line-height: 30px;">
                    {{row.interactiveMessageInfo?row.interactiveMessageInfo.content:""}}
                </div>
           </div>
        </el-dialog>
        <el-dialog
  
        title="Communication"
        v-if="$i18n.locale == 'en'"
        :visible.sync="dialogVisibles"
        width="30%"
        >
           <div style="padding: 0 20px;">
                <div>
                    <span style="display: inline-block;width: 50px;height: 50px;border-radius: 50px;overflow: hidden; background: #666;">{{$t('common.userAvatar')}}</span>
                    <span style="line-height: 50px;display: inline-block;vertical-align: top;margin-left: 20px;">{{row.senderName}}</span> 
                    <span style="float: right;">{{dateFormat(row)}}</span>
    
                </div>
                <div style="line-height:30px;font-size:13px;color:#333;margin-top:20px;margin-left: 60px;">
                    {{row.content?row.content:""}}
                </div>
                <div style="margin-top: 20px;">{{$t('common.replyMessage')}}</div>
                <div style="margin-left: 60px;line-height: 30px;">
                    {{row.interactiveMessageInfo?row.interactiveMessageInfo.content:""}}
                </div>
           </div>
        </el-dialog>
    </div>
</template>
<script>
    import {saveInteractiveMessage, getInteractiveMessageInfosList,userContentgetInteractiveMessageInfosList,getAllUmsUser,getAllProject,gateDelInteractiveMessage} from '@/api/operation/interactiveMessage';
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import {getToken,resetToken} from "@/utils/auth";
    import moment from 'moment'
    import Bus from "@/api/bus"; 


    export default {
        name: 'userCenterCommunication',
        extends: Base,
        data () {
            return {
                senderId:"",
                totalCount: "",
                text:"",
                row:{},
                totalCount:0,
                dialogVisible:false,
                dialogVisibles:false,
                params: {
                    pageNo: 0,
                    pageSize: 10,
                    bizObjectType: "0",
                    approveStatusDict: "2"
                },
                interactiveMessageInfo: {
                },
                formInline: {
                    user: '',
                    region: ''
                },
                tableData: []
            }
        },
        mounted() {
            this.initData();
        },
        methods:{
            toLook (row) {
            this.toView('projectPresentationDetails',row.columnCode)
            },
            toView(router, json) {
                window.localStorage.setItem('router', '');
                this.$store.commit('modify', router);
                Bus.$emit("router", router);    //存 Bus.$emit
                const { href } =this.$router.resolve({
                    name: router,
                    query: {
                    key: json,
                    }
                });
                window.open(href, '_blank');
                },
            dateFormat(row) {
                return  moment(row.replyDate).format('YYYY-MM-DD');
            },
            reply(row) {
                this.row=row;
                this.dialogVisible=true;
            },
            look(row) {
                this.row=row;
                this.dialogVisibles=true;
                 
            },
            //回复信息
            replyMessage() {
                
                this.interactiveMessageInfo.content = this.text;
                this.interactiveMessageInfo.replyStatusDict = "N";
                this.interactiveMessageInfo.replyStatus = "否";
                this.interactiveMessageInfo.bizObjectId = this.row.id;
                this.interactiveMessageInfo.bizObjectType = "1";
                this.interactiveMessageInfo.approveStatusDict = "0";
                this.interactiveMessageInfo.columnCode = this.row.columnCode;
                let token = getToken();
                this.submitHandler(token => {
                saveInteractiveMessage(JSON.stringify(this.interactiveMessageInfo),token).then(res=>{
                    this.dialogVisible = false;
                    this.text = "";
                    this.resetToken();
                    this.initData()
                    })
                    
                })
            },  
            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(() => {
                    gateDelInteractiveMessage(rows[index].id).then(res=>{
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.initData();
                        }).catch((error) => {
                            this.$message.error(res.msg);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$i18n.locale === 'zh' ? '已取消删除' : 'Deletion canceled',
                    });          
                });
            },
            initData(){
                let user = window.localStorage.getItem('user');
                var users = JSON.parse(user);
                 if (users == null) {
                    alert("请先登录")
                    return
                }
                 this.senderId = users.userId;
                this.params.senderId = users.userId
                userContentgetInteractiveMessageInfosList(this.params).then(res=>{
                    this.tableData = res.data.interactiveMessageInfos
                    this.totalCount=res.data.page.totalCount-0;
                })
            },
            // 发布
            release(index, rows) {
                console.log(index, rows)
            },
            // 编辑
            change(index, rows) {
                console.log(index, rows)
            },
            // 撤回
            withdraw(index,rows) {
                console.log(index, rows)
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
               this.params.pageNo=val;
                this.initData()
            }
        }
    }
</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;
    }
    .projectName >>> .el-table__row td:nth-of-type(2){
  color: #0a0000af !important;
}
.projectName >>> .el-table__row td:nth-of-type(2) .cell{
    cursor: pointer;
}
.projectName >>> .el-table__row td:nth-of-type(2) .cell:hover{
    color: rgb(47, 0, 255) !important;
}
    
</style>