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

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;margin-top: 15px;" class="userCenterMyProject">
<!--        <div style="width: 880px;padding:20px 0 0 0;background: #f2f2f2;margin-left: 30px;height: 175px;margin-top: 5px;">-->
<!--                <el-form :inline="true" :model="params" class="demo-form-inline" style="padding:0 40px">-->
<!--                    <el-row>-->
<!--                        <el-col :span="10">-->
<!--                            <el-form-item :label="$t('common.projectName')">-->
<!--                                <el-input v-model="params.projectName" :placeholder="$t('common.EnterName')" maxlength="10"></el-input>-->
<!--                                </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="10">-->
<!--                            <el-form-item :label="$t('common.ProjectType')">-->
<!--                                <el-select v-model="params.technicalCategories" :placeholder="$t('common.SelectType')">-->
<!--                                   <el-option-->
<!--                                        v-for="item in technicalCategoriesDicts"-->
<!--                                        :key="item.value"-->
<!--                                        :label="item.label"-->
<!--                                        :value="item.value"-->
<!--                                        :disabled="false">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                                </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="4">-->
<!--                            <el-button @click="toInitData" type="primary" style="width:70px">{{$t('common.uquery')}}</el-button>-->
<!--                            &lt;!&ndash; <el-button type="info">{{$t('common.reset')}}</el-button> &ndash;&gt;-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                    <el-row>-->
<!--                        <el-col :span="10">-->
<!--                            <el-form-item :label="$t('common.projectPhase')">-->
<!--                                <el-select v-model="params.phaseType" :placeholder="$t('common.EnterPhase')">-->
<!--                                    <el-option-->
<!--                                            v-for="item in phaseTypeDicts"-->
<!--                                            :key="item.value"-->
<!--                                            :label="item.label"-->
<!--                                            :value="item.value"-->
<!--                                            :disabled="false">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                            </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="10">-->
<!--                            <el-form-item :label="$t('common.technicalScope')">-->
<!--                                <el-select v-model="params.technicalScope" :placeholder="$t('common.SelectTechnicalScope')">-->
<!--                                    <el-option-->
<!--                                        v-for="item in technicalScopeDicts"-->
<!--                                        :key="item.value"-->
<!--                                        :label="item.label"-->
<!--                                        :value="item.value"-->
<!--                                        :disabled="false">-->
<!--                                    </el-option>-->
<!--                                </el-select>-->
<!--                                </el-form-item>-->
<!--                        </el-col>-->
<!--                        <el-col :span="2">-->
<!--                            &lt;!&ndash; <el-button type="primary">{{$t('common.query')}}</el-button> &ndash;&gt;-->
<!--                            <el-button @click="reset" type="info" style="width:70px">{{$t('common.reset')}}</el-button>-->
<!--                        </el-col>-->
<!--                    </el-row>-->
<!--                </el-form>-->
<!--        </div>-->
<!--        <div style="height: 50px;line-height: 50px;">-->
<!--            <el-button type="primary" style="float: right;margin-right: 90px;margin-top: 10px;" @click="toView('addMyProject','')">{{$t('common.CreateProject')}}</el-button>-->
<!--        </div>-->
        <div style="margin-left: 30px;">
            <el-table
                :data="tableData"
                stripe
                highlight-current-row
                @cell-click="projectToView"
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column style="color: red" fixed :label="$t('common.projectName')" prop="projectName"  width="300" > </el-table-column>
                <el-table-column prop="technicalScope" :label="$t('common.RangeTechnology')" width="250"> </el-table-column>
                <el-table-column prop="phaseType" :label="$t('common.projectPhase')" width="250"></el-table-column>
<!--                <el-table-column prop="approveStatus" :label="$t('common.ReviewState')" width="150"> </el-table-column>-->
<!--                <el-table-column prop="releaseStatus" :label="$t('common.ReleaseState')" width="150"> </el-table-column>-->
                <el-table-column prop="createDate" :label="$t('common.CreationTime')" width="160"> </el-table-column>
<!--                <el-table-column fixed="right" prop="address5" :label="$t('common.Option')" width="210">-->
<!--                    <template slot-scope="scope">-->
<!--                        <el-button-->
<!--                          @click.native.prevent="change(scope.$index, tableData)"-->
<!--                          type="text"-->
<!--                          size="small">-->
<!--                          {{$t('common.Edit')}}-->
<!--                        </el-button>-->
<!--                        <el-button-->
<!--                          @click.native.prevent="release(scope.$index, tableData)"-->
<!--                          type="text"-->
<!--                          size="small">-->
<!--                          {{$t('common.Submit')}}-->
<!--                        </el-button>-->
<!--                        <el-button-->
<!--                          @click.native.prevent="withdraw(scope.$index, tableData)"-->
<!--                          type="text"-->
<!--                          size="small">-->
<!--                          {{$t('common.Withdraw')}}-->
<!--                        </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= num  @size-change="handleSizeChange"
                @current-change="handleCurrentChange">
                </el-pagination>
        </div>
    </div>
</template>
<script>
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import {getsByPortal} from '@/api/project/baseProjectRecommend'
    import { formatDate } from "@/utils/formatUtils";
    import { getToken } from '@/utils/auth'
    import Bus from "@/api/bus";
    export default {
        name: 'userCenterMyProjectRecommendation',
        extends: Base,
        data () {
            return {
                num: 0,
                formInline: {
                    user: '',
                    region: ''
                },
                params: {
                    pageNo: 1,
                    pageSize: 10,
                    technicalCategories: "",
                    technicalScope:"",
                    phaseType:"",
                    createBy: "",
                    projectName:"",
                    publishingChannels:"1",
                    approveStatus:"",
                    language:""
                },
                tableData: [],
                technicalScopeDicts: [],
                phaseTypeDicts: [],
                technicalCategoriesDicts:[],
                projectReleaseStatus: [],
                projectApproveStatus: [],
            }
        },
        mounted() {
            this.toInitData();
            // this.getRecommended();
            this.toDate=Date.parse(new Date());
        },
        watch:{
            '$i18n.locale'(){
            this.toInitData();
            // this.getBaseProject();
            }
        },
        methods:{
            toproejctView(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');
            },
            projectToView(row,column,event,cell) {
                if(column.property=='projectName'){
                    this.toproejctView('projectPresentationDetails',row.projectId)
                }
            },
            reset: function() {
                var params =  {
                    pageNo: 1,
                    pageSize: 10,
                    technicalCategories: "",
                    technicalScope:"",
                    phaseType:"",
                    createBy: "",
                    projectName:"",
                    publishingChannels:"1",
                    approveStatus:"",
                    language:""
                }

                this.params = params;
                this.toInitData();
            },
            toInitData: function() {
                let token = getToken();
                this.params.language = this.$i18n.locale.toUpperCase();
                getsByPortal(this.params,token).then((result) => {
                    // console.log(this.params);
                    var data = result.data;
                    // console.log(data.baseProjectViews,'----------------------------------------------')
                    if (data.baseProjectViewList) {
                    this.num = parseInt(data.page.totalCount);
                    this.tableData = data.baseProjectViewList;
                    this.tableData.forEach((i) => {
                         i.createDate = i.createDate
                            ? formatDate(i.createDate, "YYYY-MM-DD")
                            : "";
                    })
                    }else {
                    this.tableData = [];
                    this.num = ""
                }
                if (this.$i18n.locale.toUpperCase() == 'ZH') {
                        getDicts(
                        "PROJECT_APPROVE_STATUS_DICT,RELEASE_STATUS_DICT,TECHNICAL_SCOPE_DICT,PHASE_TYPE_DICT,PROJECT_CATEGORIES_DICT"
                    ).then(result => {
                        if (result.data) {
                        this.projectApproveStatus = result.data[0];
                        this.projectReleaseStatus = result.data[1];
                        this.technicalScopeDicts = result.data[2] || [];
                        this.phaseTypeDicts = result.data[3] || [];
                        this.technicalCategoriesDicts = result.data[4] || [];
                        this.tableData.forEach((i) => {
                            this.technicalScopeDicts.forEach((v) => {
                                if (i.technicalScope == v.value) {
                                    i.technicalScope = v.label;
                                }
                            })
                            this.phaseTypeDicts.forEach((v) => {
                                if (i.phaseType == v.value) {
                                    i.phaseType = v.label;
                                }
                            })
                            this.projectApproveStatus.forEach((v) => {
                                if (i.approveStatus == v.value) {
                                    i.approveStatus = v.label;
                                }
                            })
                            this.projectReleaseStatus.forEach((v) => {
                                if (i.releaseStatus == v.value) {
                                    i.releaseStatus = v.label;
                                }
                            })
                        })
                        }
                    });
                } else if (this.$i18n.locale.toUpperCase() == 'EN') {
                     getDicts(
                        "PROJECT_APPROVE_STATUS_DICT_EN,RELEASE_STATUS_DICT_EN,TECHNICAL_SCOPE_DICT_EN,PHASE_TYPE_DICT_EN,PROJECT_CATEGORIES_DICT_EN"
                    ).then(result => {
                        if (result.data) {
                        this.projectApproveStatus = result.data[0];
                        this.projectReleaseStatus = result.data[1];
                        this.technicalScopeDicts = result.data[2] || [];
                        this.phaseTypeDicts = result.data[3] || [];
                        this.technicalCategoriesDicts = result.data[4] || [];
                        this.tableData.forEach((i) => {
                            this.technicalScopeDicts.forEach((v) => {
                                if (i.technicalScope == v.value) {
                                    i.technicalScope = v.label;
                                }
                            })
                            this.phaseTypeDicts.forEach((v) => {
                                if (i.phaseType == v.value) {
                                    i.phaseType = v.label;
                                }
                            })
                            this.projectApproveStatus.forEach((v) => {
                                if (i.approveStatus == v.value) {
                                    i.approveStatus = v.label;
                                }
                            })
                            this.projectReleaseStatus.forEach((v) => {
                                if (i.releaseStatus == v.value) {
                                    i.releaseStatus = v.label;
                                }
                            })
                        })
                        }
                    });
                }
                
          })
            },
            toView(router,json){
                this.$router.push({name:router,params:{key:json}})
            },
            // 发布
            release(index, rows) {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$confirm('此操作将发布此项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        commit(rows[index].id).then(res=>{
                            this.$message({
                                message: '发布成功',
                                type: 'success'
                            });
                            this.toInitData();
                            }).catch((error) => {
                                this.$message.error(res.msg);
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消发布'
                        });          
                    });
                } else {
                    this.$confirm('This operation will publish this item. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Determine',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                    }).then(() => {
                        commit(rows[index].id).then(res=>{
                            this.$message({
                                message: 'Published Successfully',
                                type: 'success'
                            });
                            this.toInitData();
                            }).catch((error) => {
                                this.$message.error(res.msg);
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: 'Unpublished'
                        });          
                    });
                }
                
            },
            // 编辑
            change(index, rows) {
                console.log(index, rows[index].id)
                this.toView('addMyProject',rows[index].id)
            },
            // 删除
            deleteRow(index, rows) {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$confirm(this.$t('common.Thisoperationwillpermanently'), this.$t('common.Tips'), {
                        confirmButtonText: this.$t('common.OK'),
                        cancelButtonText: this.$t('common.cancel'),
                    type: 'warning'
                    }).then(() => {
                        del(rows[index].id).then(res=>{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.toInitData();
                            }).catch((error) => {
                                this.$message.error(res.msg);
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: this.$i18n.locale === 'zh' ? '已取消删除' : 'Deletion canceled',
                        });          
                    });
                } else {
                    this.$confirm('This operation will permanently delete the message. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Determine',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                    }).then(() => {
                        del(rows[index].id).then(res=>{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.toInitData();
                            }).catch((error) => {
                                this.$message.error(res.msg);
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: 'Deletion Cancelled'
                        });          
                    });
                }
                
            },
            // 撤回
            withdraw(index,rows) {
                if (this.$i18n.locale.toUpperCase() == "ZH") {
                    this.$confirm('此操作将撤回此项目, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                        bak(rows[index].id).then(res=>{
                            this.$message({
                                message: res.msg,
                                type: 'success'
                            });
                            this.toInitData();
                            }).catch((error) => {
                                this.$message.error(res.msg);
                            })
                    }).catch(() => {
                        this.$message({
                            type: 'info',
                            message: '已取消撤回'
                        });          
                    });
                } else {
                    this.$confirm('This operation will recall this item. Do you want to continue?', 'Tips', {
                    confirmButtonText: 'Determine',
                    cancelButtonText: 'Cancel',
                    type: 'warning'
                }).then(() => {
                    bak(rows[index].id).then(res=>{
                        this.$message({
                            message: res.msg,
                            type: 'success'
                        });
                        this.toInitData();
                        }).catch((error) => {
                            this.$message.error(res.msg);
                        })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: 'Recall Cancelled'
                    });          
                });
                }
                
            },
            handleSizeChange(val) {
                console.log(`每页 ${val} 条`);
            },
            handleCurrentChange(val) {
               this.params.pageNo=val;
                this.toInitData()
            }
        }
    }
</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;
    }

    .taberPhone1 {
        border-bottom: 2px solid #0c5afa;
        color: #0c5afa;
    }

    .el-table_body{
        color: red;
    }
    .userCenterMyProject >>> .el-table__row td:nth-of-type(1){
        color: #0a0000af !important;
    }
    .userCenterMyProject >>> .hover-row td:nth-of-type(1){
        color: #0079ef !important;
    }
    /* .projectName >>> .el-table__row td:nth-of-type(2){
      color: red ;
    } */
    .userCenterMyProject >>> .el-table__row td:nth-of-type(1) .cell{
        cursor: pointer;
    }
    
</style>