指标库添加UI
This commit is contained in:
zhujida
parent
0a731eae63
commit
188137e06b
@ -60,7 +60,25 @@ export default [{
|
||||
isNav: false,
|
||||
hidden: true
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
path: 'target',
|
||||
name: 'workbench-target',
|
||||
component: () => import('@/views/kpi/set/target/index.vue'),
|
||||
meta: {
|
||||
title: '指标库',
|
||||
isNav: false,
|
||||
hidden: true
|
||||
}
|
||||
}, {
|
||||
path: 'add',
|
||||
name: 'workbench-target-add',
|
||||
component: () => import('@/views/kpi/set/target/add/index.vue'),
|
||||
meta: {
|
||||
title: '新增指标',
|
||||
pop: true,
|
||||
isNav: false,
|
||||
hidden: true
|
||||
}}]
|
||||
}, {
|
||||
path: 'assessment',
|
||||
name: 'assessment',
|
||||
|
||||
@ -40,12 +40,14 @@ import {
|
||||
Progress,
|
||||
Drawer,
|
||||
Slider,
|
||||
ButtonGroup, Notification
|
||||
ButtonGroup,
|
||||
Notification
|
||||
} from 'element-ui'
|
||||
Vue.prototype.$notify = Notification
|
||||
Vue.prototype.$loading = Loading
|
||||
Vue.prototype.$message = Message
|
||||
Vue.prototype.$confirm = MessageBox.confirm
|
||||
Vue.prototype.$prompt = MessageBox.prompt
|
||||
Vue.prototype.$alert = MessageBox.alert
|
||||
Vue.use(ButtonGroup)
|
||||
Vue.use(Slider)
|
||||
|
||||
@ -8,19 +8,34 @@
|
||||
text-color="#52575b"
|
||||
active-text-color="#3ba1ff"
|
||||
>
|
||||
<el-menu-item v-if="auth.evaluationSet" index="0">考评组设置</el-menu-item>
|
||||
<el-menu-item v-if="auth.roleSet" index="1">权限设置</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="auth.evaluationSet"
|
||||
index="0"
|
||||
>考评组设置</el-menu-item>
|
||||
<el-menu-item index="2">指标库</el-menu-item>
|
||||
<el-menu-item
|
||||
v-if="auth.roleSet"
|
||||
index="1"
|
||||
>权限设置</el-menu-item>
|
||||
</el-menu>
|
||||
<ground-table class="kaoping" v-if="activeIndex==='0'"></ground-table>
|
||||
<ground-table
|
||||
class="kaoping"
|
||||
v-if="activeIndex==='0'"
|
||||
></ground-table>
|
||||
<div v-else-if="activeIndex==='1'">
|
||||
<try-authority></try-authority>
|
||||
</div>
|
||||
<div v-else-if="activeIndex==='2'">
|
||||
<try-target></try-target>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import groundTable from '../workbench/assessmentGroup/groundTable'
|
||||
import tryAuthority from './authority'
|
||||
import tryTarget from './target'
|
||||
|
||||
export default {
|
||||
data () {
|
||||
return {
|
||||
@ -29,13 +44,16 @@ export default {
|
||||
},
|
||||
components: {
|
||||
groundTable,
|
||||
tryAuthority
|
||||
tryAuthority,
|
||||
tryTarget
|
||||
},
|
||||
created () {
|
||||
if (this.auth.evaluationSet) {
|
||||
this.activeIndex = '0'
|
||||
} else if (!this.auth.roleSet) {
|
||||
this.activeIndex = '1'
|
||||
} else if (!this.auth.target) {
|
||||
this.activeIndex = '2'
|
||||
} else {
|
||||
this.activeIndex = ''
|
||||
}
|
||||
@ -46,7 +64,7 @@ export default {
|
||||
methods: {
|
||||
handleSelect (key, keyPath) {
|
||||
this.activeIndex = key
|
||||
this.$router.replace({name: 'set', query: {activeIndex: key}})
|
||||
this.$router.replace({ name: 'set', query: { activeIndex: key } })
|
||||
}
|
||||
},
|
||||
watch: {}
|
||||
@ -60,7 +78,7 @@ export default {
|
||||
padding-top: 0px;
|
||||
// min-height: 600px;
|
||||
}
|
||||
.kaoping{
|
||||
.kaoping {
|
||||
padding: 20px 0 00 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
99
src/views/kpi/set/target/add/index.vue
Normal file
99
src/views/kpi/set/target/add/index.vue
Normal file
@ -0,0 +1,99 @@
|
||||
<template>
|
||||
<div class="add-target commonFont">
|
||||
<el-form
|
||||
ref="form"
|
||||
:model="formData"
|
||||
size="small"
|
||||
label-width="200px"
|
||||
:rules="formRules"
|
||||
label-position="left"
|
||||
style="width: 600px;"
|
||||
>
|
||||
<el-form-item
|
||||
label="指标分类："
|
||||
prop="classeName"
|
||||
>
|
||||
<el-select
|
||||
v-model="formData.classeName"
|
||||
placeholder="请选择指标分类"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in calsseDateList"
|
||||
:key="item.id"
|
||||
:label="item.label"
|
||||
:value="item.id"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="targetType"
|
||||
>
|
||||
<div slot="label" style="margin-left:10px;">指标类型：</div>
|
||||
<el-radio-group v-model="formData.targetType">
|
||||
<el-radio
|
||||
v-for="item in targetRadioList"
|
||||
:key="item.id"
|
||||
:label="item.id"
|
||||
>{{item.label}}</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
label="指标名称："
|
||||
prop="targetName"
|
||||
>
|
||||
<el-input
|
||||
v-model="formData.targetName"
|
||||
placeholder="请输入指标名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item
|
||||
prop="standard"
|
||||
>
|
||||
<div slot="label" style="margin-left:10px;">考核标准：</div>
|
||||
<el-input
|
||||
type="textarea"
|
||||
v-model="formData.standard"
|
||||
placeholder="请输入指标名称"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<div slot="label" style="margin-left:10px;">权重：</div>
|
||||
|
||||
<el-input
|
||||
type="number"
|
||||
v-model="formData.targetName"
|
||||
placeholder="请输入指标名称"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label=" "><el-button type="primary" @click="handleSaveSet">保存设置</el-button></el-form-item>
|
||||
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleSaveSet () {
|
||||
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
formData: { classeName: 1, targetType: 0, targetName: '', standard: '', weight: '' },
|
||||
formRules: {
|
||||
classeName: [{ required: true, message: '请选择指标分类', trigger: 'change' }],
|
||||
targetName: [{ required: true, message: '请输入指标名称', trigger: 'blur' }]
|
||||
},
|
||||
calsseDateList: [{ label: '坎坎坷坷', id: 1 }],
|
||||
targetRadioList: [{ label: '量化指标', id: 0 }, { label: '行为价值观指标', id: 1 }, { label: '团队管理', id: 2 }]
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.add-target {
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
208
src/views/kpi/set/target/index.vue
Normal file
208
src/views/kpi/set/target/index.vue
Normal file
@ -0,0 +1,208 @@
|
||||
// 指标
|
||||
<template>
|
||||
<div class="target commonFont">
|
||||
<div class="target-main">
|
||||
<div class="target-main-header">
|
||||
<el-row>
|
||||
<el-col :span="12">
|
||||
<el-button
|
||||
@click="dialogVisibleFilter = true"
|
||||
size="small"
|
||||
>筛选</el-button>
|
||||
<el-input
|
||||
prefix-icon="el-icon-search"
|
||||
placeholder="搜索指标"
|
||||
style="width:200px;"
|
||||
size="small"
|
||||
:value="headerSearchValue"
|
||||
@change="handleHeaderSearch"
|
||||
></el-input>
|
||||
</el-col>
|
||||
<el-col
|
||||
:span="12"
|
||||
class="target-main-header-right"
|
||||
>
|
||||
<el-button
|
||||
type="primary"
|
||||
@click="handleAdd"
|
||||
size="small"
|
||||
>新增指标</el-button>
|
||||
<el-button
|
||||
@click="handleMoving"
|
||||
:disabled="!selectedRowList.length"
|
||||
size="small"
|
||||
>移动到</el-button>
|
||||
<el-button
|
||||
@click="handleRemove"
|
||||
:disabled="!selectedRowList.length"
|
||||
size="small"
|
||||
>删除</el-button>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
<div class="target-main-content">
|
||||
<div :class=" menuDataClasseHide?'target-main-content-left target-classe-menu-hide':'target-main-content-left target-classe-menu-show'">
|
||||
<el-table
|
||||
:data="tableMenuData"
|
||||
height="400px"
|
||||
:header-cell-style="{background:'#f5f4f5'}"
|
||||
>
|
||||
<el-table-column
|
||||
label="指标分类"
|
||||
prop="name"
|
||||
:show-overflow-tooltip="true"
|
||||
></el-table-column>
|
||||
<el-table-column width="40px">
|
||||
<template slot="header">
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
size="small"
|
||||
@click="handleAddCalsse"
|
||||
></el-button>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-dropdown @command="handleClasseDropdown">
|
||||
<el-button type="text">...</el-button>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
:command="{obj:scope.row,type:0}"
|
||||
icon="el-icon-edit"
|
||||
>编辑</el-dropdown-item>
|
||||
<el-dropdown-item
|
||||
:command="{obj:scope.row,type:0}"
|
||||
icon="el-icon-delete"
|
||||
>删除</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
<div
|
||||
@click="menuDataClasseHide = !menuDataClasseHide"
|
||||
class="target-main-content-hide"
|
||||
><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
|
||||
<div class="target-main-content-right">
|
||||
<el-table
|
||||
:data="tableData"
|
||||
height="400px"
|
||||
:header-cell-style="{background:'#f5f4f5'}"
|
||||
>
|
||||
<el-table-column type="selection"></el-table-column>
|
||||
<el-table-column
|
||||
label="名称"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column
|
||||
label="指标类型"
|
||||
sortable
|
||||
></el-table-column>
|
||||
<el-table-column label="考核标准"></el-table-column>
|
||||
<el-table-column
|
||||
label="权重"
|
||||
sortable
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
methods: {
|
||||
handleHeaderSearch () {
|
||||
|
||||
},
|
||||
handleAdd () {
|
||||
// 新增指标
|
||||
this.$router.push({name: 'workbench-target-add'})
|
||||
console.log('新增指标')
|
||||
},
|
||||
handleMoving () {
|
||||
// 移动
|
||||
console.log('指标移动')
|
||||
},
|
||||
handleRemove () {
|
||||
console.log('删除指标')
|
||||
},
|
||||
handleAddCalsse () {
|
||||
console.log('添加分类')
|
||||
},
|
||||
handleClasseDropdown (val) {
|
||||
let { type, obj } = val
|
||||
if (type === 0) {
|
||||
// 编辑分类名称
|
||||
this.$prompt('分类名称：', '修改分类', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消'
|
||||
}).then(({ value }) => {
|
||||
console.log('修改分类名称:' + value)
|
||||
}).catch(() => {
|
||||
|
||||
})
|
||||
} else if (type === 1) {
|
||||
// 移除
|
||||
console.log('移除指标')
|
||||
}
|
||||
}
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
headerSearchValue: '',
|
||||
dialogVisibleFilter: false,
|
||||
tableMenuData: [{ name: '收代理费建安费啦k咳咳咳书法家阿李师傅', id: '1' }],
|
||||
tableData: [],
|
||||
menuDataClasseHide: false,
|
||||
selectedRowList: []
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.target {
|
||||
background-color: white;
|
||||
padding: 28px;
|
||||
background-color: #fff;
|
||||
|
||||
&-classe-menu-hide {
|
||||
width: 1px;
|
||||
}
|
||||
&-classe-menu-show {
|
||||
width: 200px;
|
||||
}
|
||||
&-main {
|
||||
&-header-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
&-content {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-top: 20px;
|
||||
overflow: hidden;
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
.el-table {
|
||||
border: 0.5px solid @borderColor;
|
||||
}
|
||||
}
|
||||
&-hide {
|
||||
color: #fff;
|
||||
background-color: @borderColor;
|
||||
width: 12px;
|
||||
height: 20px;
|
||||
border-bottom-right-radius: 2px;
|
||||
border-top-right-radius: 2px;
|
||||
}
|
||||
&-right {
|
||||
flex: 1;
|
||||
border: red;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -21,7 +21,7 @@
|
||||
<div class="boderAndRadius commonFont noSelect" v-if="auth.assessment" @click="handleGetMoreToDo('assessment')"><svg-icon icon-class="kaohe" class-name='icon'/>考核管理</div>
|
||||
<div class="boderAndRadius commonFont noSelect" v-if="auth.launchEvaluation" @click="handleGetMoreToDo('initiate')"><svg-icon icon-class="faqi" class-name='icon'/>发起考核</div>
|
||||
<div class="boderAndRadius commonFont noSelect" v-if="auth.evaluationGroupManager" @click="handleGetMoreToDo('workbench-group')" ><svg-icon icon-class="kaoping" class-name='icon'/>考评组</div>
|
||||
<div class="boderAndRadius commonFont noSelect" v-if="auth.indexData" @click="handleGetMoreToDo('1')"><svg-icon icon-class="zhibiao" class-name='icon'/>指标库</div>
|
||||
<div class="boderAndRadius commonFont noSelect" v-if="auth.indexData" @click="handleGetMoreToDo('workbench-target')"><svg-icon icon-class="zhibiao" class-name='icon'/>指标库</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user