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

<template>
    <div style="width: 100%;background: #fff;min-height: 700px;color: #666;" class="userCenterMyProject">
        <div style="padding:20px 0 0 0;background: #f2f2f2;margin-left: 0px;margin-top: 5px;border: 1px solid #ccc;">
                <el-form :inline="true" :model="params" class="demo-form-inline" style="padding:0 40px">
                    <el-row>
                        <el-form-item :label="$t('common.ProjectType') + ':'">
                                <el-checkbox-group v-model="params.technicalCategories"  :placeholder="$t('common.SelectType')">
                                    <el-col :span="6" v-for="item in technicalCategoriesDicts" >
                                        <el-checkbox :key="item.value"  :label="item.value">{{item.label}}</el-checkbox>
                                    </el-col>
                                </el-checkbox-group>
                        </el-form-item>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item :label="$t('common.technicalScope') + ':'">
                                <el-checkbox-group v-model="params.technicalScope" :placeholder="$t('common.SelectTechnicalScope')">
                                    <el-col :span="5" v-for="item in technicalScopeDicts" >
                                        <el-checkbox  :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                                    </el-col>
                                </el-checkbox-group>
                                </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col>
                            <el-form-item :label="$t('common.projectPhase') + ':'">
                                <el-checkbox-group v-model="params.phaseType" :placeholder="$t('common.EnterPhase')">
                                    <el-col :span="5" v-for="item in phaseTypeDicts" >
                                        <el-checkbox  :key="item.value" :label="item.value">{{item.label}}</el-checkbox>
                                    </el-col>
                                </el-checkbox-group>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row style="padding-bottom: 20px;">
                        <el-col :span="3" style="float: right;">
                            <el-button @click="saveData" type="primary" style="width:70px">{{$t('common.Save')}}</el-button>
                            <!-- <el-button type="info">{{$t('common.reset')}}</el-button> -->
                        </el-col>
                        <el-col :span="3" style="float: right;">
                            <!-- <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>
</template>
<script>
    import Base from "@/views/base/Base";
    import {getDicts} from '@/api/dict';
    import {getBaseProjectIntentionsByPortal,saveOrUpdateByPortal} from '@/api/project/baseProjectIntention'
    export default {
        name: 'userCenterMyProjectIntention',
        extends: Base,
        data () {
            return {
                language:this.$i18n.locale.toUpperCase(),
                num: 0,
                formInline: {
                    user: '',
                    region: ''
                },
                params: {
                    pageNo: 1,
                    pageSize: 10,
                    technicalCategories: [],
                    technicalScope:[],
                    phaseType:[],
                    createBy: "",
                    projectName:"",
                    publishingChannels:"1",
                    approveStatus:"",
                    language:""
                },
                baseProjectIntention: {
                    id: null,
                    intentionConfig: '',
                    status: '',
                    createBy: '',
                    createDate: '',
                    updateBy: '',
                    updateDate: '',
                    reserveOne: '',
                    reserveTwo: '',
                    reserveThree: '',
                    reserveFour: '',
                    reserveFive: '',
                },
                tableData: [],
                technicalScopeDicts: [],
                phaseTypeDicts: [],
                technicalCategoriesDicts:[],
                projectReleaseStatus: [],
                projectApproveStatus: [],
            }
        },
        mounted() {
            this.toInitData();
            // this.getRecommended();
            this.toDate=Date.parse(new Date());
        },
        watch:{
            '$i18n.locale'(){
            this.toInitData();
            this.language = this.$i18n.locale.toUpperCase();
            // 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 that = this;
                this.params.language = this.$i18n.locale.toUpperCase();
                this.resetToken();
                this.submitHandler((token) => {
                    getBaseProjectIntentionsByPortal(this.params, token).then((result) => {
                        // console.log(this.params);
                        var data = result.data;
                        // console.log(data.baseProjectViews,'----------------------------------------------')
                        if (data.baseProjectIntentions) {
                            that.baseProjectIntention = data.baseProjectIntentions[0];
                            let config = JSON.parse(that.baseProjectIntention.intentionConfig);
                            that.params.technicalCategories = config.technicalCategories;
                            that.params.phaseType = config.phaseType;
                            that.params.technicalScope = config.technicalScope;
                        }
                        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;
                                            }
                                        })
                                    })
                                }
                            });
                        }

                    }).catch((error) => {
                        // 此处你的业务代码
                        console.log(error)
                        this.resetToken();
                    });
                })
            },
            // 发布
            saveData:function() {
                let config = {
                    technicalCategories:[],
                    technicalScope:[],
                    phaseType:[],
                }
                config.technicalCategories = this.params.technicalCategories;
                config.phaseType = this.params.phaseType;
                config.technicalScope = this.params.technicalScope;
                this.baseProjectIntention.intentionConfig = JSON.stringify(config);
                this.resetToken();
                this.submitHandler((token) => {
                    saveOrUpdateByPortal(JSON.stringify(this.baseProjectIntention), token,this.language).then((result) => {
                       alert(result.msg)
                    }).catch((error) => {
                        // 此处你的业务代码
                        console.log(error)
                        this.resetToken();
                    });
                });
            },
            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;
    }
    .userCenterMyProject >>> .el-form-item__label{
        font-weight: 700;
        font-size: 15px;
    }
    .userCenterMyProject >>>.el-form--inline .el-form-item__content{
        display: block;
    }
</style>