manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/budgetReview.vue

<template>
    <section>
        <div class="budgetReviewHeader">
            <div class="budgetReviewHeader_Form">
                <!-- 日期 -->
                <div class="budgetReviewHeader_FormItem">
                    <el-date-picker size="small" v-model="screeningConditionForm.dateRange" :editable="false"
                        format="yyyy-MM-dd" value-format="yyyy-MM-dd" :clearable="false" :range-separator="'至'"
                        type="daterange" :start-placeholder="'开始日期'" :end-placeholder="'结束日期'" style="width: 260px"
                        @change="getList"></el-date-picker>
                </div>
                <!-- 项目 -->
                <div class="budgetReviewHeader_FormItem">
                    <div class="budgetReviewHeader_FormItemText">项目：</div>
                    <el-select v-model="screeningConditionForm.projectId" filterable placeholder="请选择项目" clearable
                        size="small" @change="getList">
                        <el-option v-for="item in projectList" :key="item.id"
                            :label="item.projectName + '\u3000' + item.projectCode" :value="item.id">
                            <span class="selectProRight">{{ item.projectCode }}</span>
                            <span class="selectProleft">{{ item.projectName }}</span>
                        </el-option>
                    </el-select>
                </div>
                <!-- 审核人 -->
                <div class="budgetReviewHeader_FormItem">
                    <div class="budgetReviewHeader_FormItemText">审核人：</div>
                    <el-select v-model="screeningConditionForm.checkUserId" filterable placeholder="请选择审核人" clearable
                        size="small" v-if="user.userNameNeedTranslate != 1" style="width: 130px;" @change="getList">
                        <el-option v-for="item in usersList" :key="item.id" :label="item.name + '\u3000' + item.jobNumber"
                            :value="item.id">
                            <span class="selectProRight">{{ item.jobNumber }}</span>
                            <span class="selectProleft">{{ item.name }}</span>
                        </el-option>
                    </el-select>
                    <selectCat :size="'small'" :subject="usersList" :subjectId="screeningConditionForm.checkUserId"
                        :clearable="true" :filterable="true" :searchBoxTop="1" stinction="'1'" @selectCal="selectCal"
                        v-if="user.userNameNeedTranslate == 1" :widthStr="'130'"></selectCat>
                </div>
                <!-- 审核状态 -->
                <div class="budgetReviewHeader_FormItem">
                    <div class="budgetReviewHeader_FormItemText">审核状态：</div>
                    <el-select v-model="screeningConditionForm.status" filterable placeholder="请选择状态" clearable size="small"
                        style="width: 120px;" @change="getList">
                        <el-option v-for="item in auditStatus" :key="item.id" :label="item.label" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div class="budgetReviewHeader_btn">
                <el-button type="primary" size="small" @click="exportReport" :loading="exporListLoading">导出</el-button>
            </div>
        </div>
        <!--列表-->
        <el-table :data="list" ref="multipleTable" highlight-current-row v-loading="listLoading" :height="tableHeight"
            style="width: 100%;">
            <el-table-column prop="projectName" :label="'项目名称'" sortable min-width="200px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.projectName }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="groupName" :label="'分组名称'" sortable min-width="180px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.groupName }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="creator" :label="'提交人'" sortable min-width="120px">
                <template slot-scope="scope">
                    <div>
                        <span v-if="user.userNameNeedTranslate == '1'">
                            <TranslationOpenDataText type='userName' :openid='scope.row.creator'></TranslationOpenDataText>
                        </span>
                        <span v-else>
                            {{ scope.row.creator }}
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="createTime" :label="'提交时间'" sortable min-width="120px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.createTime }}
                        </span>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="oldManDay" :label="'变更前预估工时'" sortable min-width="150px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.oldManDay }}人天 / {{ scope.row.oldEstimatedWorkTime }}小时
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="changeManDay" :label="'预估工时变更'" sortable min-width="150px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.changeManDay }}人天 / {{ scope.row.changeEstimatedWorkTime }}小时
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="nowManDay" :label="'变更后预估工时'" sortable min-width="150px">
                <template slot-scope="scope">
                    <div>
                        <span>
                            {{ scope.row.nowManDay }}人天 / {{ scope.row.nowEstimatedWorkTime }}小时
                        </span>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="remark" :label="'变更理由'" sortable width="200px">
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.remark && scope.row.remark.length > 11">
                            <el-tooltip class="remarkClassItem" effect="dark" :content="scope.row.remark" placement="top">
                                <div class="remarkClass">{{ scope.row.remark }}</div>
                            </el-tooltip>
                        </div>
                        <div v-else>
                            {{ scope.row.remark }}
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="rejectReason" :label="'驳回理由'" sortable width="200px">
                <template slot-scope="scope">
                    <div>
                        <div v-if="scope.row.rejectReason && scope.row.rejectReason.length > 11">
                            <el-tooltip class="remarkClassItem" effect="dark" :content="scope.row.rejectReason" placement="top">
                                <div class="remarkClass">{{ scope.row.rejectReason }}</div>
                            </el-tooltip>
                        </div>
                        <div v-else>
                            {{ scope.row.rejectReason}}
                        </div>
                    </div>
                </template>
            </el-table-column>

            <el-table-column prop="status" :label="$t('state.states')" sortable>
                <template slot-scope="scope">
                    <span v-if="scope.row.status == 0" style="color:#DAA520;">{{ '待审核' }}</span>
                    <span v-else-if="scope.row.status == 1" style="color:#32CD32;">{{ $t('state.alreadyPassed') }}</span>
                    <span v-else-if="scope.row.status == 2" style="color:#FF0000;">{{ $t('state.rejected') }}</span>
                    
                </template>
            </el-table-column>
            <el-table-column :label="$t('operation')" width="220" fixed="right">
                <template slot-scope="scope">
                    <el-button v-if="scope.row.status == 0" type="primary" :loading="logining" size="small"
                        @click="review(scope.row.id, 1)">{{ $t('btn.through') }}</el-button>
                    <el-button v-if="scope.row.status == 0" type="danger" :loading="logining" size="small"
                        @click="review(scope.row.id, 2)">{{ $t('btn.rejected') }}</el-button>
                </template>
            </el-table-column>
        </el-table>

    </section>
</template>

<script>
// 引入自定义组件
import selectCat from "@/components/select.vue"

export default {
    components: {
        selectCat,
    },
    data() {
        return {
            list: [],
            tableHeight: 0,
            listLoading: false,
            defaultExpandAllFlg: false,
            exporListLoading: false,
            user: JSON.parse(sessionStorage.getItem("user")),

            usersList: [],
            searchUsersList: [],
            projectList: [],
            auditStatus: [
                { id: 1, label: '待审核' },
                { id: 2, label: '审核通过' },
                { id: 3, label: '已驳回' }
            ],

            screeningConditionForm: {
                projectId: '',
                dateRange: '',
                checkUserId: '',
                status: ''
            }
        };
    },
    filters: {
        manHourText(value) {
            return value == 0 ? 0 : value + 'h';
        }
    },
    methods: {
        review(id,checkType){
            if(checkType==2){
                this.$prompt('请输入驳回理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                }).then(({ value }) => {
                this.http.post("/group-budget-review/check", {id:id,checkType:checkType,rejectReason:value},
                    res => {
                    if (res.code == "ok") {
                        this.$message({
                            message:"操作成功",
                            type: "success"
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '取消驳回'
                    });       
                    });
                }else{
                this.http.post("/group-budget-review/check", {id:id,checkType:checkType,rejectReason:""},
                    res => {
                    if (res.code == "ok") {
                        this.$message({
                            message:"操作成功",
                            type: "success"
                        });
                        this.getList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            }
            
        },
        //获取待审核的数据列表
        getList() {
            this.listLoading = true;
            const { projectId, dateRange, checkUserId, status } = this.screeningConditionForm;
            const params = {
                ...(projectId && { projectId }),
                ...(dateRange && { startDate: dateRange[0], endDate: dateRange[1] }),
                ...(checkUserId && { checkUserId }),
                ...(status && { status }),
            };
            this.http.post("/group-budget-review/list", {
                ...params
            },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.list = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        //获取项目列表
        getProjectList() {
            this.http.post(this.port.project.list, {},
                res => {
                    if (res.code == "ok") {
                        this.projectList = res.data;
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        // 获取所有人员
        getUsers() {
            this.http.post('/user/getSimpleActiveUserList', {},
                res => {
                    if (res.code == "ok") {
                        this.usersList = res.data;
                        this.searchUsersList = this.usersList
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        },
        selectCal(obj) {
            console.log(obj, '过来的数据')
            if (obj.distinction == 1) {
                this.screeningConditionForm.checkUserId = obj.id
                this.getList()
            }
        },
        // 获取当月第一天到现在的日期
        getNowMonth() {
            let date = new Date();
            let year = date.getFullYear();
            let month = date.getMonth() + 1;
            let day = date.getDate();
            let now = year + '-' + (month < 10 ? '0' + month : month) + '-' + (day < 10 ? '0' + day : day);
            let firstDay = year + '-' + (month < 10 ? '0' + month : month) + '-01';
            this.screeningConditionForm.dateRange = [firstDay, now]
        },
        // 导出
        exportReport() {
            const { projectId, dateRange, checkUserId, status } = this.screeningConditionForm;
            const params = {
                ...(projectId && { projectId }),
                ...(dateRange && { startDate: dateRange[0], endDate: dateRange[1] }),
                ...(checkUserId && { checkUserId }),
                ...(status && { status }),
            };
            this.exporListLoading = true;
            this.http.post('/group-budget-review/export', {
                ...params
            },
                res => {
                    this.exporListLoading = false
                    if (res.code == "ok") {
                        var filePath = res.data;
                        const a = document.createElement('a'); // 创建a标签
                        a.setAttribute('download', '预估工时审核');// download属性
                        a.setAttribute('href', filePath);// href链接
                        a.click(); //自执行点击事件
                        a.remove();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: "error"
                        });
                    }
                },
                error => {
                    this.exporListLoading = false
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
        }
    },
    created() {
        let height = window.innerHeight;
        this.tableHeight = height - 125;
        const that = this;
        window.onresize = function temp() {
            that.tableHeight = window.innerHeight - 125;
        };
    },
    mounted() {
        this.getNowMonth()
        this.getUsers();
        this.getProjectList()
        this.getList();
    }
};
</script>

<style lang="scss" scoped>
.propsbtn {
    display: inline-block;
    padding-left: 20px;
}

.remarkClass {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.selectProRight {
    float: right;
    color: #8492a6;
    font-size: 13px;
    margin-left: 10px;
}

.selectProleft {
    float: left;
}

.budgetReviewHeader {
    padding: 10px 20px;
    background: #F2F2F2;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

.budgetReviewHeader_Form {
    display: flex;

    .budgetReviewHeader_FormItem {
        display: flex;
        align-items: center;
        margin-right: 20px;

        .budgetReviewHeader_FormItemText {
            margin-right: 10px;
            font-size: 14px;
            color: #333;
        }
    }
}
</style>