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

<template>
    <div style="width: 95%;background: #fff;min-height: 700px;color: #666;margin-left:0" class="userCenterMyActivity">
        <div style="margin-top: 10px;">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                style="text-align:center"
                @cell-click="cellClick"
            >
                <template slot="empty">
                    {{ $t('common.UserNoData') }}
                </template>
                <el-table-column type="index" fixed :label="$t('common.serialNumber')" width="80"></el-table-column>
                <el-table-column prop="title" :label="$t('common.titleInformation')" width='540px'></el-table-column>
                <!-- <el-table-column prop="businessType" :label="$t('common.Type')" width='220'> </el-table-column> -->
                <el-table-column prop="collectDate" :label="$t('common.CollectionTime')" width="200"></el-table-column>
                <el-table-column prop="address5" :label="$t('common.Option')" width="100">
                    <template slot-scope="scope">
                        <el-button
                            type="text"
                            size="small">
                            {{ $t('common.CancelCollection') }}
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <div style="position: relative;width: 100%;height: 200px;" v-if="tableData.length>0">
            <el-pagination
                type="index"
                :index="indexMethod"
                style="position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);"
                background
                layout="prev, pager, next"
                :page-size="10"
                :total="total-0"
                @current-change="handleCurrentChange">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import {get, collectModelStatusByModelIdAndUserId, del} from '@/api/operation/consultMessageInfo'
import {addCollectInfo} from "@/api/baseUnitView";
import {getPortalMyCollecModel} from "@/api/baseContactsInfo"
import Base from "@/views/base/Base";
import {formatDate} from "@/utils/formatUtils";
import {getToken, resetToken} from "@/utils/auth";

export default {
    name: 'userCenterCollectionInformation',
    extends: Base,
    data() {
        return {
            formInline: {
                user: '',
                region: ''
            },
            params: {
                modelType: 'message',
                userId: "",
                language: '',
                pageNo: '1'
            },
            num: 0,
            total: 0,
            userId: '',
            tableData: []
        }
    },
    mounted() {
        this.getInData();

    },
    watch: {
        '$i18n.locale'() {
            this.getInData();
        }
    },
    methods: {
        cellClick(row, column, cell, event) {
            if (column.property != 'address5') {
                this.openDetails(row)
            } else {
                this.unCollection(row.baseEntityId)
            }

        },
        openDetails(row) {
            this.toView('realTimeInfoItemdetails', row.baseEntityId)

        },
        toView(router, json) {
            this.$store.commit('modify', router);
            window.localStorage.setItem('router', router);
            const {href} = this.$router.resolve({
                name: router,
                query: {
                    key: json
                }
            });
            window.open(href, '_blank');
        },
        unCollection: function (id) {
            let user = window.localStorage.getItem("user");
            if (!this.$Cookies.get('token')) {
                this.$message.warning(this.$i18n.locale == 'zh' ? "请先登录" : "Please login first");
            } else {
                var users = JSON.parse(user);
                var token = "" + getToken();
                this.userId = users.userId;
                var modelId = id;
                this.submitHandler((token) => {
                    addCollectInfo(modelId, "message", this.userId, "uncollect", token).then((res) => {
                        if (res.status == 200) {

                            this.$message({
                                message: this.$i18n.locale == 'zh' ? "取消收藏" : "Cancel the like",
                                type: 'success'
                            });

                        }
                        this.resetToken();
                    }).catch(error => {
                        this.resetToken();
                    });
                });
            }
        },
        getInData() {
            let user = window.localStorage.getItem('user');
            var users = JSON.parse(user);
            var userId = users.userId;
            this.params.language = this.$i18n.locale.toUpperCase()
            this.params.userId = userId;
            getPortalMyCollecModel(this.params).then(res => {
                this.num = res.data.models.cmsInformationViewList.length;
                this.tableData = res.data.models.cmsInformationViewList;
                let tableCmsInformationViewData = [];
                this.tableData.forEach((i) => {
                    i.createDate = i.createDate ? formatDate(i.createDate, "YYYY-MM-DD") : "";
                    i.collectDate = i.collectDate ? formatDate(i.collectDate, "YYYY-MM-DD") : "";
                    if (Object.is(i.language, this.$i18n.locale.toUpperCase())) {
                        tableCmsInformationViewData.push(i);
                    }
                });
                this.tableData = tableCmsInformationViewData;
                this.total = res.data ? res.data.page.totalCount - 0 : 0;
            })
        },
        //时间格式化
        dateFormat(row, column, cellValue, index) {
            const daterc = row[column.property];
            if (daterc != null) {
                const dateMat = new Date(parseInt(daterc.replace("/Date(", "").replace(")/", ""), 10));
                const year = dateMat.getFullYear();
                const month = dateMat.getMonth() + 1;
                const day = dateMat.getDate();
                const hh = dateMat.getHours();
                const mm = dateMat.getMinutes();
                const ss = dateMat.getSeconds();
                const timeFormat = year + "-" + month + "-" + day + " " + hh + ":" + mm + ":" + ss;
                return timeFormat;
            }

        },
        // 发布
        release(index, rows) {
            console.log(index, rows)
        },
        // 编辑
        change(index, rows) {
            console.log(index, rows)
        },
        // 删除
        deleteRow(index, rows) {
            console.log(index, rows)
        },
        // 撤回
        withdraw(index, rows) {
            console.log(index, rows)
        },
        //分页索引接着上一页的索引
        indexMethod(index) {
            return (this.page - 1) * 10 + index + 1;
        },
        // handleSizeChange(val) {
        //     console.log(`每页 ${val} 条`);
        // },
        handleCurrentChange(val) {
            this.params.pageNo = val;
            this.getInData();
        }
    }
}
</script>
<style scoped>

.el-input {
    width: 200px;
}

.el-form-item__content, .el-select {
    width: 200px !important;
}

.el-table thead {
    background: #eee;
}

.userCenterMyActivity >>> .el-pagination .el-pager li,
.userCenterMyActivity >>> .el-pagination .btn-next,
.userCenterMyActivity >>> .el-pagination .btn-prev {
    width: 35px;
    height: 35px;
    line-height: 35px;
}

.userCenterMyActivity >>> .el-pagination.is-background .el-pager li:not(.disabled).active {
    background: #0050d8;
}

/* .margin_left {
    margin-left: 5px;
} */
/* .margin_top{
    margin-top: 5px;
} */
.myActivityLi {
    width: 295px;
    float: left;
    height: 256px;
    margin-bottom: 20px;
    border: 1px solid rgba(228, 228, 228, 1);
    box-shadow: rgba(228, 228, 228, 1);
}

.myActivityLi .title {
    color: #ccc;
    font-size: 14px;
}

.myActivityLi_data {
    color: #666;
    font-size: 12px;
    margin-top: 5px;
    margin-left: 10px;
}

.myActivity ul {
    text-align: top;
    height: 100%;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: space-between;
    flex-wrap: wrap;
}

.el-tag {
    height: 22px;
    line-height: 22px;
    margin-right: 5px;
}

/* .el-table_1_column_2 {
    overflow: hidden;
    text-overflow:ellipsis;
    white-space: nowrap;
} */
.el-table-column {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.userCenterMyActivity >>> .el-table .el-table__row .cell:hover {
    color: blue;
    cursor: pointer;
}
</style>