item-management-web/src/views/income/assets/evaluate.vue

<template>
    <div class="app-container">
        <div class="title-container">
            <breadcrumb id="breadcrumb-container" class="breadcrumb-container" />
        </div>
        <y-page-list-layout :page-list="pageData" :page-para="listQuery" :get-page-list="assetsEvaluateDeclarePage">
            <template slot="left">
                <el-input v-model="listQuery.orderId" placeholder="订单号" clearable style="width: 200px;float: left;"></el-input>
                <el-input v-model="listQuery.name" placeholder="项目名称" clearable style="margin-left: 20px;width: 200px;float: left;"></el-input>
                <el-input v-model="listQuery.reportNo" placeholder="报告号" clearable style="margin-left: 20px;width: 200px;float: left;"></el-input>
                <el-select clearable v-model="listQuery.commissionRateId" placeholder="提成类型" style="margin-left: 20px;width: 200px;float: left;">
                    <el-option v-for="(c, id) in cates" :value="c.id" :label="c.name">{{ c.name }}</el-option>
                </el-select>
                <!-- <el-select clearable v-model="listQuery.declareType" placeholder="申报类型"
                    style="margin-left: 20px;width: 200px;float: left;">
                    <el-option :value="true" label="产品">产品</el-option>
                    <el-option :value="false" label="订单">订单</el-option>
                </el-select>-->
                <el-select clearable v-model="listQuery.declareResult" placeholder="审核状态" style="margin-left: 20px;width: 200px;float: left;">
                    <el-option value="待申报" label="待申报"></el-option>
                    <el-option value="审核中" label="审核中"></el-option>
                    <el-option value="审核通过" label="审核通过"></el-option>
                    <el-option value="审核拒绝" label="审核拒绝"></el-option>
                </el-select>
                <el-button class="filter-item" style="margin-left:20px;float: left;" type="primary" @click="searchList()" round>搜索</el-button>
                <el-button class="filter-item" style="float: left;" round type="success" @click="resetSearch()">重置</el-button>
            </template>
            <parentTable :data="pageData.records" slot="table" style="width: 100%;">
                <el-table-column label="订单号" width="150" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.orderId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="项目名称" width="150" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.name ? row.name : row.orderName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="报告号" width="200" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.reportNo ? row.reportNo : '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="评估对象类别" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.businessObjectType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托人" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.bailor }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托联系人" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.bailorContactName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="委托人电话" width="150" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.bailorContactTel }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="客户名称" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.clienteleName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="业务来源" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.clienteleSubName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="负责人" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.principal }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="下单时间" align="center">
                    <template slot-scope="{row}">
                        <span>{{ row.orderCreated }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="提成类型" width="150" align="center">
                    <template slot-scope="{row}">
                        <span style="color:red">{{ row.commissionType ? row.commissionType : '--' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="申报类型" align="center">
                    <template slot-scope="{row}">
                        <span style="font-weight: bold;">{{ row.reportNo ? '产品' : '订单' }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="审核状态" align="center">
                    <template slot-scope="{row}">
                        <el-tag v-if="row.declareResult == null" type="info" effect="plain">待申报</el-tag>
                        <el-tag v-else-if="row.declareResult == '审核中'" type="warning" effect="plain">审核中</el-tag>
                        <el-tag v-else-if="row.declareResult == '审核通过'" type="success" effect="plain">通过</el-tag>
                        <el-tag v-else-if="row.declareResult == '审核拒绝'" type="danger" effect="plain">拒绝</el-tag>
                    </template>
                </el-table-column>
                <el-table-column fixed="right" label="操作" align="center">
                    <template slot-scope="{row}">
                        <div>
                            <el-button v-if="row.declareResult == null || row.declareResult == '审核拒绝'" type="text" size="small" @click="openAssetsAchievementRatioDialog(row)">申报</el-button>
                            <el-button v-if="row.declareResult == '审核中' || row.declareResult == '审核通过' || row.declareResult == '审核拒绝'" type="text" size="small" @click="checkDetail(row.id)">查看</el-button>
                        </div>
                    </template>
                </el-table-column>
            </parentTable>
        </y-page-list-layout>
        <el-dialog :visible.sync="assetsAchievementRatioDialogVisible" @closed="resetBusinessPerformanceDistributionForm()" width="40%">
            <div v-if="businessPerformanceDistributionForm.distributionList !== null" class="createMajor-main-container">
                <div class="postInfo-container">
                    <div>
                        <el-divider content-position="left">
                            <h3 class="title">
                                <div class="avatar-wrapper icon-title">申报</div>
                                <div class="icon-info">评估人员提成申报</div>
                            </h3>
                        </el-divider>
                    </div>
                    <el-form :model="declareForm" ref="declareForm" :rules="rules">
                        <el-form-item label="业务分类：" prop="commissionRateId" label-width="140px" class="postInfo-container-item">
                            <el-select clearable v-model="declareForm.commissionRateId" placeholder="请选择业务分类" style="width: 100%;" @change="getAssetsEvaluateCateDetail()">
                                <el-option v-for="(c, id) in cates" :value="c.id" :label="c.name">{{ c.name }}</el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="提成比例：" prop="ratio" label-width="140px" class="postInfo-container-item">
                            <el-input v-model="declareForm.ratio" :placeholder="ratioPlaceholderData" type="number" :disabled="cateDetail == null || cateDetail.maxRatio == null">
                                <template #suffix>%</template>
                            </el-input>
                        </el-form-item>
                    </el-form>
                    <p style="color: red;">绩效比例&参与时长：</p>
                    <el-row style="margin-top: 10px;margin-left: 40px;" v-for="(member, index) in assetsBusinessMembers" :key="index" class="row-style">
                        <el-col>
                            <p style="width: 65px; display: inline-block; text-align: right;">{{ member.memberName }}：</p>
                            <el-input-number v-model="businessPerformanceDistributionForm.distributionList[index].performanceDistribution" :precision="2" :step="0.1" :max="100"></el-input-number>
                            <p style="margin-left: 5px; margin-right: 15px; display: inline-block;">%</p>
                            <el-input-number v-model="businessPerformanceDistributionForm.distributionList[index].participationDuration" :step="1"></el-input-number>
                            <p style="margin-left: 5px; display: inline-block;">小时</p>
                            <p style="margin-left: 15px; display: inline-block;">
                                <span v-if="member.memberType === '项目负责人'" style="color: blueviolet;">* {{ member.memberType }}</span>
                                <span v-if="member.memberType === '项目参与人'">* {{ member.memberType }}</span>
                                <span v-if="member.memberType === '签字师'" style="color: red;">* {{ member.memberType }}</span>
                            </p>
                        </el-col>
                    </el-row>
                    <el-row style="margin-top: 10px;margin-left: 40px;" class="row-style">
                        <el-col>
                            <el-button v-if="showDistributionButton" type="warning" @click="addUserDialogVisible = true, getAllUser()">添加人员</el-button>
                        </el-col>
                    </el-row>
                </div>
            </div>
            <span v-if="businessPerformanceDistributionForm.distributionList !== null" slot="footer" class="dialog-footer">
                <el-button @click="assetsAchievementRatioDialogVisible = false">取 消</el-button>
                <el-button v-if="showDistributionButton" type="primary" @click="assetsDeclare()">提 交</el-button>
            </span>
        </el-dialog>
        <el-dialog :visible.sync="addUserDialogVisible" width="350px">
            <el-select v-model="addUser" filterable placeholder="新增人员（可搜索）" style=" width: 200px;margin-right: 10px;float: left;">
                <el-option v-for="(u, id) in allUsers" :label="u.name" :key="u.id" :value="u"></el-option>
            </el-select>
            <el-button v-if="showDistributionButton" type="primary" @click="confirmAddUser()">确认</el-button>
        </el-dialog>
    </div>
</template>
<script>
import YPageListLayout from '@/components/YPageListLayout';
import Breadcrumb from '@/components/Breadcrumb';

export default {
    name: 'declareAssetEvaluate',
    components: {
        Breadcrumb,
        YPageListLayout,
    },
    filters: {},
    data() {
        var checkRatioValue = (rule, value, callback) => {
            if (this.cateDetail.maxRatio !== undefined && this.cateDetail.maxRatio !== null) {
                if (this.declareForm.ratio >= this.cateDetail.minRatio && this.declareForm.ratio <= this.cateDetail.maxRatio) {
                    callback();
                } else {
                    return callback(new Error('提成比例须在 ' + this.cateDetail.minRatio + '% - ' + this.cateDetail.maxRatio + '% 之间'));
                }
            } else {
                callback();
            }
        };
        return {
            allUsers: [],
            rules: {
                commissionRateId: [{ required: true, message: '业务分类不能为空', trigger: 'blur' }],
                ratio: [
                    { required: true, message: '提成比例不能为空', trigger: 'blur' },
                    { required: true, validator: checkRatioValue, trigger: 'blur' },
                ],
            },
            ratioPlaceholderData: '请输入提成比例',
            pageData: { records: [] },
            listQuery: {
                page: 1,
                size: 10,
                descs: 'id',
                name: null,
                reportNo: null,
            }, // 项目所有参与人信息
            assetsBusinessMembers: [],
            cates: [],
            cateDetail: null,
            declareDialog: false,
            declareForm: {
                orderId: null,
                name: null,
                reportNo: null,
                businessId: null,
                productionId: null,
                businessType: 'COMMISSION_DECLARE_ASSET_EVALUATE',
                commissionRateId: null,
                ratio: null,
                definedLowLimitAmount: null,
            },
            showDistributionButton: null,
            assetsAchievementRatioDialogVisible: false,
            // 资产绩效比例表单
            businessPerformanceDistributionForm: {
                businessId: null,
                businessType: null,
                reportNo: null,
                userType: null,
                distributionList: [],
            },
            addUserDialogVisible: false,
            addUser: null,
        };
    },
    created() {
        this.listQuery.name = this.$route.query.name;
        this.listQuery.reportNo = this.$route.query.reportNo;
        this.assetsEvaluateDeclarePage();
        this.getAssetsEvaluateCate();
    },
    methods: {
        resetSearch() {
            this.$router.push({ query: {} });
            this.orderDate = '';
            this.listQuery = {
                current: 1,
                size: 10,
                descs: 'id',
                name: null,
                reportNo: null,
            };
            this.assetsEvaluateDeclarePage();
        },
        searchList() {
            this.listQuery.current = 1;
            this.assetsEvaluateDeclarePage();
        },
        assetsEvaluateDeclarePage() {
            this.$api.commissonDeclare.assetsEvaluateDeclarePage(this.listQuery).then((res) => {
                if (res.code === 200) {
                    this.pageData = res.data;
                }
            });
        },
        getAssetsEvaluateCate() {
            this.$api.businessCommissionRate.cateList('ASSET_BUSINESS', 'EVALUATOR').then((res) => {
                if (res.code === 200) {
                    this.cates = res.data;
                }
            });
        },
        getAssetsEvaluateCateDetail() {
            this.$api.businessCommissionRate.detail(this.declareForm.commissionRateId).then((res) => {
                if (res.code === 200) {
                    this.cateDetail = res.data;
                    this.declareForm.definedLowLimitAmount = this.cateDetail.lowLimitAmount;
                    if (res.data.maxRatio == null) {
                        this.declareForm.ratio = this.cateDetail.minRatio;
                    } else {
                        this.declareForm.ratio = null;
                        this.ratioPlaceholderData = '请输入提成比例 ' + this.cateDetail.minRatio + '%' + ' - ' + this.cateDetail.maxRatio + '%';
                    }
                }
            });
        },
        checkDetail(id) {
            this.$router.push(
                `/income/assets/declare/detail?businessId=${id}&businessType=COMMISSION_DECLARE_ASSET_EVALUATE&doWorkflow=${false}&back=${'/income/assets/declare/evaluate'}&couldEdit=${false}`
            );
        },
        // 打开绩效比例分配弹窗
        openAssetsAchievementRatioDialog(row) {
            this.businessPerformanceDistributionForm.distributionList = [];
            this.assetsAchievementRatioDialogVisible = true;
            this.declareForm.name = row.name;
            this.declareForm.reportNo = row.reportNo;
            this.declareForm.businessId = row.businessId;
            this.declareForm.productionId = row.productionId;
            this.getPerformanceDistributionList(row);
        },
        // 获取资产绩效分配信息list
        getPerformanceDistributionList(row) {
            this.businessPerformanceDistributionForm.businessId = row.businessId;
            this.businessPerformanceDistributionForm.businessType = 'ASSET_BUSINESS';
            this.businessPerformanceDistributionForm.reportNo = row.reportNo;
            // 人员类型（市场人员/评估人员）
            this.businessPerformanceDistributionForm.userType = '评估人员';
            let selectDTO = this.businessPerformanceDistributionForm;
            selectDTO.distributionList = null;
            this.$api.businessPerformanceDistribution.getPerformanceDistributionList(this.businessPerformanceDistributionForm).then((res) => {
                if (res.code === 200 && res.data !== null && res.data.length > 0) {
                    this.businessPerformanceDistributionForm.distributionList = res.data;
                    this.getAssetsBusinessMembers(false, row);
                    this.showDistributionButton = false;
                } else {
                    this.showDistributionButton = true;
                    this.getAssetsBusinessMembers(true, row);
                }
            });
        },
        // 获取项目参与人信息
        getAssetsBusinessMembers(state, row) {
            let assetsBusinessMembersDTO = { businessId: null, reportNo: null };
            assetsBusinessMembersDTO.businessId = row.businessId;
            assetsBusinessMembersDTO.reportNo = row.reportNo;
            this.$api.assets.getAssetsBusinessMembers(assetsBusinessMembersDTO).then((res) => {
                // 返回不为空，且没有绩效分配信息
                if (res.code === 200 && res.data !== null) {
                    this.assetsBusinessMembers = res.data;
                    if (state) {
                        this.businessPerformanceDistributionForm.distributionList = [];
                        for (let i = 0; i < this.assetsBusinessMembers.length; i++) {
                            let memberInfo = {
                                memberId: this.assetsBusinessMembers[i].memberId,
                                performanceDistribution: 0,
                                participationDuration: 0,
                                memberType: this.assetsBusinessMembers[i].memberType,
                            };
                            if (memberInfo.memberType === '签字师') {
                                memberInfo.performanceDistribution = 8;
                            }
                            this.businessPerformanceDistributionForm.distributionList.push(memberInfo);
                        }
                    }
                }
            });
        },
        // 重置绩效分配表单
        resetBusinessPerformanceDistributionForm() {
            this.assetsAchievementRatioDialogVisible = false;
            this.businessPerformanceDistributionForm.businessId = null;
            this.businessPerformanceDistributionForm.businessType = null;
            this.businessPerformanceDistributionForm.reportNo = null;
        },
        // 新增评估人员绩效申报
        assetsDeclare() {
            this.$refs.declareForm.validate((valid) => {
                if (valid) {
                    const sum = this.businessPerformanceDistributionForm.distributionList.reduce((accumulator, obj) => {
                        return accumulator + obj.performanceDistribution;
                    }, 0);
                    if (sum === 100) {
                        this.declareForm.distributionDto = this.businessPerformanceDistributionForm;
                        this.$api.commissonDeclare.assetsDeclare(this.declareForm).then((res) => {
                            if (res.code === 200) {
                                this.$notify({
                                    title: '成功',
                                    message: '提成申报已提交',
                                    type: 'success',
                                    duration: 2000,
                                });
                                this.resetBusinessPerformanceDistributionForm();
                                this.assetsEvaluateDeclarePage();
                                this.declareDialog = false;
                            } else {
                                this.$notify({
                                    title: '失败',
                                    message: '提成申报提交失败，请联系管理员',
                                    type: 'error',
                                    duration: 2000,
                                });
                            }
                        });
                    } else {
                        this.$notify({
                            title: '警告',
                            message: '所有人员分配的绩效之和必须等于100%！',
                            type: 'error',
                            duration: 3000,
                        });
                    }
                }
            });
        },
        // 获取用户下拉列表
        getAllUser() {
            this.$api.user.simpleAll().then((res) => {
                if (res.code === 200) {
                    this.allUsers = res.data;
                }
            });
        },
        // 确认添加项目参与人
        confirmAddUser() {
            let memberInfo = {
                memberId: this.addUser.id,
                performanceDistribution: 0,
                participationDuration: 0,
                memberType: '项目参与人',
                memberName: this.addUser.name
            };
            this.businessPerformanceDistributionForm.distributionList.push(memberInfo);
            this.assetsBusinessMembers.push(memberInfo);
            this.addUser = null;
            this.addUserDialogVisible = false;
        },
    },
};
</script>
<style lang="scss" scoped>
/deep/.doWarehouseClass {
    border-radius: 10px;
}

.real-amount {
    /deep/ .el-form-item__label {
        color: red;
        font-weight: bold;
    }
}
</style>