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

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" 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" maxlength="10" show-word-limit :placeholder="$t('common.EnterName')"></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="10">
                            <el-form-item :label="$t('common.approveStatus')">
                                <el-select v-model="params.approveStatus" :placeholder="$t('common.SelectApproveStatus')">
                                    <el-option
                                        v-for="item in projectApproveStatus"
                                        :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-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="3">
                            <el-button @click="toInitData" type="primary" style="width:70px">{{$t('common.uquery')}}</el-button>
                            <!-- <el-button type="info">{{$t('common.reset')}}</el-button> -->
                        </el-col>
                        <el-col :span="2">
                            <!-- <el-button type="primary">{{$t('common.query')}}</el-button> -->
                            <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
                style="width: 100%" >
                <template slot="empty">
                    {{$t('common.UserNoData')}}
                </template>
                <el-table-column fixed prop="projectName" :label="$t('common.projectName')" width="210" > </el-table-column>
                <el-table-column prop="technicalScope" :label="$t('common.RangeTechnology')" width="150"> </el-table-column>
                <el-table-column prop="phaseType" :label="$t('common.projectPhase')" width="150"></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 Screen from "@/components/screen";
    import { gateGetProjectViewInfo, getBannerPath,getBaseProjectViews} from "@/api/project/baseProjectView";
    import { getBaseProjectEntityes, commit, bak, del} from "@/api/project/baseProjectEntity";
    import { getBaseProjectInfos } from "@/api/project/baseProjectInfo";
    import { downloadFile,downloadAttachment} from "@/api/file";
    import { formatDate } from "@/utils/formatUtils";
    import { getToken } from '@/utils/auth'
    export default {
        name: 'userCenterMyProject',
        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:{
            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();
                getBaseProjectEntityes(this.params,token).then((result) => {
                    // console.log(this.params);
                    var data = result.data;
                    // console.log(data.baseProjectViews,'----------------------------------------------')
                    if (data.baseProjectEntitys) {
                    this.num = parseInt(data.page.totalCount);
                    this.tableData = data.baseProjectEntitys;
                    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.param.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;
    }
    
</style>