|
|
|
|
@ -0,0 +1,397 @@
|
|
|
|
|
<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
|
|
|
|
|
>
|
|
|
|
|
<xy-table :list="list" :table-item="table">
|
|
|
|
|
<template v-slot:btns> </template>
|
|
|
|
|
</xy-table>
|
|
|
|
|
</el-drawer>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="绩效指标列表" :visible.sync="isShowModal" width="54%">
|
|
|
|
|
<Table
|
|
|
|
|
: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>
|
|
|
|
|
|
|
|
|
|
<el-dialog :title="evaluateForm.type === 1 ? '年中绩效目标' : '年末绩效目标'" :visible.sync="isShowEvaluate" width="54%">
|
|
|
|
|
<el-input v-model="evaluateForm.result" type="textarea" :autosize="{minRows:6}" placeholder="请填写目标"></el-input>
|
|
|
|
|
|
|
|
|
|
<span slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="isShowModal = false">取 消</el-button>
|
|
|
|
|
<el-button type="primary" @click="submitEvaluate">确 定</el-button>
|
|
|
|
|
</span>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import { index, save, destroy } from "@/api/budget/planTarget";
|
|
|
|
|
import { index as pointIndex } from "@/api/achievements/points";
|
|
|
|
|
import { save as evaluateSave } from "@/api/achievements/evaluate"
|
|
|
|
|
import { resetSelect } from "@/utils"
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
isShow: false,
|
|
|
|
|
|
|
|
|
|
list: [],
|
|
|
|
|
table: [
|
|
|
|
|
{
|
|
|
|
|
label: "指标名称",
|
|
|
|
|
prop: "target.name",
|
|
|
|
|
minWidth: 200
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "半年（程）指标值",
|
|
|
|
|
prop: "target.half_target",
|
|
|
|
|
width: 180
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "全年（程）指标值",
|
|
|
|
|
prop: "target.year_target",
|
|
|
|
|
width: 180
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "创建时间",
|
|
|
|
|
prop: "created_at",
|
|
|
|
|
width: 200,
|
|
|
|
|
},
|
|
|
|
|
{
|
|
|
|
|
label: "操作",
|
|
|
|
|
align: "left",
|
|
|
|
|
minWidth: 200,
|
|
|
|
|
customFn: (row) => {
|
|
|
|
|
return (
|
|
|
|
|
<div style={
|
|
|
|
|
{
|
|
|
|
|
'display':'flex',
|
|
|
|
|
'align-items':'center',
|
|
|
|
|
'flex-wrap':'wrap',
|
|
|
|
|
'justify-content':'flex-start'
|
|
|
|
|
}
|
|
|
|
|
}>
|
|
|
|
|
<el-dropdown on={{
|
|
|
|
|
['command']:command => {
|
|
|
|
|
this.evaluateForm.plan_target_id = row.id
|
|
|
|
|
this.evaluateForm.type = command
|
|
|
|
|
this.isShowEvaluate = true
|
|
|
|
|
}
|
|
|
|
|
}}>
|
|
|
|
|
<el-button size="mini" type="primary">
|
|
|
|
|
绩效目标<i class="el-icon-arrow-down el-icon--right"></i>
|
|
|
|
|
</el-button>
|
|
|
|
|
<el-dropdown-menu slot="dropdown">
|
|
|
|
|
<el-dropdown-item command={1}>年中目标</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item command={2}>年末目标</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
],
|
|
|
|
|
select: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 999,
|
|
|
|
|
plan_id: "",
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
loading: false,
|
|
|
|
|
isShowModal: false,
|
|
|
|
|
pointSelect: {
|
|
|
|
|
page: 1,
|
|
|
|
|
page_size: 10,
|
|
|
|
|
},
|
|
|
|
|
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: "计算符号",
|
|
|
|
|
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: [], //已选择的全部计划
|
|
|
|
|
|
|
|
|
|
isShowEvaluate: false,
|
|
|
|
|
evaluateForm: {
|
|
|
|
|
result: "",
|
|
|
|
|
type: 1,
|
|
|
|
|
file_ids: [],
|
|
|
|
|
plan_target_id: ""
|
|
|
|
|
}
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
show() {
|
|
|
|
|
this.isShow = true;
|
|
|
|
|
},
|
|
|
|
|
hidden() {
|
|
|
|
|
this.isShow = false;
|
|
|
|
|
},
|
|
|
|
|
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() {
|
|
|
|
|
this.pos = this.pos1 = 0;
|
|
|
|
|
this.spanArr = [];
|
|
|
|
|
this.spanArr1 = [];
|
|
|
|
|
const res = await index(this.select);
|
|
|
|
|
this.list = res.data;
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
async getPoints() {
|
|
|
|
|
this.loading = true;
|
|
|
|
|
try {
|
|
|
|
|
const res = await pointIndex(this.pointSelect);
|
|
|
|
|
let selectedIds = Array.from(new Set(this.list.map((item) => item.target_id)));
|
|
|
|
|
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;
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
submit() {
|
|
|
|
|
Promise.all(
|
|
|
|
|
this.selections.map((target_id) => {
|
|
|
|
|
return save({
|
|
|
|
|
target_id,
|
|
|
|
|
plan_id: this.getPlanId(),
|
|
|
|
|
});
|
|
|
|
|
})
|
|
|
|
|
).then((res) => {
|
|
|
|
|
this.getList();
|
|
|
|
|
this.isShowModal = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
submitEvaluate() {
|
|
|
|
|
evaluateSave(this.evaluateForm).then(res => {
|
|
|
|
|
this.$message({
|
|
|
|
|
type: 'success',
|
|
|
|
|
message: "保存成功"
|
|
|
|
|
})
|
|
|
|
|
this.isShowEvaluate = 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss"></style>
|
