559 lines
17 KiB
Vue
559 lines
17 KiB
Vue
// 指标
|
||
<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"
|
||
v-model="queryData.name"
|
||
@change="handleGetTargetList(queryData.indicatorType,queryData.type, queryData.name)"
|
||
></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="dialogVisibleMoving = true"
|
||
:disabled="!selectedRowList.length"
|
||
size="small"
|
||
>移动到</el-button>
|
||
<el-button
|
||
@click="handleRemove"
|
||
:disabled="!selectedRowList.length"
|
||
size="small"
|
||
>删除</el-button>
|
||
</el-col>
|
||
</el-row>
|
||
<div
|
||
class="target-main-header-tags"
|
||
v-if="this.selectedTargetType"
|
||
>筛选条件：<el-tag
|
||
@close="handleFilterTagClose"
|
||
type="warning"
|
||
closable
|
||
size="small"
|
||
>{{this.selectedTargetType.name}}</el-tag>共筛选出<span class="target-main-header-tags-sum">{{this.tableData.length}}</span>个指标</div>
|
||
</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
|
||
ref="refMenuTable"
|
||
:data="tableMenuData"
|
||
height="400px"
|
||
:header-cell-style="{background:'#f5f4f5'}"
|
||
highlight-current-row
|
||
@row-click="handleMenuCurrentChange"
|
||
@cell-mouse-enter="handleMenuMouseEnter"
|
||
@cell-mouse-leave="handleMenuMouseLeave"
|
||
:row-class-name="tableMenuRowClassName"
|
||
>
|
||
<el-table-column
|
||
label="指标分类"
|
||
prop="name"
|
||
:show-overflow-tooltip="true"
|
||
>
|
||
<template slot-scope="scope">
|
||
<div>{{scope.row.name}}({{scope.row.count}})</div>
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column width="40px">
|
||
<template slot="header">
|
||
<el-button
|
||
type="text"
|
||
icon="el-icon-plus"
|
||
size="small"
|
||
@click="handleMenuAddCalsse"
|
||
></el-button>
|
||
</template>
|
||
<template slot-scope="scope">
|
||
<el-dropdown
|
||
@command="handleClasseDropdown"
|
||
v-if="scope.row.delete===0"
|
||
szie="small"
|
||
>
|
||
<div
|
||
class="el-dropdown-link"
|
||
style="width:30px;height:15px;color: #3ba1ff;"
|
||
>{{selectedMenuRowEditIndex===scope.$index?'...':''}}</div>
|
||
<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:1}"
|
||
icon="el-icon-delete"
|
||
>删除</el-dropdown-item>
|
||
</el-dropdown-menu>
|
||
</el-dropdown>
|
||
</template>
|
||
</el-table-column>
|
||
</el-table>
|
||
</div>
|
||
<div class="target-main-content-handle">
|
||
<div
|
||
@click="menuDataClasseHide = !menuDataClasseHide"
|
||
class="target-main-content-handle-hide"
|
||
><i :class="menuDataClasseHide?'el-icon-arrow-right':'el-icon-arrow-left'"></i></div>
|
||
</div>
|
||
<div class="target-main-content-right">
|
||
<el-table
|
||
:data="tableData"
|
||
height="400px"
|
||
:header-cell-style="{background:'#f5f4f5'}"
|
||
@selection-change="handleSelectionChange"
|
||
@row-click="handleTargetCurrentRowChange"
|
||
>
|
||
<div
|
||
slot="empty"
|
||
class="comonPromptFont"
|
||
>{{$isStringEmpty(this.queryData.name)?'暂无数据':'未找到关于'+this.queryData.name+'的结果'}}</div>
|
||
<el-table-column type="selection"></el-table-column>
|
||
<el-table-column
|
||
label="名称"
|
||
sortable
|
||
prop="name"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="指标类型"
|
||
sortable
|
||
prop="typeName"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="考核标准"
|
||
prop="keyResult"
|
||
></el-table-column>
|
||
<el-table-column
|
||
label="权重"
|
||
sortable
|
||
prop="weight"
|
||
:formatter="(row, column, cellValue, index)=>cellValue*100+'%'"
|
||
>
|
||
</el-table-column>
|
||
</el-table>
|
||
<el-pagination
|
||
v-if="this.tablePage.currPage>1"
|
||
@size-change="handlePageSizeChange"
|
||
@current-change="handlePageCurrentChange"
|
||
:current-page.sync="tablePage.currPage"
|
||
:page-size="tablePage.pageSize"
|
||
:page-sizes="[20,50,100]"
|
||
layout="sizes, prev, pager, next"
|
||
:total="tablePage.totalCount"
|
||
class="target-main-content-right-page"
|
||
>
|
||
</el-pagination>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<target-filtrate
|
||
:isShowTargetFiltrate.sync="dialogVisibleFilter"
|
||
@cd="handlePopupFiltrateSubmit"
|
||
/>
|
||
<popup-radio
|
||
:isShowPopupRadio.sync="dialogVisibleMoving"
|
||
@cd="handlePopupMove"
|
||
/>
|
||
<el-dialog
|
||
:visible.sync="dialogMenuListModel.visible"
|
||
:title="dialogMenuListModel.title"
|
||
width="500px"
|
||
>
|
||
<el-form size="small">
|
||
<el-form-item
|
||
label="分类名称："
|
||
required
|
||
label-width="100px"
|
||
>
|
||
<el-input v-model="dialogMenuListModel.name" />
|
||
</el-form-item>
|
||
</el-form>
|
||
<span
|
||
slot="footer"
|
||
class="dialog-footer"
|
||
>
|
||
<el-button @click="dialogMenuListModel.visible = false">取 消</el-button>
|
||
<el-button
|
||
type="primary"
|
||
@click="handleDialogMenuListUpdateSubmit"
|
||
>确 定</el-button>
|
||
</span>
|
||
|
||
</el-dialog>
|
||
</div>
|
||
</template>
|
||
<script>
|
||
import TargetFiltrate from '@/components/TargetFiltrate'
|
||
import PopupRadio from '@/components/PopupRadio'
|
||
import { apiGetIndicatorLibraryList, apiGetIndicatorTypeDelete, apiGetIndicatorLibraryStatistical, apiGetIndicatorTypeEdit, apiGetIndicatorLibraryItemsMove, apiGetIndicatorLibraryItemsDelete } from '@/api/target'
|
||
|
||
export default {
|
||
methods: {
|
||
handleAdd () {
|
||
// 新增指标
|
||
this.$router.push({ name: 'workbench-target-add' })
|
||
},
|
||
handlePopupMove (val) {
|
||
// 移动指标分类
|
||
console.log('移动指标分类')
|
||
console.log(val)
|
||
let ids = this.selectedRowList.map(item => {
|
||
return item.id
|
||
}).join(',')
|
||
let para = {
|
||
ids: ids,
|
||
indicatorType: val
|
||
}
|
||
apiGetIndicatorLibraryItemsMove(para).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message.success(res.msg)
|
||
this.selectedRowList = []
|
||
this.handleGetMenuList(this.queryData.type)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
handleRemove () {
|
||
console.log('删除指标')
|
||
this.$confirm('确认删除选中指标', '提示').then(() => {
|
||
let ids = this.selectedRowList.map(item => {
|
||
return item.id
|
||
}).join(',')
|
||
apiGetIndicatorLibraryItemsDelete({ ids: ids }).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message.success(res.msg)
|
||
this.selectedRowList = []
|
||
this.handleGetMenuList(this.queryData.type)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
|
||
})
|
||
},
|
||
handleFilterTagClose () {
|
||
// 移除 类型筛选
|
||
this.selectedTargetType = null
|
||
this.queryData.type = -1
|
||
this.handleGetMenuList(this.queryData.type)
|
||
},
|
||
handleMenuAddCalsse () {
|
||
this.dialogMenuListModel.title = '新建分类'
|
||
this.dialogMenuListModel.name = ''
|
||
this.dialogMenuListModel.type = 0
|
||
this.dialogMenuListModel.visible = true
|
||
},
|
||
tableMenuRowClassName ({ row, rowIndex }) {
|
||
// 为行数据 添加 index
|
||
row['index'] = rowIndex
|
||
if (this.queryData.indicatorType === row.indicatorType) {
|
||
return 'target-classe-row-edit-selected'
|
||
}
|
||
return 'target-classe-row-edit'
|
||
},
|
||
handleMenuCurrentChange (row, column) {
|
||
// 选择分类
|
||
if (this.queryData.indicatorType === row.indicatorType) {
|
||
return
|
||
}
|
||
this.selectedRowList = []
|
||
this.queryData.indicatorType = row.indicatorType !== null ? row.indicatorType : -1
|
||
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name)
|
||
},
|
||
handleMenuMouseEnter (row) {
|
||
// 鼠标移入
|
||
this.selectedMenuRowEditIndex = row.index
|
||
},
|
||
handleMenuMouseLeave (row) {
|
||
// 鼠标移除
|
||
this.selectedMenuRowEditIndex = -1
|
||
},
|
||
handleDialogMenuListUpdateSubmit () {
|
||
// 分类列表 修改名称或添加
|
||
if (this.$isStringEmpty(this.dialogMenuListModel.name)) {
|
||
this.$message.error('分类名称不能为空')
|
||
return
|
||
}
|
||
let para = {
|
||
name: this.dialogMenuListModel.name,
|
||
type: 0
|
||
}
|
||
if (this.dialogMenuListModel.type === 1) {
|
||
para['id'] = this.selectedMenuRowModelEdit.indicatorType
|
||
}
|
||
apiGetIndicatorTypeEdit(para).then(res => {
|
||
this.dialogMenuListModel.visible = false
|
||
if (res.code === 200) {
|
||
this.$message.success(res.msg)
|
||
if (this.dialogMenuListModel.type === 1) {
|
||
// 修改名称
|
||
this.selectedMenuRowModelEdit.name = this.dialogMenuListModel.name
|
||
} else {
|
||
this.handleGetMenuList(this.queryData.type)
|
||
}
|
||
} else {
|
||
this.$message.success(res.msg)
|
||
}
|
||
})
|
||
},
|
||
handleClasseDropdown (val) {
|
||
let { type, obj } = val
|
||
this.selectedMenuRowModelEdit = obj
|
||
if (type === 0) {
|
||
// 编辑分类名称
|
||
this.dialogMenuListModel.title = '修改分类'
|
||
this.dialogMenuListModel.name = obj.name
|
||
this.dialogMenuListModel.type = 1
|
||
this.dialogMenuListModel.visible = true
|
||
} else if (type === 1) {
|
||
// 移除
|
||
this.$confirm('您确定要删除此分类吗？', '提示').then(() => {
|
||
apiGetIndicatorTypeDelete({ id: this.selectedMenuRowModelEdit.indicatorType }).then(res => {
|
||
if (res.code === 200) {
|
||
this.selectedMenuRowModelEdit = null
|
||
this.queryData.indicatorType = -1
|
||
this.handleGetMenuList(this.queryData.type)
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
}).catch(() => {
|
||
|
||
})
|
||
}
|
||
},
|
||
// 指标
|
||
handleTargetCurrentRowChange (val) {
|
||
let changeVal = {
|
||
id: val.id,
|
||
name: val.name,
|
||
keyResult: val.keyResult,
|
||
weight: val.weight * 100,
|
||
type: val.type,
|
||
indicatorType: val.indicatorType
|
||
}
|
||
console.log('跳转')
|
||
console.dir(val)
|
||
this.$router.push({ name: 'workbench-target-add', query: changeVal })
|
||
},
|
||
handleSelectionChange (val) {
|
||
this.selectedRowList = val
|
||
},
|
||
handlePopupFiltrateSubmit (val) {
|
||
// 筛选 选择指标类型
|
||
console.log('筛选类型----')
|
||
console.log(val)
|
||
this.selectedTargetType = val
|
||
this.queryData.type = val ? val.id : -1
|
||
this.handleGetMenuList(this.queryData.type)
|
||
},
|
||
handlePageCurrentChange (val) {
|
||
// 页面
|
||
this.tablePage.currPage = val
|
||
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, val)
|
||
},
|
||
handlePageSizeChange (val) {
|
||
this.tablePage.pageSize = val
|
||
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name, this.tablePage.currPage)
|
||
},
|
||
handleGetMenuList (type = -1) {
|
||
// type 类型
|
||
// 指标分类列表
|
||
let para = {}
|
||
if (type !== -1) {
|
||
para['type'] = type
|
||
}
|
||
apiGetIndicatorLibraryStatistical(para).then(res => {
|
||
if (res.code === 200) {
|
||
this.tableMenuData = res.data.map(item => {
|
||
if (item.indicatorType === null) {
|
||
item.indicatorType = -1
|
||
}
|
||
return item
|
||
})
|
||
console.log('获取类型')
|
||
console.log(this.tableMenuData)
|
||
this.tableMenuData.forEach((item, index) => {
|
||
if (item.indicatorType === this.queryData.indicatorType) {
|
||
// 选中
|
||
this.$refs.refMenuTable.setCurrentRow(item)
|
||
this.handleGetTargetList(this.queryData.indicatorType, this.queryData.type, this.queryData.name)
|
||
}
|
||
})
|
||
} else {
|
||
this.$message.error(res.msg)
|
||
}
|
||
})
|
||
},
|
||
// 获取指标列表
|
||
handleGetTargetList (indicatorType = -1, type = -1, name = '', currPage = 1) {
|
||
console.log(name)
|
||
this.queryData.name = name
|
||
this.queryData.indicatorType = indicatorType
|
||
let para = {
|
||
currPage: currPage,
|
||
pageSize: this.tablePage.pageSize,
|
||
name: name
|
||
}
|
||
if (indicatorType !== -1) {
|
||
para['indicatorType'] = indicatorType
|
||
}
|
||
if (type !== -1) {
|
||
para['type'] = type
|
||
}
|
||
apiGetIndicatorLibraryList(para).then(res => {
|
||
if (res.code === 200) {
|
||
let data = res.data
|
||
this.tablePage.totalCount = data.totalCount
|
||
this.tablePage.totalPage = data.totalPage
|
||
this.tablePage.pageSize = data.pageSize
|
||
this.tablePage.currPage = data.currPage
|
||
this.tableData = data.list
|
||
}
|
||
})
|
||
}
|
||
},
|
||
components: {
|
||
TargetFiltrate,
|
||
PopupRadio
|
||
},
|
||
created () {
|
||
this.handleGetMenuList()
|
||
},
|
||
data () {
|
||
return {
|
||
queryData: {
|
||
name: '', // 搜索数据
|
||
indicatorType: -1, // 分类列表 -1 不传此字段
|
||
type: -1 // 类型
|
||
},
|
||
dialogVisibleFilter: false,
|
||
dialogVisibleMoving: false,
|
||
tableMenuData: [], // { name: '收代理费建', indicatorType: 0,count:1 }
|
||
tableData: [], //
|
||
menuDataClasseHide: false,
|
||
selectedMenuRowEditIndex: -1, // 想要编辑的 行
|
||
selectedMenuRowModelEdit: null, // 编辑行
|
||
selectedRowList: [],
|
||
tablePage: {
|
||
totalCount: 0,
|
||
pageSize: 20,
|
||
totalPage: 1,
|
||
currPage: 1
|
||
},
|
||
selectedTargetType: null,
|
||
dialogMenuListModel: {
|
||
visible: false,
|
||
title: '新建分类',
|
||
name: '',
|
||
type: 0 // 0新建 1 编辑
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style lang="less">
|
||
.target-classe-row-edit {
|
||
color: #52575b !important;
|
||
}
|
||
.target-classe-row-edit-selected {
|
||
color: @fontBlue !important;
|
||
}
|
||
.target-classe-row-edit:hover {
|
||
cursor: pointer;
|
||
color: @fontBlue !important;
|
||
}
|
||
</style>
|
||
<style lang="less" scoped>
|
||
.target {
|
||
background-color: white;
|
||
padding: 28px;
|
||
background-color: #fff;
|
||
&-main-header {
|
||
&-tags {
|
||
padding: 10px 0px;
|
||
.el-tag {
|
||
margin-right: 10px;
|
||
}
|
||
&-sum {
|
||
color: @fontBlue;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
&-classe-menu-hide {
|
||
width: 1px;
|
||
}
|
||
&-classe-menu-show {
|
||
width: 200px;
|
||
}
|
||
|
||
&-font-blue {
|
||
color: @fontBlue;
|
||
}
|
||
&-font-def {
|
||
color: #52575b;
|
||
}
|
||
&-main {
|
||
&-header-right {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
&-content {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
margin-top: 20px;
|
||
overflow: hidden;
|
||
|
||
&-left {
|
||
display: flex;
|
||
.el-table {
|
||
width: 200px;
|
||
border: 0.5px solid @borderColor;
|
||
}
|
||
}
|
||
&-handle {
|
||
display: flex;
|
||
align-items: center;
|
||
&-hide {
|
||
color: #fff;
|
||
background-color: @borderColor;
|
||
width: 12px;
|
||
height: 20px;
|
||
margin-right: 10px;
|
||
border-bottom-right-radius: 2px;
|
||
border-top-right-radius: 2px;
|
||
}
|
||
}
|
||
&-right {
|
||
flex: 1;
|
||
&-page {
|
||
flex: 1;
|
||
text-align: center;
|
||
margin-top: 10px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|