<template>
|
<el-dialog v-model="dialogVisible" :fullscreen="full" @close="handleClose(ruleFormRef)" :title="titles" width="50%" draggable>
|
<el-button @click="toggleFullscreen" size="small" class="pot" :icon="FullScreen"></el-button>
|
<el-form :model="form" label-width="120px" ref="ruleFormRef" :rules="rules">
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="考核标题" size="default" prop="title">
|
<el-input v-model="form.title" placeholder="请填写考核标题"></el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" :offset="2">
|
<el-form-item label="考核日期" size="default" prop="examineDate">
|
<el-date-picker
|
v-model="form.examineDate"
|
format="YYYY-MM-DD HH:mm:ss"
|
value-format="YYYY-MM-DD HH:mm:ss"
|
type="datetime"
|
placeholder="请选择"
|
style="width: 100%"
|
/>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="合格分数" size="default" prop="acceptanceNumber">
|
<el-input v-model="form.acceptanceNumber" disabled />
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" :offset="2">
|
<el-form-item label="总分" size="default" prop="examineTotalNumber">
|
<el-input v-model="form.examineTotalNumber" disabled />
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="考核部门" size="default" prop="examineDepartmentId">
|
<el-tree-select
|
v-model="form.examineDepartmentId"
|
:data="data"
|
class="w100"
|
@node-click="nameData1"
|
:props="propse"
|
check-strictly
|
placeholder="请选择"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" :offset="2">
|
<el-form-item label="考核人" size="default" prop="examinePersonName">
|
<el-input v-model="form.examinePersonName">
|
<template #append> <el-button :icon="Search" @click="daiInpt(1)" /></template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="被考核部门" size="default" prop="beExaminedDepartmentId">
|
<el-tree-select
|
v-model="form.beExaminedDepartmentId"
|
:data="data"
|
@node-click="nameData2"
|
class="w100"
|
:props="propse"
|
check-strictly
|
placeholder="请选择"
|
/>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" :offset="2">
|
<el-form-item label="被考核人" size="default" prop="beExaminedPersonName">
|
<el-input v-model="form.beExaminedPersonName">
|
<template #append> <el-button :icon="Search" @click="daiInpt(0)" /></template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="24">
|
<el-form-item label="附件">
|
<uploaderFile :fileList="fileList" :systemName="'GOAL_MANAGE'" :disabled="disabled"
|
@successUploader="successUploader" @deleteFile="deleteFile"></uploaderFile>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row>
|
<el-col :span="11">
|
<el-form-item label="考核模板" size="default" prop="examineTemplateName">
|
<el-input v-model="form.examineTemplateName">
|
<template #append> <el-button :icon="Search" @click="daiAdd" /></template>
|
</el-input>
|
</el-form-item>
|
</el-col>
|
<el-col :span="11" :offset="2">
|
<el-form-item label="备注信息" prop="memo">
|
<el-input v-model="form.memo" type="textarea"> </el-input>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
<el-tabs v-model="activeName" class="demo-tabs">
|
<el-tab-pane label="考核项目" name="1">
|
<!-- <el-button type="primary" size="default" @click="daiAdd">新增</el-button> -->
|
</el-tab-pane>
|
</el-tabs>
|
<el-table :data="form.numberDetailJson" style="width: 100%">
|
<el-table-column align="center" prop="itemDetail" label="考核项目" />
|
<el-table-column align="center" prop="content" label="考核内容" />
|
<el-table-column align="center" label="考核分数">
|
<template #default="scope">
|
<el-input @blur="numberC" v-model.number="scope.row.number"> </el-input>
|
</template>
|
</el-table-column>
|
<!-- <el-table-column align="center" prop="address" label="制定日期" />
|
<el-table-column align="center" prop="address" label="上报人" />
|
<el-table-column align="center" label="操作">
|
<template #default>
|
<el-button link type="primary">查看</el-button>
|
</template>
|
</el-table-column> -->
|
</el-table>
|
<template #footer>
|
<span class="dialog-footer">
|
<el-button @click="resetForm(ruleFormRef)" size="default">关闭</el-button>
|
<el-button type="primary" @click="submitForm(ruleFormRef)" size="default">确定</el-button>
|
</span>
|
</template>
|
</el-dialog>
|
<DailogSearch ref="Show" @typeDome="onType"></DailogSearch>
|
<DailogSearchUser ref="Shows" @SearchUser="userId"></DailogSearchUser>
|
</template>
|
<script lang="ts">
|
import { defineComponent, ref, reactive } from 'vue';
|
import { Search, FullScreen } from '@element-plus/icons-vue';
|
import DailogSearch from './DailogSearch.vue';
|
import DailogSearchUser from '/@/components/DailogSearchUser/index.vue';
|
import { ElMessage, ElMessageBox } from 'element-plus';
|
import { goalManagementApi } from '/@/api/goalManagement';
|
import type { UploadProps, UploadUserFile } from 'element-plus';
|
import type { FormInstance, FormRules } from 'element-plus';
|
import uploaderFile from '/@/components/uploaderFile/index.vue';
|
export default defineComponent({
|
components: { DailogSearchUser, DailogSearch,uploaderFile },
|
setup(props, { emit }) {
|
const dialogVisible = ref<boolean>(false);
|
const ruleFormRef = ref<FormInstance>();
|
const form = ref({
|
beExaminedDepartmentId: '', ////被考核部门ID/外键
|
beExaminedDepartmentName: '',
|
beExaminedPersonId: '', ////被考核人ID/外键（可能有多个，用逗号隔开）
|
beExaminedPersonName: '',
|
examineDate: '', ////考核日期
|
examineDepartmentId: '', ////考核部门ID/外键
|
examineDepartmentName: '',
|
examinePersonId: '', ////考核人ID/外键
|
examinePersonName: '',
|
examineTemplateId: '', ////绩效考核模板ID/外键
|
examineTemplateName: '',
|
examineTotalNumber: '', ////总分
|
acceptanceNumber: '', ///合格分数
|
extraFile: '', //责任书附件
|
itemDetail: '', ////考核项目
|
memo: '', ////备注信息
|
numberDetailJson: [], ////各个考核项目的具体得分，json格式。形式为：[{“id”:"123","number":"123"}]
|
title: '', ////考核标题
|
});
|
const titles = ref();
|
const titleT = ref();
|
const disabled = ref(false);
|
// 打开弹窗
|
const openDailog = (title: string, value: any, id: number) => {
|
department();
|
dialogVisible.value = true;
|
titles.value = `${title}安全考核管理`;
|
titleT.value=title
|
disabled.value = title == '查看' ? true : false;
|
if (title == '查看' || title == '修改')
|
goalManagementApi()
|
.getexamineMngDetail(id)
|
.then((res) => {
|
if (res.data.code == 200) {
|
form.value = res.data.data;
|
form.value.examineDate = timeC(form.value.examineDate);
|
form.value.numberDetailJson = form.value.currentExamineDtoList;
|
|
|
if(res.data.data.extraFile!=null&&res.data.data.extraFile!=''){
|
var extraFileList = res.data.data.extraFile.split(',')
|
for(var a = 0;a<extraFileList.length;a++){
|
fileList.value.push(
|
{
|
name:extraFileList[a]
|
}
|
)
|
}
|
}else {
|
fileList.value = []
|
}
|
|
// fileList.value = (res.data.data.fileList?res.data.data.fileList:[])
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
// 上传成功组装数据
|
const successUploader = (list) =>{
|
console.log('successUploader',list)
|
fileList.value = list
|
var formFileList = ''
|
for(var a = 0;a<fileList.value.length;a++){
|
if(a==fileList.value.length-1){
|
formFileList+=fileList.value[a].name
|
}else {
|
formFileList+=fileList.value[a].name+','
|
}
|
}
|
form.value.extraFile = formFileList
|
}
|
const deleteFile = (list) =>{
|
console.log('deleteFile',list)
|
fileList.value = list
|
const formFileList = ''
|
for(var a = 0;a<fileList.value.length;a++){
|
if(a==fileList.value.length-1){
|
formFileList.value+=fileList.value[a].name
|
}else {
|
formFileList.value+=fileList.value[a].name+','
|
}
|
}
|
form.value.extraFile = formFileList
|
}
|
|
const timeC = (timestamp: any) => {
|
let a = new Date(timestamp).getTime();
|
const date = new Date(a);
|
const Y = date.getFullYear() + '-';
|
const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
|
const D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
|
const h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
|
const m = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes();
|
const s = date.getSeconds(); // 秒
|
const dateString = Y + M + D + h + m + `:${s}`;
|
// console.log('dateString', dateString); // > dateString 2021-07-06 14:23
|
return dateString;
|
};
|
// 验证
|
const rules = reactive<FormRules>({
|
title: [{ required: true, message: '考核标题不能为空', trigger: 'blur' }],
|
examineDate: [{ required: true, message: '考核日期不能为空', trigger: 'blur' }],
|
examineDepartmentId: [{ required: true, message: '考核部门不能为空', trigger: 'blur' }],
|
examinePersonName: [],
|
examinePersonId: [],
|
beExaminedDepartmentId: [{ required: true, message: '被考核部门不能为空', trigger: 'blur' }],
|
beExaminedPersonName: [],
|
beExaminedPersonId: [],
|
examineTemplateId: [],
|
examineTemplateName: [{ required: true, message: '考核模板不能为空', trigger: 'blur' }],
|
memo: [],
|
});
|
// 接收
|
const onType = (data: any, val: any) => {
|
form.value.examineTotalNumber = '';
|
form.value.examineTemplateId = data.id;
|
form.value.examineTemplateName = data.title;
|
form.value.acceptanceNumber = data.acceptanceNumber;
|
form.value.numberDetailJson = val.examineItemList;
|
};
|
const numberC = () => {
|
let arr = 0;
|
for (let i = 0; i < form.value.numberDetailJson.length; i++) {
|
if (form.value.numberDetailJson[i].number != undefined) {
|
arr = parseInt(arr) + parseInt(form.value.numberDetailJson[i].number);
|
} else {
|
arr = parseInt(arr) + 0;
|
}
|
}
|
form.value.examineTotalNumber = arr;
|
};
|
// 提交
|
const submitForm = async (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
if(titleT.value=='新增'){
|
delete form.value.id
|
}
|
dialogVisible.value = false;
|
let arr = [];
|
for (let i = 0; i < form.value.numberDetailJson.length; i++) {
|
arr.push({
|
id: form.value.numberDetailJson[i].id,
|
number: form.value.numberDetailJson[i].number,
|
});
|
}
|
form.value.numberDetailJson = JSON.stringify(arr);
|
goalManagementApi()
|
.getexamineMngAddOrUpdate(form.value)
|
.then((res) => {
|
if (res.data.code == 200) {
|
ElMessage({
|
message: res.data.msg,
|
type: 'success',
|
});
|
emit('navAddorUpdata');
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
} else {
|
console.log('error submit!', fields);
|
}
|
});
|
};
|
// 取消
|
const resetForm = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
dialogVisible.value = false;
|
formEl.resetFields();
|
};
|
const handleClose = (formEl: FormInstance | undefined) => {
|
if (!formEl) return;
|
formEl.resetFields();
|
fileList.value=[]
|
};
|
const activeName = ref('1');
|
// 新增弹窗
|
const Show = ref();
|
const daiAdd = () => {
|
Show.value.openDailog();
|
};
|
// 安全目标指标弹窗
|
const Shows = ref();
|
const daiInpt = (type: any) => {
|
Shows.value.openDailog(type);
|
};
|
// 点击上传
|
const fileList = ref<UploadUserFile[]>([]);
|
|
const handleRemove: UploadProps['onRemove'] = (file, uploadFiles) => {
|
console.log(file, uploadFiles);
|
};
|
|
const handlePreview: UploadProps['onPreview'] = (uploadFile) => {
|
console.log(uploadFile);
|
};
|
|
const handleExceed: UploadProps['onExceed'] = (files, uploadFiles) => {
|
ElMessage.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + uploadFiles.length} totally`);
|
};
|
|
const beforeRemove: UploadProps['beforeRemove'] = (uploadFile, uploadFiles) => {
|
return ElMessageBox.confirm(`Cancel the transfert of ${uploadFile.name} ?`).then(
|
() => true,
|
() => false
|
);
|
};
|
const userId = (val: any, type: any) => {
|
if (type == 1) {
|
form.value.examinePersonId = val.uid;
|
form.value.examinePersonName = val.realName;
|
} else if (type == 0) {
|
let uid = [];
|
let realName = [];
|
for (let i = 0; i < val.length; i++) {
|
uid.push(val[i].uid);
|
realName.push(val[i].realName);
|
}
|
form.value.beExaminedPersonId = uid.toString();
|
form.value.beExaminedPersonName = realName.toString();
|
console.log(form.value.beExaminedPersonId, form.value.beExaminedPersonName);
|
}
|
};
|
//全屏
|
const full = ref(false);
|
const toggleFullscreen = () => {
|
if (full.value == false) {
|
full.value = true;
|
} else {
|
full.value = false;
|
}
|
};
|
//部门
|
const department = () => {
|
goalManagementApi()
|
.getTreedepartment()
|
.then((res) => {
|
if (res.data.code == 200) {
|
data.value = res.data.data;
|
} else {
|
ElMessage.error(res.data.msg);
|
}
|
});
|
};
|
const propse = {
|
label: 'depName',
|
children: 'children',
|
value: 'depId',
|
};
|
const data = ref();
|
const nameData1 = (val: any) => {
|
form.value.examineDepartmentName = val.depName;
|
};
|
const nameData2 = (val: any) => {
|
form.value.beExaminedDepartmentName = val.depName;
|
console.log(form.value);
|
};
|
return {
|
titleT,
|
rules,
|
timeC,
|
numberC,
|
onType,
|
handleClose,
|
nameData1,
|
nameData2,
|
ruleFormRef,
|
department,
|
propse,
|
data,
|
userId,
|
activeName,
|
dialogVisible,
|
form,
|
titles,
|
disabled,
|
openDailog,
|
submitForm,
|
resetForm,
|
Show,
|
daiAdd,
|
Shows,
|
daiInpt,
|
Search,
|
fileList,
|
handleRemove,
|
handlePreview,
|
handleExceed,
|
beforeRemove,
|
full,
|
toggleFullscreen,
|
FullScreen,
|
successUploader,
|
deleteFile
|
};
|
},
|
});
|
</script>
|
<style scoped>
|
.el-row {
|
padding: 0 0 20px 0;
|
}
|
</style>
|
