|
@@ -1,34 +1,41 @@
|
|
|
<script setup lang="ts">
|
|
|
import { ref, reactive, nextTick } from "vue";
|
|
|
import { ElMessageBox, ElMessage } from "element-plus";
|
|
|
+import { Calendar } from "@element-plus/icons-vue";
|
|
|
+import dayjs from "dayjs";
|
|
|
+import { postAddAssessment } from "@/api/assessment";
|
|
|
+import { postListTreeWithUser } from "@/api/department";
|
|
|
+import { getTemplateInfoList } from "@/api/templateInfo";
|
|
|
import ElPicker from "@/components/ELPicker/index.vue";
|
|
|
+const $emit = defineEmits(["addHandClick"]);
|
|
|
const dialogVisibleAdd = ref(false);
|
|
|
-const title = ref<String>("发起考核");
|
|
|
+const titleHeader = ref<any>("发起考核");
|
|
|
// 季度 半年
|
|
|
const ElPickerRef = ref();
|
|
|
const form = reactive({
|
|
|
name: "",
|
|
|
- cycle: "",
|
|
|
+ cycle: "月度",
|
|
|
cycleValue: "",
|
|
|
assessmentType: null,
|
|
|
- params: {
|
|
|
- id: "",
|
|
|
- tpName: "",
|
|
|
- remark: "",
|
|
|
- isDelete: "",
|
|
|
- createUser: "",
|
|
|
- createTime: "",
|
|
|
- updateUser: "",
|
|
|
- updateTime: "",
|
|
|
- flowId: ""
|
|
|
- },
|
|
|
- assessmentObjectList: {
|
|
|
- left: [{ value: "1" }],
|
|
|
- right: [{ value: "1" }]
|
|
|
- },
|
|
|
- tpName: "",
|
|
|
- remark: "",
|
|
|
- isDelete: ""
|
|
|
+ // params: {
|
|
|
+ // id: "",
|
|
|
+ // tpName: "",
|
|
|
+ // remark: "",
|
|
|
+ // isDelete: "",
|
|
|
+ // createUser: "",
|
|
|
+ // createTime: "",
|
|
|
+ // updateUser: "",
|
|
|
+ // updateTime: "",
|
|
|
+ // flowId: ""
|
|
|
+ // },
|
|
|
+ assessmentObjectList: [
|
|
|
+ {
|
|
|
+ assessmentObjectId: "",
|
|
|
+ assessmentObjectName: "",
|
|
|
+ assessmentModelId: "",
|
|
|
+ assessmentModelName: ""
|
|
|
+ }
|
|
|
+ ]
|
|
|
});
|
|
|
const rules = reactive({
|
|
|
name: [
|
|
@@ -44,42 +51,55 @@ const formRightRules = reactive({
|
|
|
right: [{ required: true, message: "请选择考核模板", trigger: "blur" }]
|
|
|
});
|
|
|
const handleClose = () => {
|
|
|
- ElMessageBox.confirm("确认关闭弹窗吗?")
|
|
|
- .then(() => {
|
|
|
- dialogVisibleAdd.value = !dialogVisibleAdd.value;
|
|
|
- ElMessage({
|
|
|
- message: "已关闭"
|
|
|
- });
|
|
|
- })
|
|
|
- .catch(() => {
|
|
|
- // catch error
|
|
|
- });
|
|
|
-};
|
|
|
-// 添加部门保存
|
|
|
-const saveDepartment = () => {
|
|
|
- dialogVisibleAdd.value = false;
|
|
|
+ dialogVisibleAdd.value = !dialogVisibleAdd.value;
|
|
|
ElMessage({
|
|
|
- message: "添加成功",
|
|
|
- type: "success"
|
|
|
+ message: "已关闭"
|
|
|
});
|
|
|
+ // ElMessageBox.confirm("确认关闭弹窗吗?")
|
|
|
+ // .then(() => {})
|
|
|
+ // .catch(() => {
|
|
|
+ // // catch error
|
|
|
+ // });
|
|
|
+};
|
|
|
+// 添加部门保存
|
|
|
+const saveDepartment = async () => {
|
|
|
+ const { code, msg } = await postAddAssessment(form);
|
|
|
+ if (code === 200) {
|
|
|
+ ElMessage({
|
|
|
+ message: "添加成功",
|
|
|
+ type: "success"
|
|
|
+ });
|
|
|
+ $emit("addHandClick");
|
|
|
+ dialogVisibleAdd.value = false;
|
|
|
+ } else {
|
|
|
+ ElMessage.error(msg);
|
|
|
+ }
|
|
|
};
|
|
|
const open = (item: any, index: string) => {
|
|
|
+ postListTreeWithUserApi();
|
|
|
if (item) {
|
|
|
- title.value = index;
|
|
|
+ titleHeader.value = index;
|
|
|
}
|
|
|
dialogVisibleAdd.value = true;
|
|
|
};
|
|
|
const addNew = () => {
|
|
|
- form.assessmentObjectList.right.push({ value: "" });
|
|
|
- form.assessmentObjectList.left.push({ value: "" });
|
|
|
+ form.assessmentObjectList.push({
|
|
|
+ assessmentObjectId: "",
|
|
|
+ assessmentObjectName: "",
|
|
|
+ assessmentModelId: "",
|
|
|
+ assessmentModelName: ""
|
|
|
+ });
|
|
|
+ // form.assessmentObjectList.left.push({ value: "" });
|
|
|
};
|
|
|
const deleteItem = (index: any) => {
|
|
|
- form.assessmentObjectList.left.splice(index, 1);
|
|
|
- form.assessmentObjectList.right.splice(index, 1);
|
|
|
+ form.assessmentObjectList.splice(index, 1);
|
|
|
+ // form.assessmentObjectList.right.splice(index, 1);
|
|
|
};
|
|
|
// 单选
|
|
|
const timeType = ref<any>("月度");
|
|
|
+const quarterValue = ref(true);
|
|
|
const format = ref<any>("YYYY-MM");
|
|
|
+const pickerType = ref<any>("month");
|
|
|
const handleRegionChange = (value: any) => {
|
|
|
console.log(value);
|
|
|
// form.date1 = "";
|
|
@@ -87,20 +107,119 @@ const handleRegionChange = (value: any) => {
|
|
|
switch (value) {
|
|
|
case "年度":
|
|
|
format.value = "YYYY";
|
|
|
+ pickerType.value = "year";
|
|
|
break;
|
|
|
case "月度":
|
|
|
format.value = "YYYY-MM";
|
|
|
+ pickerType.value = "month";
|
|
|
+
|
|
|
break;
|
|
|
case "日期":
|
|
|
format.value = "YYYY-MM-DD";
|
|
|
+ pickerType.value = "";
|
|
|
+
|
|
|
+ break;
|
|
|
+ case "季度":
|
|
|
+ quarterValue.value = true;
|
|
|
+
|
|
|
+ break;
|
|
|
+ case "半年":
|
|
|
+ quarterValue.value = false;
|
|
|
+
|
|
|
+ break;
|
|
|
}
|
|
|
- if (value === "季度" || value === "半年") {
|
|
|
- nextTick(() => {
|
|
|
- ElPickerRef.value.open(value);
|
|
|
- });
|
|
|
- // console.log(ElPickerRef.value.open(value));
|
|
|
+};
|
|
|
+const yearTime = ref<any>(dayjs(new Date()).format("YYYY"));
|
|
|
+const decreaseYear = () => {
|
|
|
+ yearTime.value = dayjs().year(yearTime.value).subtract(1, "year").year(); // 减一年
|
|
|
+};
|
|
|
+const increaseYear = () => {
|
|
|
+ yearTime.value = dayjs().year(yearTime.value).add(1, "year").year(); // 加一年
|
|
|
+};
|
|
|
+const monthOne = item => {
|
|
|
+ let start = "";
|
|
|
+ let end = "";
|
|
|
+
|
|
|
+ switch (item) {
|
|
|
+ case "一季度":
|
|
|
+ start = `${yearTime.value}-01-01`;
|
|
|
+ end = `${yearTime.value}-03-31`;
|
|
|
+ break;
|
|
|
+ case "二季度":
|
|
|
+ start = `${yearTime.value}-04-01`;
|
|
|
+ end = `${yearTime.value}-06-30`;
|
|
|
+ break;
|
|
|
+ case "三季度":
|
|
|
+ start = `${yearTime.value}-07-01`;
|
|
|
+ end = `${yearTime.value}-09-30`;
|
|
|
+ break;
|
|
|
+ case "四季度":
|
|
|
+ start = `${yearTime.value}-10-01`;
|
|
|
+ end = `${yearTime.value}-12-31`;
|
|
|
+ break;
|
|
|
+ case "上半年":
|
|
|
+ start = `${yearTime.value}-01-01`;
|
|
|
+ end = `${yearTime.value}-06-30`;
|
|
|
+ break;
|
|
|
+ case "下半年":
|
|
|
+ start = `${yearTime.value}-07-01`;
|
|
|
+ end = `${yearTime.value}-12-31`;
|
|
|
+ break;
|
|
|
}
|
|
|
+ form.cycleValue = `${yearTime.value}年${item}`;
|
|
|
+ console.log(start, end);
|
|
|
+ // return `从 ${start} 到 ${end}`; // 设置时间区间
|
|
|
+};
|
|
|
+// 部门人员与考核模板数据
|
|
|
+const treeDept = ref([]);
|
|
|
+const templateparams = reactive({
|
|
|
+ page: 1,
|
|
|
+ pageSize: 100
|
|
|
+});
|
|
|
+const resTmp = ref([]);
|
|
|
+const postListTreeWithUserApi = async () => {
|
|
|
+ const res = await postListTreeWithUser();
|
|
|
+ const { data, code } = await getTemplateInfoList(templateparams);
|
|
|
+ resTmp.value = data.records;
|
|
|
+ console.log(data);
|
|
|
+ treeDept.value = [];
|
|
|
+ treeDept.value = transformData(res.data);
|
|
|
+};
|
|
|
+
|
|
|
+function transformData(arr) {
|
|
|
+ return arr.map(item => {
|
|
|
+ const {
|
|
|
+ deptName: userName,
|
|
|
+ deptCode: userCode,
|
|
|
+ childrenRes,
|
|
|
+ ...rest
|
|
|
+ } = item;
|
|
|
+
|
|
|
+ return {
|
|
|
+ userName,
|
|
|
+ userCode,
|
|
|
+ childrenRes: childrenRes ? transformData(childrenRes) : [],
|
|
|
+ ...rest
|
|
|
+ };
|
|
|
+ });
|
|
|
+}
|
|
|
+const handleRreeSelect = (item, index) => {
|
|
|
+ // form.assessmentObjectList.forEach((itemObj, indexObj) => {
|
|
|
+ // console.log(itemObj, indexObj);
|
|
|
+ // // if (indexObj === index) {
|
|
|
+ // // itemObj.assessmentObjectName = item.assessmentObjectName;
|
|
|
+ // // }
|
|
|
+ // });
|
|
|
};
|
|
|
+const handleSelect = (item, index) => {
|
|
|
+ // form.assessmentObjectList.forEach((itemObj, indexObj) => {
|
|
|
+ // console.log(itemObj, indexObj);
|
|
|
+ // if (indexObj === index) {
|
|
|
+ // itemObj.assessmentModelName = item.assessmentModelName;
|
|
|
+ // }
|
|
|
+ // });
|
|
|
+};
|
|
|
+
|
|
|
const monthTime = ref("");
|
|
|
defineExpose({
|
|
|
open
|
|
@@ -109,12 +228,7 @@ defineExpose({
|
|
|
|
|
|
<template>
|
|
|
<div>
|
|
|
- <el-dialog
|
|
|
- v-model="dialogVisibleAdd"
|
|
|
- :title="title"
|
|
|
- width="500"
|
|
|
- :before-close="handleClose"
|
|
|
- >
|
|
|
+ <el-dialog v-model="dialogVisibleAdd" :title="titleHeader" width="500">
|
|
|
<el-form
|
|
|
:model="form"
|
|
|
label-width="auto"
|
|
@@ -134,30 +248,76 @@ defineExpose({
|
|
|
<el-radio value="日期" size="large">日期</el-radio>
|
|
|
</el-radio-group>
|
|
|
<el-date-picker
|
|
|
- v-if="timeType === '日期'"
|
|
|
+ v-if="
|
|
|
+ timeType === '月度' || timeType === '日期' || timeType === '年度'
|
|
|
+ "
|
|
|
v-model="form.cycleValue"
|
|
|
- type="daterange"
|
|
|
- range-separator="至"
|
|
|
- start-placeholder="开始时间"
|
|
|
- end-placeholder="结束时间"
|
|
|
- />
|
|
|
- <ElPicker
|
|
|
- v-else-if="timeType === '季度' || timeType === '半年'"
|
|
|
- ref="ElPickerRef"
|
|
|
- v-model="monthTime"
|
|
|
- />
|
|
|
- <el-date-picker
|
|
|
- v-else
|
|
|
- v-model="form.cycleValue"
|
|
|
- type="year"
|
|
|
- placeholder="请选择日期"
|
|
|
+ :type="pickerType"
|
|
|
:format="format"
|
|
|
+ placeholder="请选择"
|
|
|
/>
|
|
|
+ <el-dropdown
|
|
|
+ v-else-if="timeType === '季度' || timeType === '半年'"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <span class="el-dropdown-link navbar-bg-hover select-none">
|
|
|
+ <el-input
|
|
|
+ v-model="form.cycleValue"
|
|
|
+ style="width: 240px"
|
|
|
+ placeholder="请选择"
|
|
|
+ :prefix-icon="Calendar"
|
|
|
+ />
|
|
|
+ </span>
|
|
|
+ <template #dropdown>
|
|
|
+ <el-dropdown-menu class="setting" style="width: 300px">
|
|
|
+ <div class="flex justify-between align-center text-base mt-4">
|
|
|
+ <div
|
|
|
+ class="cursor-pointer ml-4 text-xs pt-2"
|
|
|
+ @click="decreaseYear"
|
|
|
+ >
|
|
|
+ <el-icon><DArrowLeft /></el-icon>
|
|
|
+ </div>
|
|
|
+ <div>{{ yearTime }}</div>
|
|
|
+ <div
|
|
|
+ class="cursor-pointer mr-4 text-xs pt-2"
|
|
|
+ @click="increaseYear"
|
|
|
+ >
|
|
|
+ <el-icon><DArrowRight /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div
|
|
|
+ v-if="quarterValue"
|
|
|
+ class="flex justify-center align-center mt-5 mb-5"
|
|
|
+ >
|
|
|
+ <el-dropdown-item @click="monthOne('一季度')">
|
|
|
+ 一季度
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="monthOne('二季度')">
|
|
|
+ 二季度
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="monthOne('三季度')">
|
|
|
+ 三季度
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="monthOne('四季度')">
|
|
|
+ 四季度
|
|
|
+ </el-dropdown-item>
|
|
|
+ </div>
|
|
|
+ <div v-else class="flex justify-around align-center mt-5 mb-5">
|
|
|
+ <el-dropdown-item @click="monthOne('上半年')">
|
|
|
+ 上半年
|
|
|
+ </el-dropdown-item>
|
|
|
+ <el-dropdown-item @click="monthOne('下半年')">
|
|
|
+ 下半年
|
|
|
+ </el-dropdown-item>
|
|
|
+ </div>
|
|
|
+ </el-dropdown-menu>
|
|
|
+ </template>
|
|
|
+ </el-dropdown>
|
|
|
</el-form-item>
|
|
|
<el-form-item label="被考核类型">
|
|
|
<el-select
|
|
|
v-model="form.assessmentType"
|
|
|
- placeholder="please select your zone"
|
|
|
+ placeholder="请选择被考核类型"
|
|
|
>
|
|
|
<el-option label="员工" :value="0" />
|
|
|
<el-option label="部门" :value="1" />
|
|
@@ -179,18 +339,23 @@ defineExpose({
|
|
|
>
|
|
|
<el-form-item label="被考核对象" prop="left">
|
|
|
<div
|
|
|
- v-for="(item, index) in form.assessmentObjectList.left"
|
|
|
+ v-for="(item, index) in form.assessmentObjectList"
|
|
|
:key="index"
|
|
|
class="w-full mt-1"
|
|
|
>
|
|
|
- <el-select
|
|
|
- v-model="item.value"
|
|
|
- placeholder="please select your zone"
|
|
|
+ <el-tree-select
|
|
|
+ v-model="item.assessmentObjectId"
|
|
|
+ :data="treeDept"
|
|
|
+ :render-after-expand="false"
|
|
|
+ show-checkbox
|
|
|
+ :props="{
|
|
|
+ label: 'userName',
|
|
|
+ value: 'userCode',
|
|
|
+ children: 'childrenRes'
|
|
|
+ }"
|
|
|
style="width: 180px"
|
|
|
- >
|
|
|
- <el-option label="Zone one" value="shanghai" />
|
|
|
- <el-option label="Zone two" value="beijing" />
|
|
|
- </el-select>
|
|
|
+ @change="handleRreeSelect(item, index)"
|
|
|
+ />
|
|
|
</div>
|
|
|
</el-form-item>
|
|
|
</el-form>
|
|
@@ -203,17 +368,23 @@ defineExpose({
|
|
|
>
|
|
|
<el-form-item label="考核模板" prop="right">
|
|
|
<div
|
|
|
- v-for="(item, index) in form.assessmentObjectList.right"
|
|
|
+ v-for="(item, index) in form.assessmentObjectList"
|
|
|
:key="index"
|
|
|
class="w-full flex mt-1"
|
|
|
>
|
|
|
<el-select
|
|
|
- v-model="item.value"
|
|
|
- placeholder="please select your zone"
|
|
|
+ v-model="item.assessmentModelId"
|
|
|
+ placeholder="请选择"
|
|
|
+ filterable
|
|
|
style="width: 180px"
|
|
|
+ @change="handleSelect(item, index)"
|
|
|
>
|
|
|
- <el-option label="Zone one" value="shanghai" />
|
|
|
- <el-option label="Zone two" value="beijing" />
|
|
|
+ <el-option
|
|
|
+ v-for="itemTmp in resTmp"
|
|
|
+ :key="itemTmp.id"
|
|
|
+ :label="itemTmp.tpName"
|
|
|
+ :value="itemTmp.id"
|
|
|
+ />
|
|
|
</el-select>
|
|
|
<div
|
|
|
v-if="index !== 0"
|