You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
540 lines
15 KiB
540 lines
15 KiB
<template>
|
|
<div>
|
|
<el-drawer
|
|
size="46%"
|
|
title="绩效指标"
|
|
:visible.sync="isShow"
|
|
direction="rtl"
|
|
>
|
|
<Button
|
|
shape="circle"
|
|
type="primary"
|
|
:style="{
|
|
margin: '0 0 10px 20px',
|
|
}"
|
|
@click="isShowModal = true"
|
|
>
|
|
指标选择</Button
|
|
>
|
|
<Button
|
|
shape="circle"
|
|
type="primary"
|
|
:style="{
|
|
margin: '0 0 10px 20px',
|
|
}"
|
|
@click="$refs['addPoint'].setType('add'),$refs['addPoint'].setYear(year),$refs['addPoint'].show()"
|
|
>
|
|
指标新增</Button
|
|
>
|
|
<xy-table :list="list" :table-item="table">
|
|
<template v-slot:btns> </template>
|
|
</xy-table>
|
|
</el-drawer>
|
|
|
|
<el-dialog title="绩效指标列表" :visible.sync="isShowModal" width="54%">
|
|
<Input v-model="pointSelect.name" search enter-button placeholder="三级指标搜索" @on-search="getPoints"/>
|
|
<Table
|
|
style="margin-top: 10px;"
|
|
:data="points"
|
|
:columns="pointTable"
|
|
:loading="loading"
|
|
border
|
|
size="small"
|
|
:span-method="spanMethod"
|
|
@on-selection-change="selectionChange"
|
|
></Table>
|
|
<div style="display: flex; justify-content: center; margin: 10px 0">
|
|
<Page
|
|
:total="pointTotal"
|
|
size="small"
|
|
show-elevator
|
|
show-total
|
|
@on-change="
|
|
(e) => {
|
|
pointSelect.page = e;
|
|
getPoints();
|
|
}
|
|
"
|
|
/>
|
|
</div>
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-button @click="isShowModal = false">取 消</el-button>
|
|
<el-button type="primary" @click="submit">确 定</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
|
|
<addPoint ref="addPoint" :unit_ids="units" :symbol_ids="symbols" :target_types="types" @savePlanTarget="submitOne"></addPoint>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { index, save, destroy } from "@/api/budget/planTarget";
|
|
import { index as pointIndex } from "@/api/achievements/points";
|
|
import { resetSelect } from "@/utils";
|
|
import addPoint from "@/views/achievements/components/addPoint.vue"
|
|
import { index as typesIndex } from '@/api/achievements/types'
|
|
import { getparameter } from '@/api/system/dictionary'
|
|
export default {
|
|
components: {
|
|
addPoint
|
|
},
|
|
data() {
|
|
return {
|
|
types: [],
|
|
symbols: [],
|
|
units: [],
|
|
year:'',
|
|
isShow: false,
|
|
|
|
list: [],
|
|
table: [
|
|
// {
|
|
// label: "分值填写",
|
|
// width: 200,
|
|
// customFn: row => {
|
|
// return (
|
|
// <div style="display: flex;">
|
|
// <el-input-number precision={2}
|
|
// min={0}
|
|
// max={100}
|
|
// disabled={!!(row.target && row.target.is_fixed)}
|
|
// vModel={row.score}
|
|
// size="small"
|
|
// controls={false}
|
|
// placeholder="分值"></el-input-number>
|
|
// <el-button style="border-top-left-radius: 0;border-bottom-left-radius: 0;transform: translateX(-4px);"
|
|
// size="small"
|
|
// disabled={!!(row.target && row.target.is_fixed)}
|
|
// type="primary"
|
|
// icon="el-icon-edit"
|
|
// on={{
|
|
// click: _ => {
|
|
// this.$confirm('确认保存分数？','提示',{
|
|
// closeOnClickModal: false
|
|
// }).then(_ => {
|
|
// save(row).then(_ => {
|
|
// this.$message({
|
|
// type: 'success',
|
|
// message: '保存成功'
|
|
// })
|
|
// this.getList()
|
|
// })
|
|
// })
|
|
// }
|
|
// }}>保存</el-button>
|
|
// </div>
|
|
// )
|
|
// }
|
|
// },
|
|
{
|
|
label: "建议上传佐证材料",
|
|
width: 220,
|
|
prop: "evaluation_way",
|
|
customFn: row => {
|
|
|
|
return (
|
|
<div>
|
|
<el-input type="textarea" autosize={{ minRows: 1, maxRows: 3 }} vModel={row.evaluation_way}>
|
|
</el-input>
|
|
<el-button style="float: right;margin-top: 4px;"
|
|
size="small"
|
|
type="primary"
|
|
icon="el-icon-edit"
|
|
on={{
|
|
click: _ => {
|
|
this.$confirm('确认保存评价方式？','提示',{
|
|
closeOnClickModal: false
|
|
}).then(_ => {
|
|
save(row).then(_ => {
|
|
this.$message({
|
|
type: 'success',
|
|
message: '保存成功'
|
|
})
|
|
this.getList()
|
|
})
|
|
})
|
|
}
|
|
}}>保存</el-button>
|
|
</div>
|
|
)
|
|
}
|
|
},
|
|
{
|
|
label: "指标名称",
|
|
prop: "target.name",
|
|
minWidth: 200,
|
|
},
|
|
{
|
|
label: "半年（程）指标值",
|
|
prop: "target.half_target",
|
|
width: 180,
|
|
customFn: row => {
|
|
if (row.target?.unit_detail?.value !== '无') {
|
|
return `${row.target?.symbol_detail?.value}${row.target?.half_target}${row.target?.unit_detail?.value}`
|
|
} else {
|
|
return row.target?.half_target
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: "全年（程）指标值",
|
|
prop: "target.year_target",
|
|
width: 180,
|
|
customFn: row => {
|
|
if (row.target?.unit_detail?.value !== '无') {
|
|
return `${row.target?.symbol_detail?.value}${row.target?.year_target}${row.target?.unit_detail?.value}`
|
|
} else {
|
|
return row.target?.year_target
|
|
}
|
|
}
|
|
},
|
|
{
|
|
label: "创建时间",
|
|
prop: "created_at",
|
|
width: 200,
|
|
},
|
|
{
|
|
label: "操作",
|
|
align: "left",
|
|
minWidth: 200,
|
|
customFn: (row) => {
|
|
return (
|
|
<div>
|
|
<el-popover
|
|
style="margin-left: .4em;"
|
|
placement="top"
|
|
width="160"
|
|
trigger="click"
|
|
>
|
|
<p>确定删除吗？</p>
|
|
<div style="text-align: right; margin: 0">
|
|
<el-button size="mini" type="text">
|
|
取消
|
|
</el-button>
|
|
<el-button
|
|
type="primary"
|
|
size="mini"
|
|
on={{
|
|
["click"]: (e) => {
|
|
destroy({
|
|
id: row.id,
|
|
}).then((res) => {
|
|
this.$message({
|
|
type: "success",
|
|
message: "删除成功",
|
|
});
|
|
this.getList();
|
|
});
|
|
},
|
|
}}
|
|
>
|
|
确定
|
|
</el-button>
|
|
</div>
|
|
|
|
<el-button slot="reference" size="mini" type="danger">
|
|
删除
|
|
</el-button>
|
|
</el-popover>
|
|
|
|
{
|
|
!!(row.target && row.target.is_fixed) ? "" : (
|
|
<el-button slot="reference"
|
|
size="mini"
|
|
type="primary"
|
|
style="margin-left: 4px;"
|
|
on={{
|
|
['click']: _ => {
|
|
this.$refs['addPoint'].setId(row.target_id);
|
|
this.$refs['addPoint'].setType('editor');
|
|
this.$refs['addPoint'].show();
|
|
}
|
|
}}>
|
|
编辑
|
|
</el-button>
|
|
)
|
|
}
|
|
</div>
|
|
);
|
|
},
|
|
},
|
|
],
|
|
select: {
|
|
page: 1,
|
|
page_size: 999,
|
|
plan_id: "",
|
|
},
|
|
|
|
loading: false,
|
|
isShowModal: false,
|
|
pointSelect: {
|
|
page: 1,
|
|
page_size: 10,
|
|
name: ""
|
|
},
|
|
points: [],
|
|
pointTotal: 0,
|
|
spanArr: [],
|
|
spanArr1: [],
|
|
pos1: 0,
|
|
pos: 0,
|
|
pointTable: [
|
|
{
|
|
type: "selection",
|
|
width: 56,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "一级指标",
|
|
key: "target_type",
|
|
render: (h, { row, column, index }) => {
|
|
return h("span", {}, row.target_type_detail?.name);
|
|
},
|
|
minWidth: 180,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "二级指标",
|
|
key: "target_type2",
|
|
render: (h, { row, column, index }) => {
|
|
return h("span", {}, row.target_type2_detail?.name);
|
|
},
|
|
minWidth: 180,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "三级指标",
|
|
key: "name",
|
|
minWidth: 180,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "年份",
|
|
key: "year",
|
|
render: (h, { row, column, index }) => {
|
|
return h("span", {}, row.target_type_detail?.year);
|
|
},
|
|
width: 120,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "计算符号",
|
|
render: (h, { row, column, index }) => {
|
|
return h("span", {}, row.symbol_detail?.value);
|
|
},
|
|
width: 160,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "半年（程）指标值",
|
|
key: "half_target",
|
|
width: 200,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "全年（程）指标值",
|
|
key: "year_target",
|
|
width: 200,
|
|
align: "center",
|
|
},
|
|
{
|
|
title: "单位",
|
|
render: (h, { row, column, index }) => {
|
|
return h("span", {}, row.unit_detail?.value);
|
|
},
|
|
width: 160,
|
|
align: "center",
|
|
},
|
|
],
|
|
selections: [], //已选择的全部计划
|
|
selectedIds: [],
|
|
};
|
|
},
|
|
methods: {
|
|
setYear(year){
|
|
console.log("year",year)
|
|
this.year = year
|
|
this.getTypes(year);
|
|
this.getPoints()
|
|
},
|
|
async getTypes(year) {
|
|
const res = await typesIndex({ show_tree:1,year:year })
|
|
this.types = res || []
|
|
},
|
|
async getSymbols() {
|
|
const res = await getparameter( { number: "symbol" })
|
|
this.symbols = res.detail
|
|
},
|
|
async getUnits() {
|
|
const res = await getparameter({ number: "unit" })
|
|
this.units = res.detail
|
|
},
|
|
|
|
show() {
|
|
this.isShow = true;
|
|
},
|
|
hidden() {
|
|
this.isShow = false;
|
|
},
|
|
setPlanPid (pid) {
|
|
this.planPid = pid;
|
|
},
|
|
getPlanId() {
|
|
return this.select.plan_id;
|
|
},
|
|
setPlanId(plan_id) {
|
|
this.select.plan_id = plan_id;
|
|
},
|
|
|
|
spanMethod({ row, column, rowIndex, columnIndex }) {
|
|
if (column.key === "target_type") {
|
|
const _row = this.spanArr[rowIndex];
|
|
const _col = _row > 0 ? 1 : 0;
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col,
|
|
};
|
|
}
|
|
if (column.key === "target_type2") {
|
|
const _row = this.spanArr1[rowIndex];
|
|
const _col = _row > 0 ? 1 : 0;
|
|
return {
|
|
rowspan: _row,
|
|
colspan: _col,
|
|
};
|
|
}
|
|
},
|
|
|
|
selectionChange(selection) {
|
|
this.selections = Array.from(new Set(selection.map((item) => item.id)));
|
|
console.log(this.selections);
|
|
},
|
|
|
|
async getList() {
|
|
const res = await index(this.select);
|
|
this.list = res.data;
|
|
},
|
|
|
|
async getPoints() {
|
|
this.loading = true;
|
|
this.pos = this.pos1 = 0;
|
|
this.spanArr = [];
|
|
this.spanArr1 = [];
|
|
try {
|
|
const res = await pointIndex({
|
|
year:this.year,
|
|
...this.pointSelect
|
|
});
|
|
let selectedIds = Array.from(
|
|
new Set(this.list.map((item) => item.target_id))
|
|
);
|
|
this.selectedIds = selectedIds;
|
|
this.points = res.data.map((item) => {
|
|
return {
|
|
...item,
|
|
_checked:
|
|
!!selectedIds.find((i) => i === item.id) ||
|
|
!!this.selections.find((i) => i === item.id),
|
|
_disabled: !!selectedIds.find((i) => i === item.id),
|
|
};
|
|
});
|
|
this.pointTotal = res.total;
|
|
|
|
for (let i in this.points) {
|
|
if (i === 0) {
|
|
this.spanArr.push(1);
|
|
this.pos = 0;
|
|
this.spanArr1.push(1);
|
|
this.pos1 = 0;
|
|
} else {
|
|
if (
|
|
this.points[i]?.target_type_detail?.name ===
|
|
this.points[i - 1]?.target_type_detail?.name
|
|
) {
|
|
this.spanArr[this.pos] += 1;
|
|
this.spanArr.push(0);
|
|
} else {
|
|
this.spanArr.push(1);
|
|
this.pos = i;
|
|
}
|
|
|
|
if (
|
|
this.points[i]?.target_type2_detail?.name ===
|
|
this.points[i - 1]?.target_type2_detail?.name
|
|
) {
|
|
this.spanArr1[this.pos1] += 1;
|
|
this.spanArr1.push(0);
|
|
} else {
|
|
this.spanArr1.push(1);
|
|
this.pos1 = i;
|
|
}
|
|
}
|
|
}
|
|
|
|
this.loading = false;
|
|
} catch (err) {
|
|
this.loading = false;
|
|
}
|
|
},
|
|
|
|
submitOne ({ id, score, evaluation_way}) {
|
|
save({
|
|
target_id: id,
|
|
plan_id: this.getPlanId(),
|
|
score,
|
|
evaluation_way
|
|
}).then(_ => {
|
|
this.getList();
|
|
})
|
|
},
|
|
|
|
submit() {
|
|
let promiseAll = [];
|
|
this.selections.forEach((target_id) => {
|
|
if (this.selectedIds.indexOf(target_id) !== -1) return;
|
|
promiseAll.push(
|
|
save({
|
|
target_id,
|
|
plan_id: this.getPlanId(),
|
|
score: this.points.find(j => j.id === target_id)?.score,
|
|
evaluation_way: this.points.find(j => j.id === target_id)?.evaluation_way
|
|
})
|
|
);
|
|
});
|
|
Promise.all(promiseAll).then((res) => {
|
|
this.getList();
|
|
this.isShowModal = false;
|
|
});
|
|
},
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
isShow(val) {
|
|
if (val) {
|
|
this.getList();
|
|
} else {
|
|
}
|
|
},
|
|
isShowModal(val) {
|
|
if (val) {
|
|
// this.getPoints();
|
|
} else {
|
|
this.selections = [];
|
|
resetSelect(this.pointSelect);
|
|
this.points = [];
|
|
this.pointTotal = 0;
|
|
}
|
|
},
|
|
},
|
|
created() {
|
|
|
|
this.getSymbols();
|
|
this.getUnits();
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
</style>
|