GitBucket
<template>
<div class="appraisal">
<div class="leftTree">
<n-tree
block-line
:data="data"
:default-expanded-keys="defaultExpandedKeys"
:render-switcher-icon="renderSwitcherIcon"
default-expand-all
:node-props="nodeProps"
/>
</div>
<div class="rightBox">
<h3>指标信息</h3>
<div class="buttonList">
<n-space>
<n-button type="primary" @click="handleClick('add')"
>新增指标</n-button
>
<n-button type="primary" @click="handleClick('edit')"
>修改指标</n-button
>
<n-button type="primary" @click="handleClick('delete')"
>删除指标</n-button
>
</n-space>
</div>
<div class="formBox">
<div class="top">
<div class="inp">
<span>指标名称：</span>
<n-input
v-model:value="formValue.name"
type="text"
readonly="true"
></n-input>
</div>
<div class="inp">
<span>指标类型：</span>
<n-input
v-model:value="formValue.type"
type="text"
readonly="true"
></n-input>
</div>
<div class="inp">
<span>适用范围：</span>
<n-input
v-model:value="formValue.area"
type="text"
readonly="true"
></n-input>
</div>
<div class="inp">
<span>考核方式：</span>
<n-input
v-model:value="formValue.mode"
type="text"
readonly="true"
></n-input>
</div>
</div>
<div class="inp">
<span>指标解释：</span>
<n-input
v-model:value="formValue.explain"
type="textarea"
:autosize="{
minRows: 3,
}"
readonly="true"
></n-input>
</div>
<div class="inp">
<span>评分标准：</span>
<n-input
v-model:value="formValue.standard"
type="textarea"
:autosize="{
minRows: 6,
}"
readonly="true"
></n-input>
</div>
<div class="inp">
<span>评分依据：</span>
<n-input
v-model:value="formValue.basis"
type="textarea"
:autosize="{
minRows: 3,
}"
readonly="true"
></n-input>
</div>
</div>
</div>
<n-modal
v-model:show="showModal"
:show-icon="false"
preset="card"
:title="modelTitle"
style="width:50%"
>
<n-form
:label-width="80"
label-placement="left"
:model="addFormValue"
size="medium"
ref="queryFormRef"
>
<n-form-item label="指标名称" path="name">
<n-input
v-model:value="addFormValue.name"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item label="指标类型" path="type">
<n-input
v-model:value="addFormValue.type"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item label="适用范围" path="area">
<n-input
v-model:value="addFormValue.area"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item label="指标分值" path="mode">
<n-input
v-model:value="addFormValue.mode"
clearable
placeholder="请输入···"
/>
</n-form-item>
<n-form-item label="指标解释" path="explain">
<n-input
v-model:value="addFormValue.explain"
clearable
placeholder="请输入···"
type="textarea"
:autosize="{
minRows: 3,
}"
/>
</n-form-item>
<n-form-item label="评分标准" path="standard">
<n-input
v-model:value="addFormValue.standard"
clearable
placeholder="请输入···"
type="textarea"
:autosize="{
minRows: 5,
}"
/>
</n-form-item>
<n-form-item label="指标依据" path="basis">
<n-input
v-model:value="addFormValue.basis"
clearable
placeholder="请输入···"
type="textarea"
:autosize="{
minRows: 3,
}"
/>
</n-form-item>
</n-form>
<template #action>
<n-space>
<n-button @click="() => (showModal = false)">取消</n-button>
<n-button
type="primary"
@click="handleClick('sure')"
>确定</n-button
>
</n-space>
</template>
</n-modal>
</div>
</template>
<script>
import { ref, reactive, toRefs, onMounted, h } from "vue";
import { NIcon, useDialog, useMessage } from "naive-ui";
import { ChevronForward } from "@vicons/ionicons5";
export default {
name: "appraisal",
setup() {
const message = useMessage();
const dialog = useDialog();
const state = reactive({
data: [
{
key: "0",
label: "月度绩效",
children: [
{
key: "0-0",
label: "站长",
children: [
{
label: "岗位任务",
key: "0-0-0",
children: [
{
label: "站点工作安排情况",
key: "0-0-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-0-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-0-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-0-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-0-0-4",
children: [],
},
],
},
{
label: " 卫生、出勤与其他",
key: "0-0-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-0-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-0-1-1",
children: [],
},
],
},
],
},
{
key: "0-1",
label: "操作工",
children: [
{
label: "岗位任务",
key: "0-1-0",
children: [
{
label: "站点工作安排情况",
key: "0-1-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-1-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-1-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-1-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-1-0-4",
children: [],
},
],
},
{
label: "卫生、出勤与其他",
key: "0-1-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-1-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-1-1-1",
children: [],
},
],
},
],
},
{
key: "0-2",
label: "设备高级工程师",
children: [
{
label: "岗位任务",
key: "0-2-0",
children: [
{
label: "站点工作安排情况",
key: "0-2-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-2-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-2-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-2-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-2-0-4",
children: [],
},
],
},
{
label: "卫生、出勤与其他",
key: "0-2-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-2-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-2-1-1",
children: [],
},
],
},
],
},
{
key: "0-3",
label: "调度员",
children: [
{
label: "岗位任务",
key: "0-3-0",
children: [
{
label: "站点工作安排情况",
key: "0-3-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-3-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-3-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-3-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-3-0-4",
children: [],
},
],
},
{
label: "卫生、出勤与其他",
key: "0-3-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-3-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-3-1-1",
children: [],
},
],
},
],
},
{
key: "0-4",
label: "电工",
children: [
{
label: "岗位任务",
key: "0-4-0",
children: [
{
label: "站点工作安排情况",
key: "0-4-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-4-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-4-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-4-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-4-0-4",
children: [],
},
],
},
{
label: "卫生、出勤与其他",
key: "0-4-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-4-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-4-1-1",
children: [],
},
],
},
],
},
{
key: "0-5",
label: "深邃维保员",
children: [
{
label: "岗位任务",
key: "0-5-0",
children: [
{
label: "站点工作安排情况",
key: "0-5-0-0",
children: [],
},
{
label: "日常工艺运行巡检工作情况",
key: "0-5-0-1",
children: [],
},
{
label: "日常运行操作情况",
key: "0-5-0-2",
children: [],
},
{
label: " 配合完成设备维护保养情况",
key: "0-5-0-3",
children: [],
},
{
label: "安全操作情况",
key: "0-5-0-4",
children: [],
},
],
},
{
label: "卫生、出勤与其他",
key: "0-5-1",
children: [
{
label: "生产责任区设备、环境的卫生和整洁状况",
key: "0-5-1-0",
children: [],
},
{
label: "出勤情况",
key: "0-5-1-1",
children: [],
},
],
},
],
},
],
},
{
key: "1",
label: "年度绩效",
children: [
{
key: "1-0",
label: "理论知识考核",
children: [],
},
{
key: "1-1",
label: "实际操作技能（安全成绩）",
children: [],
},
{
key: "1-2",
label: "实际操作技能（质量成绩）",
children: [],
},
],
},
],
formValue: {
name: "站点工作安排情况",
type: "定性指标",
area: "站长",
mode: "20",
explain: "对站点工作安排情况进行评估；对站点人员排班情况进行评估",
standard:
"A: ———。B: 站点工作安排合理，班组保质保量有效完成各项工作任务；月度班组人员排班合理，能有效根据情况变化调整。C: 站点工作安排较为合理，班组拖延或未能完成工作任务的情况少于2次；月度班组人员排班计划较为合理，能基本满足完成工作任务需要。D: 站点工作安排存在一定问题，班组拖延或未能完成工作任务的情况大于2次；月度班组人员排班计划存在一定问题，经常性出现代班、调班和连班情况",
basis: "项目运行维护手册、流量监测记录、现场检测",
},
modelTitle: "新增",
showModal: false,
addFormValue: {
name: "",
type: "",
area: "",
mode: "",
explain: "",
standard: "",
basis: "",
},
});
//按钮点击事件
const handleClick = (type) => {
switch (type) {
//新增
case "add":
state.modelTitle = "新增";
state.showModal = true;
break;
//编辑
case "edit":
console.log(state.formValue)
state.modelTitle = "修改";
state.addFormValue ={...state.formValue}
console.log(state.addFormValue)
state.showModal = true;
break;
//删除
case "delete":
dialog.info({
title: "提示",
content: `您想删除当前项吗？`,
positiveText: "确定",
negativeText: "取消",
onPositiveClick: () => {
message.success("删除成功");
},
onNegativeClick: () => {},
});
break;
// 提交
case "sure":
console.log(state.addFormValue)
state.showModal=false
}
};
onMounted(()=>{
})
return {
...toRefs(state),
defaultExpandedKeys: ref(["40", "41"]),
renderSwitcherIcon: () =>
h(NIcon, null, { default: () => h(ChevronForward) }),
nodeProps: ({ option }) => {
return {
onClick() {
if (option.children.length) {
return;
} else {
state.formValue.name = option.label;
}
},
};
},
handleClick,
};
},
};
</script>
<style lang='less' scoped>
.appraisal {
width: 100%;
height: 100%;
display: flex;
.leftTree {
padding: 20px 10px;
margin: 10px 30px 10px 10px;
width: 310px;
height: calc(100% - 20px);
box-shadow: 0px 1px 7px 0px rgba(1, 14, 189, 0.35);
overflow: auto;
}
.rightBox {
width: calc(100% - 350px);
position: relative;
h3 {
font-size: 20px;
font-family: Alibaba PuHuiTi;
color: #145bf7;
line-height: 80px;
border-bottom: 1px solid;
}
.buttonList {
position: absolute;
right: 20px;
top: 30px;
}
.formBox {
margin-top: 20px;
padding: 0 30px;
.top {
display: flex;
.inp {
flex: 1;
margin-right: 10px;
}
}
.inp {
margin: 20px 0;
display: flex;
align-items: center;
span {
width: 100px;
}
}
}
}
}
</style>