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