优化
This commit is contained in:
xiongchengqiang
parent
da3de51df7
commit
43676551ba
@ -1,115 +1,142 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="goals">
|
||||
<SmallNav />
|
||||
<div class="goals-content boderAndRadius">
|
||||
<div class="goals-content-name">
|
||||
<InfoHeader :obj="{
|
||||
<div class="goals">
|
||||
<SmallNav />
|
||||
<div class="goals-content boderAndRadius">
|
||||
<div class="goals-content-name">
|
||||
<InfoHeader :obj="{
|
||||
src:obj.avatar,
|
||||
name:obj.staffName,
|
||||
departmentName:obj.departmentName
|
||||
}"/>
|
||||
</div>
|
||||
<div class="goals-content-tabbar">
|
||||
<el-tabs
|
||||
:value="activeId"
|
||||
>
|
||||
<el-tab-pane
|
||||
v-for="(i,index) in obj.recortModelDtos"
|
||||
:key="i.id"
|
||||
:label="i.name + ' ( '+( i.maxCount===null?(handleNumber(i)):(handleNumber(i)+'/'+i.maxCount))+' ) '"
|
||||
:name="String(i.id)">
|
||||
<div class="goals-content-tabbar-table">
|
||||
<div class="goals-content-tabbar-table-header commonFont">
|
||||
<span style="width:30%">指标名称</span>
|
||||
<span class="kaohe" style="width:30%">考核标准</span>
|
||||
<span style="width:30%">权重</span>
|
||||
<span style="width:10%">操作</span>
|
||||
</div>
|
||||
<div
|
||||
style="justify-content:center;"
|
||||
v-if="handleFilter(i.detailDtos).length===0"
|
||||
}" />
|
||||
</div>
|
||||
<div class="goals-content-tabbar">
|
||||
<el-tabs :value="activeId">
|
||||
<el-tab-pane v-for="(i,index) in obj.recortModelDtos"
|
||||
:key="i.id"
|
||||
:label="i.name + ' ( '+( i.maxCount===null?(handleNumber(i)):(handleNumber(i)+'/'+i.maxCount))+' ) '"
|
||||
:name="String(i.id)">
|
||||
<div class="goals-content-tabbar-table">
|
||||
<div class="goals-content-tabbar-table-header commonFont">
|
||||
<span style="width:30%">指标名称</span>
|
||||
<span class="kaohe"
|
||||
style="width:30%">考核标准</span>
|
||||
<span style="width:30%">权重</span>
|
||||
<span style="width:10%">操作</span>
|
||||
</div>
|
||||
<div style="justify-content:center;"
|
||||
v-if="handleFilter(i.detailDtos).length===0"
|
||||
class="goals-content-tabbar-table-content commonFont items">
|
||||
暂无指标
|
||||
暂无指标
|
||||
</div>
|
||||
<draggable v-model="i.tagetLibItems"
|
||||
:options='options1'>
|
||||
<div class="goals-content-tabbar-table-content commonFont items"
|
||||
v-for="(j,indexJ) in handleFilter(i.detailDtos)"
|
||||
:key="indexJ">
|
||||
<div style="width:30%"
|
||||
class="my-handle"><img style="width:20px;height:20px;"
|
||||
src="@/assets/img/yidong.png"
|
||||
alt="">{{j.target}}</div>
|
||||
<div style="width:30%"
|
||||
class="kaohe">
|
||||
<pre>{{j.keyResult}}</pre>
|
||||
</div>
|
||||
<draggable
|
||||
v-model="i.tagetLibItems"
|
||||
:options='options1'
|
||||
>
|
||||
<div
|
||||
class="goals-content-tabbar-table-content commonFont items"
|
||||
v-for="(j,indexJ) in handleFilter(i.detailDtos)"
|
||||
:key="indexJ"
|
||||
>
|
||||
<div style="width:30%" class="my-handle"><img style="width:20px;height:20px;" src="@/assets/img/yidong.png" alt="">{{j.target}}</div>
|
||||
<div style="width:30%" class="kaohe" ><pre >{{j.keyResult}}</pre></div>
|
||||
<div style="width:30%">{{ Math.round((j.checkWeight * 100)*1000)/1000}}%</div>
|
||||
<div style="width:10%">
|
||||
<el-button
|
||||
@click="hanidleEdit(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button
|
||||
@click="handleDelateWeidu(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</draggable>
|
||||
<div style=" padding: 10px;font-size:16px;" class="commonFont">
|
||||
<div>
|
||||
业务指标权重：{{handleGetWeight(i)}}% <span v-if="i.weight !== null">/{{Math.round((i.weight * 100)*1000)/1000}}%</span>
|
||||
</div>
|
||||
<div>
|
||||
所有指标总权重: {{ handleGetWeight1()}}%
|
||||
</div>
|
||||
</div>
|
||||
<div style=" padding: 10px;">
|
||||
<!-- <el-button size="mini" plain>选择指标项</el-button> -->
|
||||
<el-button @click="hanidleEdit(i,-1,index)" type="primary" icon="el-icon-plus" size="small" plain>增加指标项</el-button>
|
||||
<div style="width:30%">{{ Math.round((j.checkWeight * 100)*1000)/1000}}%</div>
|
||||
<div style="width:10%">
|
||||
<el-button @click="hanidleEdit(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
编辑
|
||||
</el-button>
|
||||
<el-button @click="handleDelateWeidu(j,indexJ,index)"
|
||||
type="text"
|
||||
size="small">
|
||||
删除
|
||||
</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<popup-right v-if="showIndicators" @cancel='handleCancelZhibiao' @submit="handleSubmitZhibiao" :title="zhibiaoTitle">
|
||||
<div slot="content" class="weiduManage">
|
||||
<el-form label-position="left" ref="formIndicators" :model="formIndicators" :rules="ruleIndicators" label-width="180px">
|
||||
<el-form-item label="指标类型">
|
||||
<el-select v-model="formIndicators.type" disabled placeholder="请选择维度类型">
|
||||
<el-option
|
||||
v-for="i in dimensionsList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="target" label='指标名称'>
|
||||
<el-input clearable size="small" v-model="formIndicators.target"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="考核标准" prop="keyResult">
|
||||
<el-input size="small" clearable :rows="24" type="textarea" v-model="formIndicators.keyResult"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权重" prop="weight">
|
||||
<el-input size="small" @blur="$handleBlur('formIndicators.checkWeight')" @input.native="$handleInputInt('formIndicators.checkWeight')" v-model="formIndicators.checkWeight">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</draggable>
|
||||
<div style=" padding: 10px;font-size:16px;"
|
||||
class="commonFont">
|
||||
<div>
|
||||
业务指标权重：{{handleGetWeight(i)}}% <span v-if="i.weight !== null">/{{Math.round((i.weight * 100)*1000)/1000}}%</span>
|
||||
</div>
|
||||
<div>
|
||||
所有指标总权重: {{ handleGetWeight1()}}%
|
||||
</div>
|
||||
</div>
|
||||
<div style=" padding: 10px;">
|
||||
<!-- <el-button size="mini" plain>选择指标项</el-button> -->
|
||||
<el-button @click="hanidleEdit(i,-1,index)"
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
size="small"
|
||||
plain>增加指标项</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</popup-right>
|
||||
<div class="goals-bottom">
|
||||
<div class="goals-bottom-content">
|
||||
<el-button size='small' @click="handleSaveDetail()" plain>暂存</el-button>
|
||||
<el-button size='small' type="primary" @click="handleGetNext" >提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</div>
|
||||
</div>
|
||||
<popup-right v-if="showIndicators"
|
||||
@cancel='handleCancelZhibiao'
|
||||
@submit="handleSubmitZhibiao"
|
||||
:title="zhibiaoTitle">
|
||||
<div slot="content"
|
||||
class="weiduManage">
|
||||
<el-form label-position="left"
|
||||
ref="formIndicators"
|
||||
:model="formIndicators"
|
||||
:rules="ruleIndicators"
|
||||
label-width="180px">
|
||||
<el-form-item label="指标类型">
|
||||
<el-select v-model="formIndicators.type"
|
||||
disabled
|
||||
placeholder="请选择维度类型">
|
||||
<el-option v-for="i in dimensionsList"
|
||||
:key="i.id"
|
||||
:label="i.name"
|
||||
:value="i.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item prop="target"
|
||||
label='指标名称'>
|
||||
<el-input clearable
|
||||
size="small"
|
||||
v-model="formIndicators.target"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="考核标准"
|
||||
prop="keyResult">
|
||||
<el-input size="small"
|
||||
clearable
|
||||
:rows="24"
|
||||
type="textarea"
|
||||
v-model="formIndicators.keyResult"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="权重"
|
||||
prop="weight">
|
||||
<el-input size="small"
|
||||
@blur="$handleBlur('formIndicators.checkWeight')"
|
||||
@input.native="$handleInputInt('formIndicators.checkWeight')"
|
||||
v-model="formIndicators.checkWeight">
|
||||
<template slot="append">%</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</popup-right>
|
||||
<div class="goals-bottom">
|
||||
<div class="goals-bottom-content">
|
||||
<el-button size='small'
|
||||
@click="handleSaveDetail()"
|
||||
plain>暂存</el-button>
|
||||
<el-button size='small'
|
||||
type="primary"
|
||||
@click="handleGetNext">提交</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
@ -117,7 +144,7 @@ import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
import InfoHeader from '@/components/InfoHeader'
|
||||
import PopupRight from '@/components/PopupRight'
|
||||
import draggable from 'vuedraggable'
|
||||
import {getDimensions} from '@/api/data'
|
||||
import { getDimensions } from '@/api/data'
|
||||
import { apiResultGetDetail, apiSaveDetail, apiSaveapproval } from '@/api/assessment'
|
||||
export default {
|
||||
data () {
|
||||
@ -127,17 +154,23 @@ export default {
|
||||
dimensionsList: [],
|
||||
formIndicators: {},
|
||||
ruleIndicators: {
|
||||
target: [{ required: true,
|
||||
target: [{
|
||||
required: true,
|
||||
message: '请输入指标名称',
|
||||
trigger: 'blur' }
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
keyResult: [{ required: true,
|
||||
keyResult: [{
|
||||
required: true,
|
||||
message: '请输入考核标准',
|
||||
trigger: 'blur' }
|
||||
trigger: 'blur'
|
||||
}
|
||||
],
|
||||
checkWeight: [{ required: true,
|
||||
checkWeight: [{
|
||||
required: true,
|
||||
message: '请输入权重大小',
|
||||
trigger: 'blur' }
|
||||
trigger: 'blur'
|
||||
}
|
||||
]
|
||||
},
|
||||
activeId: null,
|
||||
@ -165,7 +198,7 @@ export default {
|
||||
PopupRight
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
beforeMount () { },
|
||||
mounted () {
|
||||
this.handleGetDimensions()
|
||||
this.handleGetTbale()
|
||||
@ -199,16 +232,16 @@ export default {
|
||||
}
|
||||
}
|
||||
}
|
||||
let res1 = await apiSaveDetail(this.obj)
|
||||
if (res1.code !== 200) {
|
||||
this.$message.error(res1.msg)
|
||||
}
|
||||
const obj = {status: 1, menuName: '制定了'}
|
||||
const params = Object.assign({}, {resultRecordId: this.$route.query.id || ''}, obj)
|
||||
const obj = { status: 1, menuName: '制定了' }
|
||||
const params = Object.assign({}, { resultRecordId: this.$route.query.id || '' }, obj)
|
||||
let res = await apiSaveapproval(params)
|
||||
if (res.code !== 200) {
|
||||
this.$message.error(res.msg || '出错了 ')
|
||||
}
|
||||
let res1 = await apiSaveDetail(Object.assign({}, { commentId: res.commentId }, this.obj))
|
||||
if (res1.code !== 200) {
|
||||
this.$message.error(res1.msg)
|
||||
}
|
||||
this.$message({
|
||||
message: res.msg,
|
||||
type: 'success'
|
||||
@ -265,9 +298,9 @@ export default {
|
||||
this.$refs.formIndicators.validate((v) => {
|
||||
if (v) {
|
||||
if (this.formIndicators.index === -1) {
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos.push(Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100}))
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos.push(Object.assign({}, this.formIndicators, { checkWeight: this.formIndicators.checkWeight / 100 }))
|
||||
} else {
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100})
|
||||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, { checkWeight: this.formIndicators.checkWeight / 100 })
|
||||
}
|
||||
this.showIndicators = false
|
||||
}
|
||||
@ -308,7 +341,7 @@ export default {
|
||||
return item ? item.filter(i => !i.isDelete) : []
|
||||
},
|
||||
async handleGetTbale (id = this.$route.query.id) {
|
||||
let res = await apiResultGetDetail({id})
|
||||
let res = await apiResultGetDetail({ id })
|
||||
if (res.code !== 200) return
|
||||
this.obj = res.data
|
||||
this.activeId = String(res.data.recortModelDtos[0].id)
|
||||
@ -321,28 +354,28 @@ export default {
|
||||
</script>
|
||||
|
||||
<style lang='less' scoped>
|
||||
.goals{
|
||||
.kaohe{
|
||||
flex: none;
|
||||
width: 500px;
|
||||
display: block;
|
||||
pre{
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
.goals {
|
||||
.kaohe {
|
||||
flex: none;
|
||||
width: 500px;
|
||||
display: block;
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
word-wrap: break-word;
|
||||
word-break: break-all;
|
||||
}
|
||||
}
|
||||
}
|
||||
margin-bottom: 100px;
|
||||
position: relative;
|
||||
.my-handle{
|
||||
cursor: move ;
|
||||
.my-handle {
|
||||
cursor: move;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
img{
|
||||
img {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
&-bottom{
|
||||
&-bottom {
|
||||
position: fixed;
|
||||
height: 60px;
|
||||
border-top: 1px solid @borderColor;
|
||||
@ -351,7 +384,7 @@ export default {
|
||||
background: #fff;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
&-content{
|
||||
&-content {
|
||||
padding: 0 80px;
|
||||
margin: 0 auto;
|
||||
height: 100%;
|
||||
@ -360,55 +393,55 @@ export default {
|
||||
justify-content: flex-end;
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
&-content {
|
||||
padding: 28px;
|
||||
&-name{
|
||||
&-name {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-title{
|
||||
margin: 0 0 10PX 0;
|
||||
&-title {
|
||||
margin: 0 0 10px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
&-img{
|
||||
&-img {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
img{
|
||||
img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
&-right{
|
||||
&-right {
|
||||
margin-left: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
&-tabbar{
|
||||
&-table{
|
||||
&-header{
|
||||
&-tabbar {
|
||||
&-table {
|
||||
&-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
height: 60px;
|
||||
background: rgb(231, 231, 231);
|
||||
border-bottom: 1px solid @borderColor;
|
||||
span{
|
||||
padding:0 0 0 20px;
|
||||
span {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
&-content{
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
// align-items: center;
|
||||
&-content {
|
||||
display: flex;
|
||||
padding: 20px 0;
|
||||
// align-items: center;
|
||||
// height: 60px;
|
||||
border-bottom: 1px solid @borderColor;
|
||||
justify-content: space-between;
|
||||
div{
|
||||
padding:0 0 0 20px;
|
||||
div {
|
||||
padding: 0 0 0 20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user