<template> <div class="evaluationYear"> <div class="evaluationYearBtn"> <div class="collectSeach" :style="$utils.collectSeachSty()"> <div class="exceed"> <span class="exceedSpan">业务编号:</span> <el-input v-model="rescode" placeholder="请输入业务编号"></el-input> </div> <div class="exceed"> <span class="exceedSpan">业务简述:</span> <el-input v-model="resDes" placeholder="请输入业务简述"></el-input> </div> <seachs @handleSeach="getSeachData" @handleRest="resetSeach"></seachs> </div> <div class="PeriodBtn" :style="$utils.PeriodBtnSty()"> <btns :showImport="false" :showSave="false" :showExport="false" :showAdd="$utils.havePurview('evalYear:oneLevel:add')" :showDelete="$utils.havePurview('evalYear:oneLevel:delete')" :disDelete="changeDateSelect.length === 0" :disExport="true" @handleAdd="handleAdd" @handleDelete="handleDelete" @handleExport="handleExport" ></btns> </div> <div class="evaluationYearTableData"> <el-table :data="evaluationYearData" style="width: 100%" :class="yearTableSty()" @select="rowClick" @select-all="rowClick" @row-dblclick="getDetail"> <el-table-column type="selection" label="操作" align="center"></el-table-column> <el-table-column label="业务编号" prop="organizationEvaluationCode" width="300" /> <el-table-column label="考评单位" width="330"> <template #default="scope"> <el-tooltip class="tooltipName" effect="customized" :content="scope.row.createOrgName" placement="right" > <span class="tooltipCC">{{scope.row.createOrgName}}</span> </el-tooltip> </template> </el-table-column> <el-table-column label="业务类别"> <template #default="scope"> <span v-if="scope.row.checkCycle === 'YDKP'" style="font-size: 12px;">月度考评</span> <span v-else-if="scope.row.checkCycle === 'JDKP'" style="font-size: 12px;">季度考评</span> <span v-else style="font-size: 12px;">年度考评</span> </template> </el-table-column> <el-table-column label="年度" prop="year" /> <!-- <el-table-column label="月度/季度" prop="month" /> --> <el-table-column label="流程状态" prop="stage"> <template #default="scope"> <p class="indicitem" @click="seeStates(scope.row)">{{scope.row.stage}}</p> </template> </el-table-column> <el-table-column label="业务简述" prop="des" width="230"> <template #default="scope"> <el-tooltip class="box-item" effect="customized" :content="scope.row.des" placement="top" > <span class="tooltipCC">{{scope.row.des}}</span> </el-tooltip> </template> </el-table-column> <el-table-column label="操作" width="300"> <template #default="scope"> <div style="display:flex;justify-content: left;"> <div style="display:flex;justify-content: left;"> <p class="indicitem" v-if="scope.row.stage === '数据已生成'" @click="agetdeptresponsibility(scope.row)">启动</p> <p class="indicitem" v-if="scope.row.stage === '流程未启动' || scope.row.stage === '数据已生成'" @click="getMessageData(scope.row)">数据生成</p> </div> <div v-if="isAction" style="display:flex;justify-content: left;"> <p class="indicitem" v-if="scope.row.stage !== '流程已结束'" @click="calculateScore(scope.row)">计算得分</p> <p class="indicitem" style="cursor: no-drop;color: #d9d9d9" v-if="isReportshow">生成报表</p> <p class="indicitem" v-else @click="generateReport(scope.row)">生成报表</p> <p class="indicitem" @click="handleReport(scope.row)">指标考核打分</p> </div> </div> </template> </el-table-column> </el-table> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page.currentPage" :page-size="page.pagesize" layout="total, prev, pager, next, jumper" :total="page.total"> </el-pagination> </div> <el-dialog :title="title" v-model="dialogVisible" width="600px" :close-on-click-modal="false"> <div class="periodFrom"> <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" :validate-on-rule-change="false"> <el-form-item label="考评类别" prop="organizationType"> <el-select v-model="ruleForm.organizationType" placeholder="请选择考评类别" disabled> <el-option v-for="item in organizationType" :key="item.code" :label="item.label" :value="item.code"> </el-option> </el-select> </el-form-item> <el-form-item label="考评周期" prop="evaluationCycle"> <el-select v-model="ruleForm.evaluationCycle" placeholder="请选择考评周期"> <el-option v-for="item in periodData" :key="item.keyValue" :label="item.keyName" :value="item.keyValue" :disabled="item.keyValue === 'JDKP' || item.keyValue === 'YDKP'"> </el-option> </el-select> </el-form-item> <!-- <el-form-item label="考评规则" prop="evaluateRule"> <el-select v-model="ruleForm.evaluateRule" placeholder="请选择考评规则"> <el-option v-for="item in ruleDataAll" :key="item.id" :label="item.evaluateRuleName" :value="item.id"> </el-option> </el-select> </el-form-item> --> <el-form-item label="年份" prop="year"> <el-date-picker v-model="ruleForm.year" type="year" value-format="YYYY" placeholder="请选择年份" /> </el-form-item> <el-form-item label="描述" prop="desc"> <el-input v-model="ruleForm.desc" :rows="5" type="textarea" placeholder="请输入描述"></el-input> </el-form-item> </el-form> </div> <template #footer> <span class="dialog-footer"> <el-button @click="dialogVisible = false">取 消</el-button> <el-button type="primary" @click="saveevaluaStart('ruleForm')">确 定</el-button> </span> </template> </el-dialog> <el-dialog title="流程详情" v-model="statesVisible" :fullscreen="true" :close-on-click-modal="false"> <div class="flowSty"> <iframe id="iframeContain" width="100%" height="500px" frameborder="0" class="iframe" name="iframeContain" seamless scrolling="no" :src="iframeURL"> </iframe> <el-table :data="stageArr" style="width: 100%"> <el-table-column type="index" label="序号" align="center" /> <el-table-column label="任务名称" prop="taskName" /> <el-table-column label="任务创建时间" prop="createTime" /> <el-table-column label="任务处理时间" prop="approveTime" /> <el-table-column label="候选人" prop="assignInfo" width="300"> <template #default="scope"> <span>{{changeAssignInfo(scope.row)}}</span> </template> </el-table-column> <el-table-column label="执行人" prop="approverName" /> <el-table-column label="处理状态" prop="status"> <template #default="scope"> <div v-if="scope.row.status === 'start'">启动</div> <div v-else-if="scope.row.status === 'agree'">同意</div> <div v-else-if="scope.row.status === 'awaiting_check'">等待,待审批</div> <div v-else-if="scope.row.status === 'reject'">驳回</div> </template> </el-table-column> <el-table-column label="备注/意见" prop="opinion" /> </el-table> </div> </el-dialog> </div> <start-from-list ref="startFromDetail"></start-from-list> <month-quarter-year-report ref="reportDia"></month-quarter-year-report> </div> </template> <script> // import startFromList from './evaluationYearFrom.vue' import startFromList from './monthQuarterYearFrom.vue' import monthQuarterYearReport from './monthQuarterYearReport.vue' import btns from '../elbuttonS.vue' import seachs from '../seachGroup.vue' import {apiGetOrgEvaluationList, apiPostOrgEvaSave,apiPostOrgevaluationDelete,apiGetgenerateEvaluateReport,apiGetdoAction, apiGetgenerateUnitYearEvaluation, apiGetdatadictionaryList, apiGetcalculatorcron, apiGetworkflowgetOpinion} from '../../api/api' export default { components: { startFromList, monthQuarterYearReport, btns, seachs }, data() { return { dialogVisible: false, statesVisible: false, stageArr: [], title: '', iframeURL: '', windframradio: {}, deleteSelect: [], changeDateSelect: [], evaluationYearData:[], page:{ pagesize: 12, currentPage: 1, total: 0 }, ruleForm: { organizationType: '', evaluationCycle: '', evaluateRule: '', year: '', month: 0, desc: '' }, rules: { organizationType: [ { required: true, message: '请选择考评类别', trigger: 'change' } ], evaluationCycle: [ { required: true, message: '请选择考评周期', trigger: 'blur' } ], evaluateRule: [ { required: true, message: '请选择考评规则', trigger: 'change' } ], year: [ { required: true, message: '请选择年份', trigger: 'change' } ], desc: [ { required: true, message: '请输入描述', trigger: 'blur' } ] }, organizationType: [], periodData: [], ruleDataAll: [], rescode: '', resDes: '', isReportshow: false, isAction: false, winPix: window.devicePixelRatio, innerWidth: window.innerWidth } }, created() { this.organizationType = [ { label: '单位考评', code: 'DWKP' }, { label: '部门考评', code: 'BMKP' } ] this.getevaluStartList() this.getPeriodData() }, methods:{ // 查询列表页面 getevaluStartList() { let that = this let params = { pageNum: that.page.currentPage, pageSize: that.page.pagesize, checkCycle: 'NDKP', organizationEvaluationCode: that.rescode, des: that.resDes } apiGetOrgEvaluationList(params).then(datas =>{ if (datas && datas.data) { that.evaluationYearData = datas.data.records that.page.total = datas.data.total } }) }, //考评周期 getPeriodData() { let that = this let params = { superKey: 'KPZQ0001' } apiGetdatadictionaryList(params).then(datas =>{ if (datas && datas.data) { that.periodData = datas.data } }) }, saveevaluaStart(formName) { let that = this that.$refs[formName].validate((valid) => { if (valid) { that.saveAndEditIndicatorData() } }); }, //新增/修改考评启动数据 saveAndEditIndicatorData() { let that = this let userMes = JSON.parse(window.sessionStorage.getItem('user')) let params = { organizationType: that.ruleForm.organizationType, checkCycle: that.ruleForm.evaluationCycle, year: that.ruleForm.year, des: that.ruleForm.desc, createOrgId: userMes.unitId, createOrgName: userMes.unitName, createBy: userMes.id, createName: userMes.name } if (that.isSave) { params.id = this.evalradio.id } apiPostOrgEvaSave(params).then(datas =>{ if (!datas.success) { that.$message({ message: datas.message, type: 'error' }); } else { if (!that.isSave) { that.$message({ message: '考评规则新增成功', type: 'success' }); } else { that.$message({ message: '考评规则修改成功', type: 'success' }); } that.dialogVisible = false that.changeDateSelect = [] that.getevaluStartList() } }) }, getMessageData(row) { let that = this let params = { evaluationIds: row.id } apiGetgenerateUnitYearEvaluation(params).then(datas =>{ if (datas && datas.data) { if (!datas.success) { that.$message({ message: datas.message, type: 'error' }); } else { that.$message({ message: '年度考评目标数据已生成', type: 'success' }); that.getevaluStartList() } } }) }, agetdeptresponsibility(row) { let that = this that.isAction = false let par = { defKey: "nddwkplc", businessKey: row.id, action: "start", opinion: "年度单位考评流程", iamCode: window.localStorage.getItem('code') } apiGetdoAction(par).then(datas =>{ if (datas && datas.data) { if (datas.data.isOk) { that.isAction = true that.$message({ message: '年度考评目标已启动', type: 'success' }); that.getevaluStartList() } else { that.$message({ message: datas.data.msg, type: 'error' }); } } }) }, changeAssignInfo(row) { let showStr = '' if (row.assignInfo) { showStr = row.assignInfo.substring(row.assignInfo.indexOf('-')+1, row.assignInfo.length).substring(0, row.assignInfo.substring(row.assignInfo.indexOf('-')+1, row.assignInfo.length).indexOf('-')) } return showStr }, seeStates(row) { if (!row.instId) { this.$message({ type: 'error', message: '无法查看流程' }); } else { this.statesVisible = true let url = '' if (window.location.hostname === '10.65.78.81') { url = 'http://10.65.79.85:8080' } else { url = 'http://10.65.78.23:8080' } this.iframeURL = url+'/agilebpm-ui/bpm/instance/instanceImageDialog.html?instanceId='+row.instId+'&iamCode='+window.localStorage.getItem('code') this.getstageData(row.instId) } }, // 根据流程id获取业务id getstageData(id) { let that = this let params = { instId: id, iamCode: window.localStorage.getItem('code') } apiGetworkflowgetOpinion(params).then(datas =>{ if (datas && datas.data) { that.stageArr = datas.data.data } }) }, //明细 getDetail(row) { this.$refs.startFromDetail.init(row, '年度') }, //计算得分 calculateScore(row) { let that = this let params = { id: row.id } apiGetcalculatorcron(params).then(datas =>{ if (datas) { if (datas.success) { that.$message({ message: datas.message, type: 'success' }); } else { that.$message({ message: datas.message, type: 'error' }); } } }) }, //生成报表 generateReport(row) { let that = this that.isReportshow = true let params = { organizationEvaluationId: row.id } apiGetgenerateEvaluateReport(params).then(datas =>{ if (datas && datas.data) { that.isReportshow = false if (datas.success) { that.$message({ message: datas.message, type: 'success' }); } else { that.$message({ message: datas.message, type: 'error' }); } } }) }, getSeachData() { this.page.currentPage = 1 this.getevaluStartList() }, resetSeach() { this.page.currentPage = 1 this.rescode = '' this.resDes = '' this.getevaluStartList() }, handleSizeChange(val){ this.page.pagesize = val this.getevaluStartList() }, handleCurrentChange(val){ this.page.currentPage =val this.getevaluStartList() }, rowClick(selection, row) { this.changeDateSelect = selection }, handleAdd() { this.dialogVisible = true this.title = '新建表单填报' this.$nextTick(() =>{ this.$refs['ruleForm'].resetFields() this.ruleForm = { organizationType: 'DWKP', evaluationCycle: '', evaluateRule: '', year: '', month: 0, desc: '' } }) }, //删除 handleDelete() { this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { let that = this let paramsArr = [] that.changeDateSelect.forEach(it =>{ paramsArr.push(it.id) }) apiPostOrgevaluationDelete(paramsArr.join(',')).then(datas =>{ that.$message({ type: 'success', message: '删除成功!' }); that.getevaluStartList() that.changeDateSelect = [] }) }) }, handleReport(row) { this.$refs.reportDia.init(row) }, yearTableSty() { if (this.winPix === 1.25 || this.innerWidth < 1800) { return 'year125Table' } else { return 'year100Table' } } } } </script> <style lang="less"> .evaluationYear{ .evaluationYearBtn{ .collectSeach{ display: flex; padding: 24px 20px; border-bottom: 1px solid#D6DBEA; .exceed{ display: flex; .exceedSpan{ width: 100px; height: 12px; font-size: 14px; font-family: Microsoft YaHei; font-weight: 400; color: #8991B0; line-height: 12px; margin-top: 14px; } .el-input{ margin-right:10px; height: 40px; .el-input__inner{ height:40px; } .el-input__suffix{ .el-select__caret{ line-height:30px; } } } } .el-select{ margin-right:10px; .el-input__inner{ height:30px; } .el-input__suffix{ .el-select__caret{ line-height:30px; } } } } span{ font-size:14px; } .PeriodBtn{ display: flex; justify-content: flex-end; padding: 20px 0; } .el-button{ height: 30px; // width:100px; padding: 0 20px ; // padding-top: 8px; span{ margin:0; } } .evaluationYearTableData{ .year125Table{ .el-table__body-wrapper{ height: 53vh !important; } } .year100Table{ .el-table__body-wrapper{ height: 60vh !important; } } .el-table{ .el-input__inner{ height: 30px !important; } .el-radio__label{ display: none; } .tooltipCC{ width: 300px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tooltipCCDes{ width: 200px; display: inline-block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .indicitem{ color: #409EFF; font-size: 12px; margin-right: 20px; cursor:pointer; &:hover{ text-decoration: underline; } } } .el-pagination{ margin-top: 20px; text-align: end; position: relative; } } .el-overlay{ .el-dialog{ .el-dialog__body{ padding: 30px 60px 30px 20px !important; .periodFrom{ .el-select, .el-input{ width: 100%; } .el-input{ height: 30px; } } } } } } } </style>