306 lines
10 KiB
Vue
306 lines
10 KiB
Vue
<!-- -->
|
||
<template>
|
||
<div class="goals">
|
||
<SmallNav />
|
||
<div class="goals-content boderAndRadius">
|
||
<div class="goals-content-name">
|
||
<InfoHeader :obj="{
|
||
name:obj.currentApprovalStaffName,
|
||
departmentName:obj.departmentName
|
||
}"/>
|
||
<div>
|
||
<el-button size='small' @click="handleSaveDetail()" plain>暂存</el-button>
|
||
<el-button size='small' type="primary" >提交</el-button>
|
||
</div>
|
||
</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"
|
||
:name="String(i.id)">
|
||
<div class="goals-content-tabbar-table">
|
||
<div class="goals-content-tabbar-table-header commonFont">
|
||
<span style="width:30%">指标名称</span>
|
||
<span 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%"><i style="margin-right:6px;" class="my-handle el-icon-s-operation"></i>{{j.target}}</div>
|
||
<div style="width:30%">{{j.keyResult}}</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;">
|
||
<!-- <el-button size="mini" plain>选择指标项</el-button> -->
|
||
<el-button @click="hanidleEdit(i,-1,index)" size="mini" plain>增加指标项</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 type="textarea" v-model="formIndicators.keyResult"></el-input>
|
||
</el-form-item>
|
||
<el-form-item label="权重" prop="weight">
|
||
<el-input size="small" clearable v-model="formIndicators.checkWeight">
|
||
<template slot="append">%</template>
|
||
</el-input>
|
||
</el-form-item>
|
||
</el-form>
|
||
</div>
|
||
</popup-right>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
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 { apiResultGetDetail, apiSaveDetail } from '@/api/assessment'
|
||
export default {
|
||
data () {
|
||
return {
|
||
zhibiaoTitle: '添加指标',
|
||
showIndicators: false,
|
||
dimensionsList: [],
|
||
formIndicators: {},
|
||
ruleIndicators: {
|
||
target: [{ required: true,
|
||
message: '请输入指标名称',
|
||
trigger: 'blur' }
|
||
],
|
||
keyResult: [{ required: true,
|
||
message: '请输入考核标准',
|
||
trigger: 'blur' }
|
||
],
|
||
checkWeight: [{ required: true,
|
||
message: '请输入权重大小',
|
||
trigger: 'blur' }
|
||
]
|
||
},
|
||
activeId: null,
|
||
obj: {
|
||
recortModelDto: []
|
||
},
|
||
options1: {
|
||
group: 'names',
|
||
draggable: '.items',
|
||
handle: '.my-handle',
|
||
scroll: true,
|
||
sort: true, // 内部排序列表
|
||
delay: 0, // 以毫秒为单位定义排序何时开始。
|
||
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
|
||
disabled: false, // 如果设置为真，则禁用sortable。
|
||
store: null, // @see Store
|
||
animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
|
||
}
|
||
}
|
||
},
|
||
components: {
|
||
SmallNav,
|
||
InfoHeader,
|
||
draggable,
|
||
PopupRight
|
||
},
|
||
computed: {},
|
||
beforeMount () {},
|
||
mounted () {
|
||
this.handleGetDimensions()
|
||
this.handleGetTbale()
|
||
},
|
||
methods: {
|
||
async handleSaveDetail (params = this.obj) {
|
||
let res = await apiSaveDetail(params)
|
||
if (res.code !== 200) {
|
||
this.$message.error = res.msg
|
||
return
|
||
}
|
||
this.handleGetTbale()
|
||
console.log('res: ', res)
|
||
},
|
||
// 获取维度类型
|
||
async handleGetDimensions () {
|
||
try {
|
||
let res = await getDimensions()
|
||
if (res.code !== 200) {
|
||
this.dimensionsList = []
|
||
return
|
||
}
|
||
res = res.data
|
||
this.dimensionsList = res
|
||
} catch (error) {
|
||
this.$message.error(error.msg)
|
||
}
|
||
},
|
||
handleCancelZhibiao () {
|
||
this.showIndicators = false
|
||
},
|
||
handleSubmitZhibiao () {
|
||
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}))
|
||
console.log('this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].: ', this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex])
|
||
} else {
|
||
this.obj.recortModelDtos[this.formIndicators.dazhibiaoIndex].detailDtos[this.formIndicators.index] = Object.assign({}, this.formIndicators, {checkWeight: this.formIndicators.checkWeight / 100})
|
||
}
|
||
this.showIndicators = false
|
||
}
|
||
})
|
||
},
|
||
handleAddIndicators (item) {
|
||
console.log(item)
|
||
this.showIndicators = true
|
||
this.formIndicators = Object.assign({}, item)
|
||
},
|
||
// 编辑
|
||
hanidleEdit (item, index, type) {
|
||
if (index === -1) {
|
||
this.formIndicators = {}
|
||
} else {
|
||
this.formIndicators = Object.assign({}, item)
|
||
this.formIndicators.checkWeight = this.formIndicators.checkWeight * 100
|
||
}
|
||
this.formIndicators.dazhibiaoIndex = type
|
||
this.formIndicators.index = index
|
||
this.formIndicators.type = item.type
|
||
this.showIndicators = true
|
||
},
|
||
handleDelateWeidu (item, index, type) {
|
||
if (item.id) {
|
||
item.isDelete = 1
|
||
this.$forceUpdate()
|
||
return
|
||
}
|
||
this.obj.recortModelDtos[type].detailDtos = this.obj.recortModelDtos[type].detailDtos.filter(i => i !== item)
|
||
this.$forceUpdate()
|
||
},
|
||
handleFilter (item) {
|
||
return item ? item.filter(i => !i.isDelete) : []
|
||
},
|
||
async handleGetTbale (id = this.$route.query.id) {
|
||
let res = await apiResultGetDetail({id})
|
||
if (res.code !== 200) return
|
||
this.obj = res.data
|
||
this.activeId = String(res.data.recortModelDtos[0].id)
|
||
console.log('res: ', res)
|
||
}
|
||
},
|
||
watch: {}
|
||
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang='less' scoped>
|
||
.goals{
|
||
.my-handle{
|
||
cursor: move ;
|
||
}
|
||
&-content{
|
||
padding: 28px;
|
||
&-name{
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
&-title{
|
||
margin: 0 0 10PX 0;
|
||
display: flex;
|
||
align-items: center;
|
||
&-img{
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
overflow: hidden;
|
||
img{
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
&-right{
|
||
margin-left: 20px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
}
|
||
&-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;
|
||
}
|
||
}
|
||
&-content{
|
||
display: flex;
|
||
align-items: center;
|
||
height: 60px;
|
||
border-bottom: 1px solid @borderColor;
|
||
justify-content: space-between;
|
||
div{
|
||
padding:0 0 0 20px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|