优化
This commit is contained in:
xiongchengqiang
parent
6cbae7c47e
commit
94eff82a21
@ -104,4 +104,31 @@ export function apiAssessresetdata(query) {
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取绩效任务详情
|
||||
export function apiTaskDetail(query) {
|
||||
return request({
|
||||
url: '/lz_management/performance/result/taskDetail',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 删除绩效任务
|
||||
export function apiDeleteTask(query) {
|
||||
return request({
|
||||
url: '/lz_management/performance/result/deleteTask',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 修改任务
|
||||
export function apiEditTask(query) {
|
||||
return request({
|
||||
url: '/lz_management/performance/result/changeTask',
|
||||
method: 'post',
|
||||
data: query
|
||||
})
|
||||
}
|
||||
@ -15,11 +15,11 @@
|
||||
<span>
|
||||
<span>整体进度：</span>
|
||||
</span>
|
||||
<el-progress :percentage="50"></el-progress>
|
||||
<el-progress :percentage="handleGetProgress(taskInfo.resultTasks)"></el-progress>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-content-left-title">
|
||||
<div> 关键结果（3）</div>
|
||||
<div> 关键结果（{{handleFilter(taskInfo.resultTasks).length}}）</div>
|
||||
<div>
|
||||
<i style="color:#409EFF;"
|
||||
class="el-icon-plus"></i>
|
||||
@ -27,9 +27,123 @@
|
||||
type="text">添加</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-for="i in 10"
|
||||
<div v-for="i in handleFilter(taskInfo.resultTasks)"
|
||||
class="boderAndRadius drawer-content-left-content">
|
||||
ss
|
||||
<div :style="{border:!(!i.updateProcess && i.label)?'none':''}"
|
||||
class="drawer-content-left-content-top">
|
||||
<div class="drawer-content-left-content-top-process">
|
||||
<el-progress type="circle"
|
||||
:width='40'
|
||||
:stroke-width='4'
|
||||
:percentage="Math.round((i.processRate * 100)*1000)/1000 "></el-progress>
|
||||
<div style="margin-left:10px;">
|
||||
<span v-if="!i.editProcess">{{i.name}}</span>
|
||||
<el-input v-if="i.editProcess"
|
||||
size="small"
|
||||
placeholder="请输入内容"
|
||||
v-model="form.input"
|
||||
clearable>
|
||||
</el-input>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div v-if="i.editProcess">
|
||||
<el-button size="mini"
|
||||
type="primary">确认</el-button>
|
||||
<el-button size="mini"
|
||||
@click="handleEditProcess(i,false)"
|
||||
type="danger">取消</el-button>
|
||||
</div>
|
||||
<div v-if="!i.editProcess"
|
||||
class="right-item">
|
||||
<div>
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="更新进度"
|
||||
placement="top-start">
|
||||
<i @click="handleUpdateProcess(i,true)"
|
||||
class="el-icon-refresh-left"></i>
|
||||
</el-tooltip>
|
||||
|
||||
</div>
|
||||
<div class="right-item-center">
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="评论"
|
||||
placement="top-start">
|
||||
<i class="el-icon-chat-square"></i>
|
||||
</el-tooltip>
|
||||
</div>
|
||||
<div>
|
||||
<el-dropdown size="mini">
|
||||
<el-tooltip class="item"
|
||||
effect="dark"
|
||||
content="更多"
|
||||
placement="top-start">
|
||||
<i class="el-icon-more"></i>
|
||||
</el-tooltip>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item @click.native="handleEditProcess(i,true)">编辑</el-dropdown-item>
|
||||
<el-dropdown-item @click.native="handleDetele(i.id)">删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="!i.updateProcess && i.label"
|
||||
class="drawer-content-left-content-center"
|
||||
:class="{bg:false}">
|
||||
<div class="content commonFont">
|
||||
<div class="drawer-content-left-content-center-left">
|
||||
<img v-if="true"
|
||||
:onerror="defaultImg"
|
||||
:src='i.avatar'
|
||||
alt="">
|
||||
<span v-if="true">{{i.staffName}}</span>
|
||||
<span v-if="true">:{{i.label}}</span>
|
||||
</div>
|
||||
<div>
|
||||
<i :class="{rate:false}"
|
||||
style=" cursor: pointer;color:#3ba1ff;"
|
||||
class="el-icon-arrow-down"></i>
|
||||
</div>
|
||||
</div>
|
||||
<pinglun v-if="false" />
|
||||
</div>
|
||||
<div v-if="i.updateProcess"
|
||||
class="drawer-content-left-content-bottom">
|
||||
<el-form :model="form"
|
||||
:rules="formRules"
|
||||
label-width="80px">
|
||||
<el-form-item label="当前进度:"
|
||||
prop="weight">
|
||||
<el-input size="small"
|
||||
@blur="$handleBlur('form.processRate')"
|
||||
@input.native="$handleInputInt('form.processRate')"
|
||||
v-model="form.processRate">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="进度说明:"
|
||||
prop="remake">
|
||||
<el-input type="textarea"
|
||||
size="small"
|
||||
v-model="form.remake">
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div style="text-align: right;">
|
||||
<el-button type="primary"
|
||||
size="mini"
|
||||
@click="handleEditTask">确定</el-button>
|
||||
<el-button @click="handleUpdateProcess(i,false)"
|
||||
size="mini">取消</el-button>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="drawer-content-right">
|
||||
@ -97,16 +211,27 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import InfoHeader from '@/components/InfoHeader'
|
||||
import pinglun from './pinglun.vue'
|
||||
|
||||
import { apiDeleteTask, apiEditTask } from '@/api/assessment'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
drawer: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
taskObj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {}
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
taskInfo: {},
|
||||
activeName: '1',
|
||||
formRules: {
|
||||
name: [{
|
||||
@ -121,14 +246,77 @@ export default {
|
||||
process: '0'
|
||||
},
|
||||
dialogFormVisible: false,
|
||||
title: '添加任务'
|
||||
title: '添加任务',
|
||||
defaultImg: 'this.src="' + require('@/assets/img/default.jpg') + '"'
|
||||
}
|
||||
},
|
||||
components: { pinglun },
|
||||
components: { pinglun, InfoHeader },
|
||||
computed: {},
|
||||
beforeMount () { },
|
||||
mounted () { },
|
||||
mounted () {
|
||||
this.taskInfo = Object.assign({}, this.taskObj)
|
||||
console.log(this.taskInfo)
|
||||
},
|
||||
methods: {
|
||||
async handleEditTask () {
|
||||
const res = await apiEditTask(Object.assign({}, this.form, { processRate: this.form.processRate / 100 }))
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.msg)
|
||||
return
|
||||
}
|
||||
this.form = {}
|
||||
this.taskInfo = await this.$parent.handleGetTaskDetail(this.taskInfo.detailId)
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
handleGetProgress (arr = []) {
|
||||
const result = this.handleFilter(arr).reduce((result, item) => {
|
||||
result += Number(item.processRate)
|
||||
return result
|
||||
}, 0)
|
||||
const _process = Number(result.toFixed(2)) / this.handleFilter(arr).length || 0
|
||||
return Number((_process * 100).toFixed(2))
|
||||
},
|
||||
async handleDetele (id) {
|
||||
let res = await apiDeleteTask({ taskId: id })
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.msg)
|
||||
return
|
||||
}
|
||||
this.taskInfo = await this.$parent.handleGetTaskDetail(this.taskInfo.detailId)
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
})
|
||||
},
|
||||
// 更新进度
|
||||
handleUpdateProcess (i, type = false) {
|
||||
this.taskInfo.resultTasks.map(i => {
|
||||
i.updateProcess = false
|
||||
})
|
||||
if (type) {
|
||||
this.form = Object.assign({}, i)
|
||||
this.form.taskId = this.form.id
|
||||
this.form.processRate = Math.round(Number(this.form.processRate) * 100)
|
||||
} else {
|
||||
this.form = {}
|
||||
}
|
||||
i.updateProcess = type
|
||||
console.log(this.form)
|
||||
this.$forceUpdate()
|
||||
},
|
||||
// 编辑/取消编辑进度
|
||||
handleEditProcess (i, type = false) {
|
||||
i.editProcess = type
|
||||
this.form = Object.assign({}, i)
|
||||
this.form.taskId = this.form.id
|
||||
this.$forceUpdate()
|
||||
},
|
||||
handleFilter (item) {
|
||||
return item ? item.filter(i => !i.isDelete) : []
|
||||
},
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event);
|
||||
},
|
||||
@ -136,7 +324,7 @@ export default {
|
||||
this.dialogFormVisible = true
|
||||
},
|
||||
handleClose () {
|
||||
this.$emit("update:drawer", false)
|
||||
this.$emit('update:drawer', false)
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
@ -156,6 +344,9 @@ export default {
|
||||
.el-drawer__body {
|
||||
overflow: auto;
|
||||
}
|
||||
.el-progress-bar {
|
||||
width: 94% !important;
|
||||
}
|
||||
</style>
|
||||
<style lang='less'>
|
||||
.drawer {
|
||||
@ -199,8 +390,72 @@ export default {
|
||||
font-size: 16px;
|
||||
}
|
||||
&-content {
|
||||
padding: 20px;
|
||||
margin-bottom: 10px;
|
||||
&-top {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
margin: 20px 20px 0;
|
||||
padding-bottom: 6px;
|
||||
&-process {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
> div {
|
||||
.center();
|
||||
}
|
||||
}
|
||||
.right {
|
||||
.center();
|
||||
&-item {
|
||||
cursor: pointer;
|
||||
border: 1px solid @borderColor;
|
||||
> div {
|
||||
padding: 2px;
|
||||
}
|
||||
display: flex;
|
||||
&-center {
|
||||
border-left: 1px solid @borderColor;
|
||||
border-right: 1px solid @borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.bg {
|
||||
background: #fafafa;
|
||||
}
|
||||
.rate {
|
||||
transform: rotate(180deg);
|
||||
transition: all 0.2s;
|
||||
}
|
||||
&-center {
|
||||
padding: 6px 20px 6px;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
align-content: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-left {
|
||||
flex: 1 0 auto;
|
||||
display: flex;
|
||||
align-content: center;
|
||||
img {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
margin-right: 10px;
|
||||
}
|
||||
span {
|
||||
.center();
|
||||
}
|
||||
}
|
||||
}
|
||||
&-bottom {
|
||||
padding: 10px 20px 6px;
|
||||
border-top: 1px solid @borderColor;
|
||||
}
|
||||
}
|
||||
}
|
||||
&-right {
|
||||
|
||||
@ -46,16 +46,16 @@
|
||||
<el-progress type="circle"
|
||||
:width='40'
|
||||
:stroke-width='4'
|
||||
:percentage="25"></el-progress>
|
||||
:percentage="Math.round((i.processRate * 100) * 1000) / 1000 "></el-progress>
|
||||
<el-button type="text"
|
||||
@click="handleLookProcess"
|
||||
@click="handleLookProcess(i)"
|
||||
size="mini">
|
||||
查看任务
|
||||
</el-button>
|
||||
</div>
|
||||
<div class="kaohe pre">
|
||||
<pre>
|
||||
{{i.keyResult}}o7
|
||||
{{i.keyResult}}
|
||||
</pre>
|
||||
</div>
|
||||
<div class="jieguo pre"
|
||||
@ -178,11 +178,13 @@
|
||||
<div v-if="scoreListForParams.length>0"
|
||||
class="commonFont"
|
||||
style="font-size:12px;margin:10px 0;">{{handleGetAllScore(scoreListForParams)}}</div>
|
||||
<process :drawer.sync='drawer' />
|
||||
<process v-if="!_.isEmpty(taskInfo)"
|
||||
:taskObj='taskInfo'
|
||||
:drawer.sync='drawer' />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { apiSaveDetail, apiGet375, apiSaveapproval } from '@/api/assessment'
|
||||
import { apiSaveDetail, apiGet375, apiSaveapproval, apiTaskDetail } from '@/api/assessment'
|
||||
import process from './process.vue';
|
||||
import { mapGetters } from 'vuex'
|
||||
|
||||
@ -215,11 +217,12 @@ export default {
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
drawer: true,
|
||||
drawer: false,
|
||||
loadingTi: false,
|
||||
loadingZan: false,
|
||||
input: '',
|
||||
scoreList: []
|
||||
scoreList: [],
|
||||
taskInfo: {},
|
||||
// score: {
|
||||
// lastScore: '',
|
||||
// scoreLevel: ''
|
||||
@ -282,8 +285,24 @@ export default {
|
||||
this.handleGrt375()
|
||||
},
|
||||
methods: {
|
||||
handleLookProcess () {
|
||||
this.drawer = true
|
||||
// 获取指标任务详情
|
||||
async handleGetTaskDetail (id = '') {
|
||||
let res = await apiTaskDetail({ detailId: id })
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.msg)
|
||||
return false
|
||||
}
|
||||
return Object.assign({}, res.data, { detailId: id })
|
||||
},
|
||||
async handleLookProcess (item) {
|
||||
console.log(item)
|
||||
this.taskInfo = {}
|
||||
let result = await this.handleGetTaskDetail(item.id)
|
||||
if (!result) return
|
||||
this.taskInfo = result
|
||||
this.$nextTick(() => {
|
||||
this.drawer = true
|
||||
})
|
||||
},
|
||||
handleGetAllScore (arr) {
|
||||
const result = arr.reduce((result, item) => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user