优化
This commit is contained in:
熊成强
parent
a48a4f1241
commit
1096478daa
@ -44,3 +44,12 @@ export function apiResultRecordDetail (query) {
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 获取考核详情表格数据
|
||||
export function apiResultGetDetail (query) {
|
||||
return request({
|
||||
url: '/lz_management/user/lzresultrecord/getDetail',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
@ -5,14 +5,15 @@
|
||||
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=2346299354,1694591848&fm=26&gp=0.jpg" alt="">
|
||||
</div>
|
||||
<div class="header-title-right commonFont">
|
||||
<span style="font-size:14px;">熊成强</span>
|
||||
<span style="font-size:12px;">技术部门</span>
|
||||
<span style="font-size:14px;">{{obj.name || "熊成强"}}</span>
|
||||
<span style="font-size:12px;">{{obj.departmentName || "技术部门"}}</span>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['obj'],
|
||||
data () {
|
||||
return {
|
||||
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
<!-- -->
|
||||
<template>
|
||||
<div class="main noSelect">
|
||||
<div class="main">
|
||||
<nav-bar />
|
||||
<app-main />
|
||||
</div>
|
||||
|
||||
@ -3,36 +3,203 @@
|
||||
<div class="goals">
|
||||
<SmallNav />
|
||||
<div class="goals-content boderAndRadius">
|
||||
<InfoHeader />
|
||||
<InfoHeader :obj="{
|
||||
name:obj.currentApprovalStaffName,
|
||||
departmentName:obj.departmentName
|
||||
}"/>
|
||||
<div class="goals-content-tabbar">
|
||||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||||
<el-tab-pane label="用户管理" name="first">用户管理</el-tab-pane>
|
||||
<el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
|
||||
<el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
|
||||
<el-tab-pane label="定时任务补偿" name="fourth">定时任务补偿</el-tab-pane>
|
||||
<el-tabs
|
||||
:value="activeId"
|
||||
@tab-click="handleClick">
|
||||
<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%">{{j.target}}</div>
|
||||
<div style="width:30%">{{j.keyResult}}</div>
|
||||
<div style="width:30%">{{j.checkWeight * 100}}%</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="handleAddIndicators(i)" 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.weight">
|
||||
<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 } from '@/api/assessment'
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
activeName: 'second'
|
||||
zhibiaoTitle: '添加指标',
|
||||
showIndicators: false,
|
||||
dimensionsList: [],
|
||||
formIndicators: {},
|
||||
ruleIndicators: {
|
||||
target: [{ required: true,
|
||||
message: '请输入指标名称',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
keyResult: [{ required: true,
|
||||
message: '请输入考核标准',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
weight: [{ required: true,
|
||||
message: '请输入权重大小',
|
||||
trigger: 'blur' }
|
||||
]
|
||||
},
|
||||
activeId: null,
|
||||
obj: {
|
||||
recortModelDto: []
|
||||
},
|
||||
options1: {
|
||||
group: 'names',
|
||||
draggable: '.items',
|
||||
scroll: true,
|
||||
sort: true, // 内部排序列表
|
||||
delay: 0, // 以毫秒为单位定义排序何时开始。
|
||||
touchStartThreshold: 0, // px,在取消延迟拖动事件之前，点应该移动多少像素?
|
||||
disabled: false, // 如果设置为真，则禁用sortable。
|
||||
store: null, // @see Store
|
||||
animation: 150 // ms, 动画速度运动项目排序时，' 0 ' -没有动画。
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SmallNav,
|
||||
InfoHeader
|
||||
InfoHeader,
|
||||
draggable,
|
||||
PopupRight
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {},
|
||||
mounted () {
|
||||
this.handleGetDimensions()
|
||||
this.handleGetTbale()
|
||||
},
|
||||
methods: {
|
||||
// 获取维度类型
|
||||
async handleGetDimensions () {
|
||||
try {
|
||||
let res = await getDimensions()
|
||||
if (res.code !== 200) {
|
||||
this.dimensionsList = []
|
||||
return
|
||||
}
|
||||
res = res.data
|
||||
this.dimensionsList = res
|
||||
console.log('res: ', res)
|
||||
} catch (error) {
|
||||
this.$message.error(error.msg)
|
||||
}
|
||||
},
|
||||
handleCancelZhibiao () {
|
||||
|
||||
},
|
||||
handleSubmitZhibiao () {
|
||||
|
||||
},
|
||||
handleAddIndicators (item) {
|
||||
console.log(item)
|
||||
this.showIndicators = true
|
||||
this.formIndicators = Object.assign({}, item)
|
||||
},
|
||||
// 编辑
|
||||
hanidleEdit (item, index, type) {
|
||||
console.log('type: ', type)
|
||||
console.log('index: ', index)
|
||||
console.log('item: ', item)
|
||||
},
|
||||
handleDelateWeidu (item, index, type) {
|
||||
console.log('type: ', type)
|
||||
console.log('index: ', index)
|
||||
console.log('item: ', item)
|
||||
},
|
||||
handleFilter (item) {
|
||||
return item ? item.filter(i => !i.isDelete) : []
|
||||
},
|
||||
async handleGetTbale (id = 226) {
|
||||
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)
|
||||
},
|
||||
handleClick (tab, event) {
|
||||
console.log(tab, event)
|
||||
}
|
||||
@ -68,7 +235,29 @@ export default {
|
||||
}
|
||||
}
|
||||
&-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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
85
src/views/kpi/assessment/performance/components/table.vue
Normal file
85
src/views/kpi/assessment/performance/components/table.vue
Normal file
@ -0,0 +1,85 @@
|
||||
<template>
|
||||
<table
|
||||
cellspacing="0"
|
||||
border="1">
|
||||
<!-- 顶部title -->
|
||||
<tr>
|
||||
<th>维度</th>
|
||||
<th>名称</th>
|
||||
<th>考核标准</th>
|
||||
<th>权重({{obj.weight*100}}%)</th>
|
||||
</tr>
|
||||
<!-- 暂无数据时显示 -->
|
||||
<tr v-if="obj.recortModelDtos.length === 0">
|
||||
<td :colspan="6">
|
||||
暂无数据
|
||||
</td>
|
||||
</tr>
|
||||
<!-- template不会被渲染 -->
|
||||
<template v-for="(item,index) in obj.recortModelDtos" >
|
||||
<!-- 左侧跨行区域 -->
|
||||
<tr :key="index+1000">
|
||||
<td :rowspan="item.detailDtos.length+1">{{item.name}}</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
<td v-if="item.detailDtos.length===0">
|
||||
|
||||
</td>
|
||||
</tr>
|
||||
<!-- 右侧数据 -->
|
||||
<tr v-for="(child,index1) in item.detailDtos" :key="index1">
|
||||
<td>
|
||||
{{child.target}}
|
||||
</td>
|
||||
<td>
|
||||
{{child.keyResult}}
|
||||
</td>
|
||||
<td>
|
||||
{{child.checkWeight*100}}%
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</table>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: 'columnsTbale',
|
||||
props: {
|
||||
obj: {
|
||||
type: Object,
|
||||
default: () => {
|
||||
return {
|
||||
recortModelDtos: []
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted () {
|
||||
console.log('list', this.obj)
|
||||
},
|
||||
methods: {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
table{
|
||||
margin-top: 15px;
|
||||
width: 100%;
|
||||
border:1px solid #e9eaec;
|
||||
border-collapse:collapse
|
||||
}
|
||||
th{
|
||||
background-color: #f8f8f9;
|
||||
}
|
||||
th,td{
|
||||
padding: 5px;
|
||||
border: 1px solid #e9eaec;
|
||||
text-align: center;
|
||||
vertical-align: top;
|
||||
line-height: 30px;
|
||||
}
|
||||
</style>
|
||||
@ -19,7 +19,17 @@
|
||||
<el-button size="small" plain>管理</el-button>
|
||||
</div>
|
||||
</div> -->
|
||||
<InfoHeader />
|
||||
<div class="performance-content-title">
|
||||
<InfoHeader
|
||||
:obj="{
|
||||
name:obj.currentApprovalStaffName,
|
||||
departmentName:obj.departmentName
|
||||
}"
|
||||
/>
|
||||
<div class="performance-content-title-right">
|
||||
<el-button size="mini" @click="handleZhiding" type="primary">制定目标</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-content-center">
|
||||
<div class="performance-content-center-item"
|
||||
:class="{
|
||||
@ -47,34 +57,7 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="performance-content-bottom">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
:header-cell-style="{background:'#F5F7FA'}"
|
||||
border
|
||||
style="width: 100%">
|
||||
<el-table-column
|
||||
prop="date"
|
||||
label="日期"
|
||||
align="center"
|
||||
width="180">
|
||||
<template slot-scope="scope">
|
||||
<div>
|
||||
<div v-for="(i,index) in scope.row.date" :key="index">{{i}}</div>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
label="姓名"
|
||||
align="center"
|
||||
width="180">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="address"
|
||||
align="center"
|
||||
label="地址">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<tables v-if="obj.length !==0" :obj='obj' />
|
||||
</div>
|
||||
<div class="performance-content-jilu">
|
||||
<div class="performance-content-jilu-title commonFont">
|
||||
@ -118,7 +101,8 @@
|
||||
import SmallNav from '@/components/kpi-layout/SmallNav'
|
||||
import InfoHeader from '@/components/InfoHeader'
|
||||
import PopupRight from '@/components/PopupRight'
|
||||
import { apiResultRecordDetail } from '@/api/assessment'
|
||||
import { apiResultRecordDetail, apiResultGetDetail } from '@/api/assessment'
|
||||
import tables from './components/table'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
@ -131,6 +115,9 @@ export default {
|
||||
flowRecordList: [],
|
||||
resultCommentList: []
|
||||
},
|
||||
obj: {
|
||||
recortModelDtos: []
|
||||
},
|
||||
options: [{
|
||||
value: '选项1',
|
||||
label: '黄金糕'
|
||||
@ -146,37 +133,36 @@ export default {
|
||||
}, {
|
||||
value: '选项5',
|
||||
label: '北京烤鸭'
|
||||
}],
|
||||
tableData: [{
|
||||
date: '2016-05-02',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1518 弄'
|
||||
}, {
|
||||
date: '2016-05-04',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1517 弄'
|
||||
}, {
|
||||
date: '2016-05-01',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1519 弄'
|
||||
}, {
|
||||
date: '2016-05-03',
|
||||
name: '王小虎',
|
||||
address: '上海市普陀区金沙江路 1516 弄'
|
||||
}]
|
||||
}
|
||||
},
|
||||
components: {
|
||||
SmallNav,
|
||||
InfoHeader,
|
||||
PopupRight
|
||||
PopupRight,
|
||||
tables
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
mounted () {
|
||||
this.handleList()
|
||||
this.handleGetTbale()
|
||||
},
|
||||
methods: {
|
||||
// 制定目标
|
||||
handleZhiding () {
|
||||
this.$router.push({
|
||||
name: 'assessment-goals',
|
||||
query: {
|
||||
id: this.$route.query.id
|
||||
}
|
||||
})
|
||||
},
|
||||
async handleGetTbale (id = 226) {
|
||||
let res = await apiResultGetDetail({id})
|
||||
this.obj = res.data
|
||||
console.log('res: ', res)
|
||||
},
|
||||
handleRight (item) {
|
||||
console.log('item: ', item)
|
||||
this.form.item = item
|
||||
@ -189,6 +175,7 @@ export default {
|
||||
this.right.showRight = false
|
||||
},
|
||||
async handleList () {
|
||||
// resultRecordId = == this.$route.query.id
|
||||
let res = await apiResultRecordDetail({resultRecordId: 215})
|
||||
if (res.code !== 200) return
|
||||
for (let i in res.data.flowRecordList) {
|
||||
@ -232,10 +219,16 @@ export default {
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
&-title{
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
&-center{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 20px 0;
|
||||
|
||||
&-item{
|
||||
text-align: center;
|
||||
padding: 10px 60px;
|
||||
|
||||
@ -188,7 +188,6 @@ export default {
|
||||
}
|
||||
this.rightList = res.data.list
|
||||
this.kaopingFrom.showRight = true
|
||||
console.log('ressss: ', res)
|
||||
},
|
||||
handleLook (id) {
|
||||
// this.handleKaoping()
|
||||
|
||||
@ -236,7 +236,7 @@ export default {
|
||||
formIndicators: {}, // 指标表单
|
||||
ruleIndicators: {
|
||||
name: [{ required: true,
|
||||
message: '请输入维度名称',
|
||||
message: '请输入指标名称',
|
||||
trigger: 'blur' }
|
||||
],
|
||||
keyResult: [{ required: true,
|
||||
@ -316,7 +316,12 @@ export default {
|
||||
// 获取维度类型
|
||||
async handleGetDimensions () {
|
||||
try {
|
||||
const res = await getDimensions()
|
||||
let res = await getDimensions()
|
||||
if (res.code !== 200) {
|
||||
this.dimensionsList = []
|
||||
return
|
||||
}
|
||||
res = res.data
|
||||
this.dimensionsList = res
|
||||
console.log('res: ', res)
|
||||
} catch (error) {
|
||||
@ -368,7 +373,7 @@ export default {
|
||||
} else {
|
||||
this.zhibiaoTitle = '编辑指标'
|
||||
this.formIndicators = Object.assign({}, item, {index, index2: type, isEdit: true})
|
||||
this.formIndicators.weight = this.formIndicators.weight
|
||||
this.formIndicators.weight = this.formIndicators.weight * 100
|
||||
this.showIndicators = true
|
||||
}
|
||||
},
|
||||
@ -409,7 +414,7 @@ export default {
|
||||
}
|
||||
if (!this.zanshi.tagetLibItems) this.zanshi.tagetLibItems = []
|
||||
this.zanshi.tagetLibItems.push(Object.assign({}, this.formIndicators, {isDelete: 0}))
|
||||
// this.showIndicators = false
|
||||
this.showIndicators = false
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
@ -54,6 +54,10 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
beforeMount () {},
|
||||
created () {
|
||||
const id = this.$route.query.id
|
||||
this.$route.meta.title = !id ? '新增考评组' : '编辑考评组'
|
||||
},
|
||||
mounted () {
|
||||
|
||||
},
|
||||
@ -135,6 +139,7 @@ export default {
|
||||
overflow: auto;
|
||||
}
|
||||
&-header{
|
||||
cursor: pointer;
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
width: 420px;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user