绩效考核调试基本完成

剩余任务编辑，指标配置
人员绩效表

src/components/CustomTable.vue

@@ -9,6 +9,7 @@
       :border="border"
       :highlight-current-row="highligt"
       @row-click="rowClick"
+      @sort-change="sortChange"
       :row-key="rowKey"
       :height="tableHeight"
     >
@@ -184,6 +185,9 @@ export default {
     toggleRowSelection(row, selected) {
       this.$refs.elTableRef?.toggleRowSelection(row, selected);
     },
+    sortChange(data) {
+      this.$emit("sortChange", data);
+    },
   },
   updated() {
     if (this.$refs.elTableRef && this.$refs.elTableRef.doLayout) {

src/components/SelectUser.vue

@@ -86,11 +86,10 @@ export default {
       type: Boolean,
       default: false,
     },
-    highligt:{
+    highligt: {
       type: Boolean,
       default: true,
-    }
+    },
-    
   },
   data() {
     return {
@@ -148,7 +147,6 @@ export default {
       this.handleClose();
     },
     handleSelectionChange(val) {
-
       if (this.isInternalChange) return;
       if (!this.multiSelect) {
         this.isInternalChange = true;
@@ -184,13 +182,11 @@ export default {
       this.selectedUsers = [val];
     },
     rowClick(row) {
-
+      if (!this.showSelection) {
-      if(!this.showSelection){
         if (row.userId == this.selectedUsers[0]?.userId)
-        this.$refs.customTableRef.$refs.elTableRef.setCurrentRow();
+          this.$refs.customTableRef.$refs.elTableRef.setCurrentRow();
-      else this.selectedUsers = [row]
+        else this.selectedUsers = [row];
       }
-   ;
     },
   },
   watch: {
@@ -219,13 +215,27 @@ export default {
     currentSelectedUser: {
       handler(newVal) {
         this.$nextTick(() => {
-          let row = this.userData.find(
+          if (!this.showSelection) {
-            (ele) => ele.userId == newVal[0]?.userId
+            let row = this.userData.find(
-          );
+              (ele) => ele.userId == newVal[0]?.userId
-          if (row) {
+            );
-            this.$refs.customTableRef?.setCurrentRow(row);
+            if (row) {
-            this.selectedUsers = [row];
+              this.$refs.customTableRef?.setCurrentRow(row);
-          } else this.$refs.customTableRef?.setCurrentRow();
+              this.selectedUsers = [row];
+            } else {
+              this.selectedUsers = [];
+              this.$refs.customTableRef?.setCurrentRow();
+            }
+          } else {
+            if (!newVal.length) {
+              this.selectedUsers = [];
+              this.$refs.customTableRef?.clearSelection();
+            } else {
+              newVal.forEach((ele) => {
+                this.$refs.customTableRef?.toggleRowSelection(ele, true);
+              });
+            }
+          }
         });
       },
       immediate: true,
@@ -234,12 +244,14 @@ export default {
     userData: {
       handler(newVal) {
         this.$nextTick(() => {
-          let row = this.userData.find(
+          if (!this.showSelection) {
-            (ele) => ele.userId == this.currentSelectedUser[0]?.userId
+            let row = this.userData.find(
-          );
+              (ele) => ele.userId == this.currentSelectedUser[0]?.userId
-          if (row) {
+            );
-            this.selectedUsers = [row];
+            if (row) {
-            this.$refs.customTableRef?.setCurrentRow(row);
+              this.selectedUsers = [row];
+              this.$refs.customTableRef?.setCurrentRow(row);
+            }
           }
         });
       },

src/utils/api.js

@@ -134,3 +134,54 @@ export const systemApi = {
         method: 'get',
     }),
 }
+
+// 任务考核板块
+export const taskApi = {
+    getTaskUserList: (data) => request({
+        url: '/examine/user',
+        method: 'get',
+        params: data,
+    }),
+    getTaskScoreDetail: (data) => request({
+        url: '/examine/detail',
+        method: 'get',
+        params: data,
+    }),
+    saveTaskUserScore: (data) => request({
+        url: '/examine/detail/batch',
+        method: 'post',
+        data: data,
+    }),
+    getTaskListSelf: (data) => request({
+        url: '/task/list',
+        method: 'get',
+        params: data,
+    }),
+
+    getTaskList: (data) => request({
+        url: '/task/get',
+        method: 'get',
+        params: data,
+    }),
+    addTask: (data) => request({
+        url: '/task/add',
+        method: 'post',
+        data: data,
+    }),
+    upDateTask: (data) => request({
+        url: '/task/update',
+        method: 'put',
+        data: data,
+    }),
+    delTask: (id) => request({
+        url: `/task/${id}`,
+        method: 'delete',
+    }),
+    getTaskSet: (id) => request({
+        url: `/task/target/${id}`,
+        method: 'get',
+    }),
+
+
+
+}

src/views/project/list.vue

@@ -20,7 +20,11 @@
           ></el-input>
         </el-form-item>
         <el-form-item label="项目状态" class="form-item">
-          <el-select v-model="searchForm.projectState" placeholder="项目状态" clearable>
+          <el-select
+            v-model="searchForm.projectState"
+            placeholder="项目状态"
+            clearable
+          >
             <el-option
               v-for="item in statusList"
               :key="item.dictValue"
@@ -161,7 +165,7 @@ export default {
             return `<span style="color: ${color}">${status}</span>`;
           },
         },
-        { prop: "teamNum", label: "参与项目人数",width:100 },
+        { prop: "teamNum", label: "参与项目人数", width: 100 },
         { prop: "createByName", label: "项目创建人" },
         {
           prop: "operation",
@@ -188,6 +192,7 @@ export default {
       Object.keys(this.searchForm).forEach((key) => {
         this.searchForm[key] = "";
       });
+      this.currentSelectedUser = [];
       this.fetchProjectList();
     },
     addProject() {

src/views/workAppraisal/detail.vue

@@ -2,93 +2,110 @@
   <div class="conetentBox">
     <div class="flex-row jcsb aic userBox">
       <div>张三 2024年员工年度考核</div>
-      <div>考核评分：</div>
+      <div v-if="!isNormal">考核评分：{{ saveData.manageScore }}</div>
     </div>
-    <div
+    <div class="tableBox">
-      v-for="(table, index) in tableData"
+      <div
-      :key="index"
+        v-for="(table, index) in tableData"
-      style="margin-bottom: 20px"
+        :key="index"
-    >
+        style="margin-bottom: 20px"
-      <div class="userBox">表格 {{ index + 1 }}</div>
+      >
-      <el-table :data="table" style="width: 100%">
+        <div class="userBox">{{ table[0].reviewCategory }}</div>
-        <el-table-column
+        <el-table :data="table" style="width: 100%">
-          v-for="(header, hIndex) in headers"
+          <el-table-column
-          :key="hIndex"
+            v-for="(header, hIndex) in headers"
-          :label="header.label"
+            :key="hIndex"
-          :prop="header.prop"
+            :label="header.label"
-          :width="header.width"
+            :prop="header.prop"
-        >
+            :width="header.width"
-        </el-table-column>
-        <el-table-column label="评分" prop="score" width="300">
-          <template slot-scope="scope">
-            <div style="width: 80%; position: relative">
-              <div>
-                <el-slider
-                  v-model="scope.row.score"
-                  :min="0"
-                  :max="10"
-                  @change="updateScore(scope.row)"
-                ></el-slider>
-              </div>
-              <div class="statusText">未打分</div>
-
-              <div class="flex-row jcsb" style="margin-left: 10px">
-                <div>0</div>
-                <div class="scoreText">{{ scope.row.score }}分</div>
-                <div>10</div>
-              </div>
-            </div>
-          </template>
-        </el-table-column>
-        <el-table-column
-          label="自评总结"
-          prop="score"
-          width="300"
-          v-if="isNormal"
-        >
-          <template slot-scope="scope">
-            <div>
-              <el-button
-                @click="handleEdit(scope.row)"
-                type="text"
-                size="mini"
-                icon="el-icon-edit"
-                :class="{ hasEdit: !scope.row.remark }"
-                >{{ scope.row.remark ? "已填写" : "未填写" }}</el-button
-              >
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
-    </div>
-    <div>
-      <div v-if="!isNormal">
-        <div class="userBox">总体评价</div>
-        <div>
-          <el-input
-            type="textarea"
-            :autosize="{ minRows: 4 }"
-            placeholder="0/300"
-            v-model="managerText"
           >
-          </el-input>
+          </el-table-column>
+          <el-table-column label="评分" prop="score" width="300">
+            <template slot-scope="scope">
+              <div style="width: 80%; position: relative">
+                <div>
+                  <el-slider
+                    v-model="scope.row.score"
+                    :min="0"
+                    :max="10"
+                    @change="updateScore(scope.row)"
+                    :disabled="!isEdit"
+                  ></el-slider>
+                </div>
+                <div class="statusText" v-show="scope.row.score == 0">
+                  未打分
+                </div>
+
+                <div class="flex-row jcsb" style="margin-left: 10px">
+                  <div>0</div>
+                  <div class="scoreText">{{ scope.row.score }}分</div>
+                  <div>10</div>
+                </div>
+              </div>
+            </template>
+          </el-table-column>
+          <el-table-column
+            label="自评总结"
+            prop="score"
+            width="300"
+            v-if="isNormal"
+          >
+            <template slot-scope="scope">
+              <div>
+                <el-button
+                  v-if="isEdit"
+                  @click="handleEdit(scope.row)"
+                  type="text"
+                  size="mini"
+                  icon="el-icon-edit"
+                  :class="{ hasEdit: !scope.row.remark }"
+                  >{{ scope.row.remark ? "已填写" : "未填写" }}</el-button
+                >
+                <el-button
+                  v-if="!isEdit && scope.row.remark"
+                  @click="handleEdit(scope.row)"
+                  type="text"
+                  size="mini"
+                  icon="el-icon-view"
+                  :class="{ hasEdit: !scope.row.remark }"
+                  >查看</el-button
+                >
+                <el-button
+                  v-if="!isEdit && !scope.row.remark"
+                  type="text"
+                  size="mini"
+                  :class="{ hasEdit: !scope.row.remark }"
+                  >未填写</el-button
+                >
+              </div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div>
+        <div v-if="!isNormal">
+          <div class="userBox">总体评价</div>
+          <div>
+            <el-input
+              type="textarea"
+              :autosize="{ minRows: 4 }"
+              placeholder="0/300"
+              v-model="saveData.judgeContent"
+              :disabled="!isEdit"
+            >
+            </el-input>
+          </div>
         </div>
       </div>
-      <p class="flex-row jcc" style="gap: 40px">
-        <el-button
-          type="default"
-          style="width: 150px"
-          @click="saveScoreCheck(0)"
-          >保存</el-button
-        >
-        <el-button
-          type="primary"
-          style="width: 150px"
-          @click="saveScoreCheck(1)"
-          >提交</el-button
-        >
-      </p>
     </div>
+    <p class="flex-row jcc" style="gap: 40px" v-if="isEdit">
+      <el-button type="default" style="width: 150px" @click="saveScoreCheck(0)"
+        >保存</el-button
+      >
+      <el-button type="primary" style="width: 150px" @click="saveScoreCheck(1)"
+        >提交</el-button
+      >
+    </p>
     <el-dialog title="自评总结" :visible.sync="dialogVisible" width="30%">
       <div>
         <el-input
@@ -96,76 +113,93 @@
           :autosize="{ minRows: 4 }"
           placeholder="0/200"
           v-model="remark"
+          :disabled="!isEdit"
         >
         </el-input>
       </div>
 
-      <span slot="footer" class="dialog-footer">
+      <span slot="footer" class="dialog-footer" v-if="isEdit">
         <el-button @click="cancelEdit">取 消</el-button>
         <el-button type="primary" @click="saveEdit">确 定</el-button>
       </span>
     </el-dialog>
-    <el-dialog
-      title="确认提交绩效评分"
-      :visible.sync="dialogVisible2"
-      width="25%"
-      center
-    >
-      <div>提交后将无法修改，该操作不可逆，请确认后再试</div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible2 = false">取 消</el-button>
-        <el-button type="primary" @click="saveScore">确 定</el-button>
-      </span>
-    </el-dialog>
-    <el-dialog
-      title="提交失败"
-      :visible.sync="dialogVisible3"
-      width="25%"
-      center
-    >
-      <div>存在未评分绩效项，请完善后再试</div>
-      <span slot="footer" class="dialog-footer">
-        <el-button @click="dialogVisible3 = false">关闭</el-button>
-      </span>
-    </el-dialog>
   </div>
 </template>
 
 <script>
+import { taskApi } from "@/utils/api";
+
 export default {
   data() {
     return {
       taskId: "",
       isNormal: false,
       dialogVisible: false,
-      dialogVisible2: false,
-      dialogVisible3: false,
       selectRow: false,
       saveStatus: "",
       remark: "",
+      isEdit: "",
       headers: [
-        { label: "考核项", prop: "name", width: 300 },
+        { label: "考核项", prop: "reviewItem", width: 300 },
-        { label: "评分标准", prop: "description" },
+        { label: "评分标准", prop: "remarks" },
       ],
       // 二维数组，每个子数组代表一个表格的数据
       tableData: [
-        [
-          { name: "项目1", description: "描述1", score: 0, remark: "ss" },
-          { name: "项目2", description: "描述2", score: 0, remark: "" },
-        ],
-        [
-          { name: "项目3", description: "描述3", score: 0, remark: "" },
-          { name: "项目4", description: "描述4", score: 0, remark: "ss" },
-        ],
         // 可以根据需要添加更多表格数据
       ],
-      managerText: "",
+      // 获取评分的参数
+      examineTaskId: "",
+      examineId: "",
+      reviewType: "",
+      userId: "",
+      reviewType: "",
+      // 保存评分的参数
+      saveData: {
+        examineId: "",
+        examineStatus: "",
+        examineStatusSelf: "",
+        manageScore: "",
+        taskId: "",
+        judgeContent: "",
+        examineDetailList: [],
+      },
     };
   },
   methods: {
     updateScore(row) {
-      // 这里可以添加更新评分后的逻辑
+      // 实时计算组长评分数
-      console.log(`项目: ${row.name}, 评分: ${row.score}`);
+      if (!this.isNormal)
+        this.saveData.manageScore =
+          this.tableData
+            .flat()
+            .reduce((total, ele) => (ele.score || 0) * ele.weight + total, 0) /
+          10;
+    },
+    // 获取评分详情
+    getSocreDetail() {
+      let param = {
+        examineTaskId: this.examineTaskId,
+        reviewType: this.reviewType,
+      };
+      if (this.isNormal) {
+        param.userId = this.userId;
+      } else {
+        param.examineId = this.examineId;
+      }
+      taskApi.getTaskScoreDetail(param).then((res) => {
+        let objData = {};
+        res.data.examineConfigDetailVoList.forEach((ele) => {
+          if (!objData[ele.reviewCategory]) objData[ele.reviewCategory] = [];
+          objData[ele.reviewCategory].push(ele);
+        });
+        this.tableData = Object.values(objData);
+        if (!this.examineId) {
+          this.examineId = res.data.examineUser.examineId;
+        } else {
+          this.saveData.judgeContent = res.data.examineUser.judgeContent;
+          this.saveData.manageScore = res.data.examineUser.manageScore;
+        }
+      });
     },
     handleEdit(row) {
       this.dialogVisible = true;
@@ -186,25 +220,99 @@ export default {
     cancelEdit() {
       this.dialogVisible = false;
     },
-    saveScoreCheck(status) {
+    saveDataSet(status) {
-      this.dialogVisible2 = true;
+      if (!this.isNormal) {
-      this.saveStatus = status;
+        this.saveData.examineStatus = status;
+      } else {
+        this.saveData.examineStatusSelf = status;
+      }
+      this.saveData.examineDetailList = this.tableData.flat().map((ele) => ({
+        score: ele.score,
+        configId: ele.id,
+        remark: ele.remark,
+      }));
+      this.saveData.taskId = this.examineTaskId;
+      this.saveData.examineId = this.examineId;
     },
-    saveScore() {
+    saveScoreCheck(status) {
-      this.dialogVisible2 = false;
+      // 组装保存数据
-      if (this.managerText.length > 300) {
+      this.saveDataSet(status);
+
+      // 保存
+      if (status == 0) {
+        this.saveScore();
+        return;
+      }
+      // 提交
+      if (
+        this.saveData.examineDetailList.filter((ele) => !ele.score).length &&
+        !this.isNormal
+      ) {
+        this.$alert("存在未评分绩效项，请完善后再试", "提交失败", {
+          confirmButtonText: "确定",
+          type: "warning",
+        });
+      } else if (
+        this.saveData.examineDetailList.filter((ele) => !ele.remark).length &&
+        this.isNormal &&
+        status
+      ) {
+        this.$alert("自评总结为必填，请完善后再试", "提交失败", {
+          confirmButtonText: "确定",
+          type: "warning",
+        });
+      } else if (this.saveData.judgeContent.length > 300) {
         this.$message({
           message: "总体评价限制300个字符",
           type: "warning",
         });
+      } else if (!this.saveData.judgeContent.length && !this.isNormal) {
+        this.$message({
+          message: "总体评价为必填",
+          type: "warning",
+        });
+      } else {
+        if (status) {
+          this.$confirm(
+            "提交后将无法修改，该操作不可逆，请确认后再试",
+            "确认提交绩效评分",
+            {
+              confirmButtonText: "确定",
+              cancelButtonText: "取消",
+              type: "warning",
+            }
+          ).then(() => {
+            this.saveScore();
+          });
+        } else {
+          this.saveScore();
+        }
       }
-      if(this.tableData.filter((ele)=>!ele.remark).length){
+    },
-        this.dialogVisible3=true
+    saveScore() {
-      }
+      taskApi.saveTaskUserScore(this.saveData).then((res) => {
+        this.$message({
+          message: "操作成功",
+          type: "success",
+        });
+        this.$router.go(-1);
+      });
+    },
+    getRouteData() {
+      this.isNormal = this.$route.query.isNormal || "";
+      this.examineTaskId = this.$route.query.examineTaskId;
+      this.examineId = this.$route.query.examineId;
+      this.reviewType = this.$route.query.reviewType;
+      this.saveData.reviewType = this.$route.query.reviewType;
+      this.isEdit = this.$route.query.edit == 1 ? true : false;
+      this.userId = this.$store.state.user.id;
     },
   },
   created() {
-    this.isNormal = this.$route.query.isNormal || "";
+    this.getRouteData();
+  },
+  mounted() {
+    this.getSocreDetail();
   },
 };
 </script>
@@ -230,6 +338,9 @@ export default {
   margin: 10px !important;
   /* width: 95%; */
 }
+::v-deep .el-slider__runway.disabled .el-slider__bar {
+  background-color: #ff5722;
+}
 ::v-deep .el-slider__bar {
   height: 20px;
   border-radius: 20px;
@@ -260,4 +371,8 @@ export default {
 ::v-deep .el-dialog {
   margin-top: 15% !important;
 }
+.tableBox {
+  height: 85%;
+  overflow: auto;
+}
 </style>

src/views/workAppraisal/manager.vue

@@ -1,150 +1,167 @@
 <template>
   <div class="appraisal-manager">
-    <el-row class="assessment-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
-    <div class="statusText">进行中</div>
+      <el-tab-pane label="进行中" name="进行中">
-      <el-col :span="8"  v-for="item in ongoingAssessments" :key="item.id">
+        <div class="assessment-container flex-row">
-        <el-card class="card">
+          <div v-for="item in taskList['0']" :key="item.id" class="taskBox">
-          <div class="card-content">
+            <div class="card-content">
-            <div class="flex-row jcsb">
+              <div class="cardBox flex-col">
-              <div>{{ item.title }}</div>
+                <img
-            <div>考核人数：{{ item.participants }}</div>
+                  src="@/assets/task/titleIcon.png"
-          </div>
+                  alt=""
-          <p>截止时间：{{ item.deadline }}</p>
+                  style="width: 32px; height: 34px"
-            <div class="status-actions">
+                />
-              <el-tag>进行中</el-tag>
+                <div class="flex-row aic nameBox">
-              <div class="action-buttons">
+                  <div>{{ item.taskName }}</div>
-                <el-button type="primary" @click="viewDetails(item.id,1)">考核评分</el-button>
+                  <el-tag type="warning" size="mini">进行中</el-tag>
+                </div>
+                <div class="timeBox">
+                  截止时间：{{ item.endTime.split(" ")[0] }}
+                </div>
+              </div>
+              <div class="status-actions aic">
+                <div class="peopleNumber">
+                  考核人数：{{ item.peopleNumber }}
+                </div>
+                <div
+                  class="action-buttons aic"
+                  @click="viewDetails(item.id, 0)"
+                >
+                  考核评分
+                  <img
+                    src="@/assets/task/right.png"
+                    alt=""
+                    style="width: 16px; height: 16px"
+                  />
+                </div>
               </div>
             </div>
-          </div>
+          </div></div
-        </el-card>
+      ></el-tab-pane>
-      </el-col>
+      <el-tab-pane label="已过期" name="已过期">
-    </el-row>
+        <div class="assessment-container flex-row">
-    <el-row class="assessment-container">
+          <div v-for="item in taskList['2']" :key="item.id" class="taskBox">
-      <div class="statusText">已过期</div>
+            <div class="card-content">
-      <el-col :span="8"  v-for="item in expiredAssessments" :key="item.id">
+              <div class="cardBox flex-col">
-        <el-card class="card">
+                <img
-          <div class="card-content">
+                  src="@/assets/task/titleIcon.png"
-            <div class="flex-row jcsb">
+                  alt=""
-              <div>{{ item.title }}</div>
+                  style="width: 32px; height: 34px"
-            <div>考核人数：{{ item.participants }}</div>
+                />
-          </div>
+                <div class="flex-row aic nameBox">
-          <p>截止时间：{{ item.deadline }}</p>
+                  <div>{{ item.taskName }}</div>
-            <div class="status-actions">
+                  <el-tag type="info" size="mini">进行中</el-tag>
-              <el-tag type="info">已过期</el-tag>
+                </div>
-              <div class="action-buttons">
+                <div class="timeBox">
-                <el-button type="primary" @click="viewDetails(item.id,0)">查看详情</el-button>
+                  截止时间：{{ item.endTime.split(" ")[0] }}
+                </div>
+              </div>
+              <div class="status-actions aic">
+                <div class="peopleNumber">
+                  考核人数：{{ item.peopleNumber }}
+                </div>
+                <div
+                  class="action-buttons aic"
+                  @click="viewDetails(item.id, 0)"
+                >
+                  考核评分
+                  <img
+                    src="@/assets/task/right.png"
+                    alt=""
+                    style="width: 16px; height: 16px"
+                  />
+                </div>
               </div>
             </div>
-          </div>
+          </div></div
-        </el-card>
+      ></el-tab-pane>
-      </el-col>
+    </el-tabs>
-    </el-row>
-
   </div>
 </template>
 
 <script>
+import { taskApi } from "@/utils/api";
+
 export default {
   name: "AppraisalManager",
   data() {
     return {
-      ongoingAssessments: [
+      activeName: "进行中",
-        {
+      taskList: [],
-          id: 1,
-          title: '2024年员工年度考核',
-          deadline: '2024.12.31',
-          participants: 10,
-        },{
-          id: 1,
-          title: '2024年员工年度考核',
-          deadline: '2024.12.31',
-          participants: 10,
-        },{
-          id: 1,
-          title: '2024年员工年度考核',
-          deadline: '2024.12.31',
-          participants: 10,
-        },{
-          id: 1,
-          title: '2024年员工年度考核',
-          deadline: '2024.12.31',
-          participants: 10,
-        },{
-          id: 1,
-          title: '2024年员工年度考核',
-          deadline: '2024.12.31',
-          participants: 10,
-        },
-      ],
-      expiredAssessments: [
-        {
-          id: 2,
-          title: '2023年员工年度考核',
-          deadline: '2023.12.31',
-          participants: 10,
-        },
-        {
-          id: 3,
-          title: '2024年Q3员工年度考核',
-          deadline: '2024.10.15',
-          participants: 10,
-        },
-        {
-          id: 4,
-          title: '2024年Q2员工年度考核',
-          deadline: '2024.10.15',
-          participants: 10,
-        },
-      ],
     };
   },
   methods: {
-    goToAssessment(id) {
+    getTaks() {
-      // 跳转到考核页面
+      taskApi.getTaskListSelf().then((res) => {
-      console.log(`跳转到考核 ID: ${id}`);
+        this.taskList = res.data;
+      });
     },
-
+    viewDetails(id, isOutData) {
-    viewDetails(id,edit) {
       // 查看考核详情
       this.$router.push({
-          path: "/workAppraisal/managerUser",
+        path: "/workAppraisal/managerUser",
-          query: { id: id,edit },
+        query: { taskId: id, isOutData },
-        });
+      });
     },
   },
+  created() {
+    this.getTaks();
+  },
 };
 </script>
 
 <style scoped>
 .appraisal-manager {
   padding: 30px;
-  background-color: #f8f8f8;
+  background-color: #fff;
-  height: 100vh; /* 设置整体高度 */
+  height: calc(100vh - 100px); /* 设置整体高度 */
 }
 
 .assessment-container {
-  max-height:45%; /* 减去标题高度 */
+  max-height: 650px; /* 减去标题高度 */
   overflow-y: auto; /* 允许垂直滚动 */
+  gap: 2%;
+  padding-top: 20px;
+  padding-left: 20px;
+  flex-wrap: wrap;
+}
+.taskBox {
+  width: 23%;
+  height: 200px;
+  margin-bottom: 40px;
 }
 
 .card {
   margin-bottom: 20px;
-  border-radius: 10px;
+  border-radius: 8px;
   width: 80%;
 }
 
 .card-content {
-  padding:0 10px;
+  padding: 20px 0 0 0;
   background-color: #fff;
   border-radius: 10px;
-  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
+}
+.cardBox {
+  gap: 20px;
+
+  padding: 0 20px;
 }
 
 .status-actions {
   display: flex;
   justify-content: space-between; /* 两端对齐 */
   align-items: center; /* 垂直居中 */
+  height: 44px;
+  background-color: #f7faff;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+.peopleNumber {
+  color: #666;
+  font-size: 14px;
+  font-weight: bold;
 }
 
 .status-text {
@@ -154,10 +171,41 @@ export default {
 .action-buttons {
   display: flex;
   gap: 10px; /* 按钮之间的间距 */
+  color: #4096ff;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
 }
-.statusText{
+.statusText {
   font-size: 26px;
   margin: 20px 0;
   font-weight: bold;
 }
-</style>
+.timeBox {
+  font-size: 14px;
+  color: #999999;
+  font-weight: bold;
+}
+::v-deep .el-tabs__item.is-active {
+  color: #4096ff;
+}
+::v-deep .el-tabs__item {
+  font-size: 18px;
+  font-weight: bold;
+  color: #999999;
+}
+::v-deep .el-tabs__active-bar {
+  height: 3px;
+  width: 32px !important;
+  left: 10px;
+}
+.nameBox {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  gap: 10px;
+}
+::v-deep .el-tag--warning {
+  color: #ea741e;
+}
+</style>

src/views/workAppraisal/managerUser.vue

@@ -1,288 +1,311 @@
 <template>
-    <div class="project-list">
+  <div class="project-list">
-      <div class="search-bar">
+    <div class="search-bar">
-        <el-form
+      <el-form
-          :inline="true"
+        :inline="true"
-          :model="searchForm"
+        :model="searchForm"
-          class="demo-form-inline"
+        class="demo-form-inline"
-          size="small"
+        size="small"
-        >
+      >
-          <el-form-item label="考核人员" class="form-item">
+        <el-form-item label="考核人员" class="form-item">
-            <el-input
+          <el-input
-              v-model="searchForm.projectLeaderName"
+            v-model="searchForm.userName"
-              placeholder="考核人员"
+            placeholder="考核人员"
-              readonly
+            readonly
-              @click.native="openUserSelectDialog"
+            @click.native="openUserSelectDialog"
-              ><el-button slot="append" icon="el-icon-s-custom"></el-button
+            ><el-button slot="append" icon="el-icon-s-custom"></el-button
-            ></el-input>
+          ></el-input>
-          </el-form-item>
+        </el-form-item>
-          <el-form-item label="状态" class="form-item">
+        <el-form-item label="状态" class="form-item">
-            <el-select v-model="searchForm.projectState" placeholder="状态" clearable>
+          <el-select
-              <el-option
+            v-model="searchForm.examineStatus"
-                v-for="item in statusList"
+            placeholder="状态"
-                :key="item.value"
+            clearable
-                :label="item.label"
+          >
-                :value="item.value"
+            <el-option
-              />
+              v-for="item in statusList"
-            </el-select>
+              :key="item.value"
-          </el-form-item>
+              :label="item.label"
-          <el-form-item class="search-buttons">
+              :value="item.value"
-            <el-button type="primary" @click="onSearch">查询</el-button>
+            />
-            <el-button @click="onReset">重置</el-button>
+          </el-select>
-          </el-form-item>
+        </el-form-item>
-        </el-form>
+        <el-form-item class="search-buttons">
-      </div>
+          <el-button type="primary" @click="onSearch">查询</el-button>
-  
+          <el-button @click="onReset">重置</el-button>
-      <div class="f1 df">
+        </el-form-item>
-        <CustomTable
+      </el-form>
-          :columns="columns"
-          :tableData="tableData"
-          :total="total"
-          :show-selection="false"
-          :show-index="true"
-          @size-change="handleSizeChange"
-          @current-change="handleCurrentChange"
-          tableHeight="495px"
-        >
-          <template slot="operation" slot-scope="{ row }">
-            <div class="operation-buttons">
-              <el-button
-                @click="handleEdit(row,1)"
-                type="text"
-                size="mini"
-                icon="el-icon-edit"
-                >去评分</el-button
-              >
-              <el-button
-                type="text"
-                size="mini"
-                icon="el-icon-view"
-                @click="handleEdit(row,0)"
-                >查看详情</el-button
-              >
-            </div>
-          </template>
-        </CustomTable>
-      </div>
-      <SelectUser
-        :dialogVisible="userSelectDialogVisible"
-        :currentSelectedUser="currentSelectedUser"
-        :showSelection="true"
-        :highligt="false"
-        @confirm="handleUserConfirm"
-        @close="handleUserClose"
-      />
     </div>
-  </template>
+
-  
+    <div class="f1 df">
-  <script>
+      <CustomTable
-  import CustomTable from "@/components/CustomTable.vue";
+        :columns="columns"
-  import SelectUser from "@/components/SelectUser.vue";
+        :tableData="tableData"
-  import { projectApi, systemApi } from "@/utils/api";
+        :total="total"
-  
+        :show-selection="false"
-  export default {
+        :show-index="true"
-    components: {
+        @size-change="handleSizeChange"
-      CustomTable,
+        @current-change="handleCurrentChange"
-      SelectUser,
+        @sortChange="sortChange"
-    },
+        tableHeight="495px"
-    data() {
+      >
-      return {
+        <template slot="operation" slot-scope="{ row }">
-        searchForm: {
+          <div class="operation-buttons">
-          projectName: "",
+            <el-button
-          projectLeaderName: "",
+              v-if="isOutData == 0 && row.examineStatus == '0'"
-          projectLeader: "",
+              @click="handleEdit(row, 1)"
-          projectState: "",
+              type="text"
+              size="mini"
+              icon="el-icon-edit"
+              >去评分</el-button
+            >
+            <el-button
+              v-if="row.examineStatus == '1' || isOutData == 1"
+              type="text"
+              size="mini"
+              icon="el-icon-view"
+              @click="handleEdit(row, 0)"
+              >查看详情</el-button
+            >
+          </div>
+        </template>
+      </CustomTable>
+    </div>
+    <SelectUser
+      :dialogVisible="userSelectDialogVisible"
+      :currentSelectedUser="currentSelectedUser"
+      :showSelection="true"
+      :highligt="false"
+      @confirm="handleUserConfirm"
+      @close="handleUserClose"
+    />
+  </div>
+</template>
+
+<script>
+import CustomTable from "@/components/CustomTable.vue";
+import SelectUser from "@/components/SelectUser.vue";
+import { taskApi } from "@/utils/api";
+
+export default {
+  components: {
+    CustomTable,
+    SelectUser,
+  },
+  data() {
+    return {
+      searchForm: {
+        userIdList: [],
+        userName: "",
+        examineStatus: "",
+      },
+      taskId: "",
+      isOutData: "",
+      columns: [
+        { prop: "userName", label: "考核人员" },
+        { prop: "manageScore", label: "考核评分", sortable: "custom" },
+        {
+          prop: "examineStatus",
+          label: "状态",
+          type: "status",
+          callback: (value) => {
+            if (value == 0) var color = "#333";
+            else var color = "#1686d68";
+
+            return `<span style="color: ${color}">${
+              value == 0 ? "待评分" : "已完成"
+            }</span>`;
+          },
         },
-        columns: [
+        {
-          { prop: "projectName", label: "考核人员"},
+          prop: "operation",
-          { prop: "projectCode", label: "考核评分", sortable: true},
+          label: "操作",
-          {
+          width: "250",
-            prop: "projectState",
+          className: "operation-column",
-            label: "状态",
+        },
-            type: "status",
+      ],
-            callback: (value) => {
+      tableData: [],
-              if(value==1)
+      total: 0,
-              var color = "#333";
+      userSelectDialogVisible: false,
-            else 
+      currentSelectedUser: [],
-            var color = "#1686d68";
+      pageNum: 1, // 当前页码
-
+      pageSize: 10, // 每页条数
-              return `<span style="color: ${color}">${value}</span>`;
+      statusList: [
-            },
+        { label: "全部", value: "" },
-          },
+        { label: "待评分", value: "0" },
-          {
+        { label: "已完成", value: "1" },
-            prop: "operation",
+      ],
-            label: "操作",
+      isAsc: "",
-            width: "250",
+    };
-            className: "operation-column",
+  },
-          },
+  methods: {
-        ],
+    onSearch() {
-        tableData: [],
+      this.taskUserList();
-        total: 0,
-        userSelectDialogVisible: false,
-        currentSelectedUser: [],
-        pageNum: 1, // 当前页码
-        pageSize: 10, // 每页条数
-        statusList: [
-            {label:'全部',value:''},
-            {label:'待评分',value:'0'},
-            {label:'已完成',value:'1'},
-
-        ],
-      };
     },
-    methods: {
+    onReset() {
-      onSearch() {
+      Object.keys(this.searchForm).forEach((key) => {
-        this.fetchProjectList();
+        this.searchForm[key] = "";
-      },
+      });
-      onReset() {
+      this.currentSelectedUser = [];
-        Object.keys(this.searchForm).forEach((key) => {
+      this.taskUserList();
-          this.searchForm[key] = "";
+    },
+    handleEdit(row, edit) {
+      this.$router.push({
+        path: "/workAppraisal/detail",
+        query: {
+          edit,
+          examineTaskId: this.taskId,
+          examineId: row.id,
+          reviewType: 0,
+        },
+      });
+    },
+    taskUserList() {
+      taskApi
+        .getTaskUserList({
+          ...this.searchForm,
+          taskId: this.taskId,
+          pageNum: this.pageNum,
+          pageSize: this.pageSize,
+          isAsc: this.isAsc,
+        })
+        .then((res) => {
+          this.tableData = res.rows;
+          this.total = res.total;
         });
-        this.fetchProjectList();
-      },
-      handleEdit(row,edit) {
-        this.$router.push({
-          path: "/workAppraisal/detail",
-          query: { id: row.id,edit },
-        });
-      },
-      fetchProjectList() {
-        projectApi
-          .listProject({
-            ...this.searchForm,
-            pageNum: this.pageNum,
-            pageSize: this.pageSize,
-          })
-          .then((res) => {
-            this.tableData = res.rows;
-            this.total = res.total;
-          });
-      },
-      handleSizeChange(size) {
-        this.pageSize = size;
-        this.pageNum = 1; // 重置为第一页
-        this.fetchProjectList();
-      },
-      handleCurrentChange(page) {
-        this.pageNum = page;
-        this.fetchProjectList();
-      },
-      openUserSelectDialog() {
-        this.userSelectDialogVisible = true;
-      },
-      handleUserConfirm(data) {
-        this.searchForm.projectLeaderName = data.map((ele)=>ele.nickName);
-        this.searchForm.projectLeader = data.map((ele)=>ele.userId);
-      },
-      handleUserClose() {
-        this.userSelectDialogVisible = false;
-      },
     },
-    mounted() {
+    handleSizeChange(size) {
-      this.fetchProjectList();
+      this.pageSize = size;
+      this.pageNum = 1; // 重置为第一页
+      this.taskUserList();
     },
-  };
+    handleCurrentChange(page) {
-  </script>
+      this.pageNum = page;
-  
+      this.taskUserList();
-  <style lang="scss" scoped>
+    },
-  .project-list {
+    openUserSelectDialog() {
-    padding: 20px;
+      this.userSelectDialogVisible = true;
-    background-color: white;
+    },
-    height: 88vh;
+    handleUserConfirm(data) {
-    box-sizing: border-box;
+      this.searchForm.userName = data.map((ele) => ele.nickName).join(",");
-    overflow: hidden;
+      this.searchForm.userIdList = data.map((ele) => ele.userId);
-    display: flex;
+    },
-    flex-direction: column;
+    handleUserClose() {
-  }
+      this.userSelectDialogVisible = false;
-  
+    },
-  .search-bar {
+    sortChange({ order }) {
-    margin-bottom: 20px;
+      this.isAsc =
-  }
+        order == "descending" ? "desc" : order == "ascending" ? "asc" : "";
-  
+      this.taskUserList();
-  .demo-form-inline {
+    },
-    // display: flex;
+  },
-    // flex-wrap: nowrap;
+  created() {
-    // align-items: flex-start;
+    this.taskId = this.$route.query.taskId;
-  }
+    this.isOutData = this.$route.query.isOutData;
-  
+  },
-  .demo-form-inline .el-form-item {
+  mounted() {
-    // margin-right: 50px; /* 将间距设置为 30px */
+    this.taskUserList();
-    margin-bottom: 0;
+  },
-  }
+};
-  
+</script>
-  .demo-form-inline .el-form-item:last-child {
+
-    margin-right: 0; /* 移除最后一个元素的右边距 */
+<style lang="scss" scoped>
-  }
+.project-list {
-  
+  padding: 20px;
-  .form-item {
+  background-color: white;
-    flex: 1;
+  height: 88vh;
-  }
+  box-sizing: border-box;
-  
+  overflow: hidden;
-  .form-item ::v-deep .el-form-item__content {
+  display: flex;
-    // width: 100%;
+  flex-direction: column;
-  }
+}
-  
+
-  .form-item ::v-deep .el-input,
+.search-bar {
-  .form-item ::v-deep .el-select {
+  margin-bottom: 20px;
-    // width: 100%;
+}
-  }
+
-  
+.demo-form-inline {
-  .search-buttons {
+  // display: flex;
-    white-space: nowrap;
+  // flex-wrap: nowrap;
-  }
+  // align-items: flex-start;
-  
+}
-  ::v-deep .operation-buttons .el-button {
+
-    padding: 4px 8px;
+.demo-form-inline .el-form-item {
-    margin: 0 2px;
+  // margin-right: 50px; /* 将间距设置为 30px */
-  }
+  margin-bottom: 0;
-  
+}
-  ::v-deep .operation-column {
+
-    background-color: #ffffff;
+.demo-form-inline .el-form-item:last-child {
-    box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
+  margin-right: 0; /* 移除最后一个元素的右边距 */
-  }
+}
-  
+
-  .el-button.is-text {
+.form-item {
-    min-width: 32px !important;
+  flex: 1;
-  }
+}
-  
+
-  .dialog-footer {
+.form-item ::v-deep .el-form-item__content {
-    display: flex;
+  // width: 100%;
-    justify-content: center;
+}
-    align-items: center;
+
-  }
+.form-item ::v-deep .el-input,
-  
+.form-item ::v-deep .el-select {
-  .dialog-footer .el-button {
+  // width: 100%;
-    margin: 0 10px;
+}
-  }
+
-  
+.search-buttons {
-  .delete-content {
+  white-space: nowrap;
-    display: flex;
+}
-    align-items: center;
+
-    justify-content: center;
+::v-deep .operation-buttons .el-button {
-    text-align: center;
+  padding: 4px 8px;
-  }
+  margin: 0 2px;
-  
+}
-  .warning-icon {
+
-    font-size: 24px;
+::v-deep .operation-column {
-    color: #e6a23c;
+  background-color: #ffffff;
-    margin-right: 10px;
+  box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
-  }
+}
-  
+
-  /* 添加以下样式来使对话框垂直居中 */
+.el-button.is-text {
-  ::v-deep .delete-dialog.el-dialog {
+  min-width: 32px !important;
-    margin-top: 0 !important;
+}
-    position: absolute;
+
-    top: 50%;
+.dialog-footer {
-    left: 50%;
+  display: flex;
-    transform: translate(-50%, -50%);
+  justify-content: center;
-  }
+  align-items: center;
-  ::v-deep .el-table th {
+}
+
+.dialog-footer .el-button {
+  margin: 0 10px;
+}
+
+.delete-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+
+.warning-icon {
+  font-size: 24px;
+  color: #e6a23c;
+  margin-right: 10px;
+}
+
+/* 添加以下样式来使对话框垂直居中 */
+::v-deep .delete-dialog.el-dialog {
+  margin-top: 0 !important;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+::v-deep .el-table th {
   text-align: center;
 }
 
 ::v-deep .el-table .cell {
   text-align: center;
 }
-
+</style>
-  </style>
-  

src/views/workAppraisal/normalWorker.vue

@@ -1,163 +1,217 @@
 <template>
-    <div class="appraisal-manager">
+  <div class="appraisal-manager">
-      <el-row class="assessment-container">
+    <el-tabs v-model="activeName" @tab-click="handleClick">
-      <div class="statusText">进行中</div>
+      <el-tab-pane label="进行中" name="进行中">
-        <el-col :span="8"  v-for="item in ongoingAssessments" :key="item.id">
+        <div class="assessment-container flex-row">
-          <el-card class="card">
+          <div v-for="item in taskList['0']" :key="item.id" class="taskBox">
             <div class="card-content">
-              <div class="flex-row jcsb">
+              <div class="cardBox flex-col">
-                <div>{{ item.title }}</div>
+                <img
-              <div>考核人数：{{ item.participants }}</div>
+                  src="@/assets/task/titleIcon.png"
-            </div>
+                  alt=""
-            <p>截止时间：{{ item.deadline }}</p>
+                  style="width: 32px; height: 34px"
-              <div class="status-actions">
+                />
-                <el-tag>进行中</el-tag>
+                <div class="flex-row aic nameBox">
-                <div class="action-buttons">
+                  <div>{{ item.taskName }}</div>
-                  <el-button type="primary" @click="viewDetails(item.id,1)">考核评分</el-button>
+                  <el-tag type="warning" size="mini">进行中</el-tag>
+                </div>
+                <div class="timeBox">
+                  截止时间：{{ item.endTime.split(" ")[0] }}
+                </div>
+              </div>
+              <div class="status-actions aic">
+                <div class="peopleNumber">
+                  考核人数：{{ item.peopleNumber }}
+                </div>
+                <div
+                  class="action-buttons aic"
+                  @click="viewDetails(item.id, 0)"
+                >
+                  考核评分
+                  <img
+                    src="@/assets/task/right.png"
+                    alt=""
+                    style="width: 16px; height: 16px"
+                  />
                 </div>
               </div>
             </div>
-          </el-card>
+          </div></div
-        </el-col>
+      ></el-tab-pane>
-      </el-row>
+      <el-tab-pane label="已过期" name="已过期">
-      <el-row class="assessment-container">
+        <div class="assessment-container flex-row">
-        <div class="statusText">已过期</div>
+          <div v-for="item in taskList['2']" :key="item.id" class="taskBox">
-        <el-col :span="8"  v-for="item in expiredAssessments" :key="item.id">
-          <el-card class="card">
             <div class="card-content">
-              <div class="flex-row jcsb">
+              <div class="cardBox flex-col">
-                <div>{{ item.title }}</div>
+                <img
-              <div>考核人数：{{ item.participants }}</div>
+                  src="@/assets/task/titleIcon.png"
-            </div>
+                  alt=""
-            <p>截止时间：{{ item.deadline }}</p>
+                  style="width: 32px; height: 34px"
-              <div class="status-actions">
+                />
-                <el-tag type="info">已过期</el-tag>
+                <div class="flex-row aic nameBox">
-                <div class="action-buttons">
+                  <div>{{ item.taskName }}</div>
-                  <el-button type="primary" @click="viewDetails(item.id,0)">查看详情</el-button>
+                  <el-tag type="info" size="mini">进行中</el-tag>
+                </div>
+                <div class="timeBox">
+                  截止时间：{{ item.endTime.split(" ")[0] }}
+                </div>
+              </div>
+              <div class="status-actions aic">
+                <div class="peopleNumber">
+                  考核人数：{{ item.peopleNumber }}
+                </div>
+                <div
+                  class="action-buttons aic"
+                  @click="viewDetails(item.id, 0)"
+                >
+                  考核评分
+                  <img
+                    src="@/assets/task/right.png"
+                    alt=""
+                    style="width: 16px; height: 16px"
+                  />
                 </div>
               </div>
             </div>
-          </el-card>
+          </div></div
-        </el-col>
+      ></el-tab-pane>
-      </el-row>
+    </el-tabs>
-  
+  </div>
-    </div>
+</template>
-  </template>
+
-  
+<script>
-  <script>
+import { taskApi } from "@/utils/api";
-  export default {
+
-    name: "NormalWorker",
+export default {
-    data() {
+  name: "NormalWorker",
-      return {
+  data() {
-        ongoingAssessments: [
+    return {
-          {
+      activeName: "进行中",
-            id: 1,
+      taskList: [],
-            title: '2024年员工年度考核',
+    };
-            deadline: '2024.12.31',
+  },
-            participants: 10,
+  methods: {
-          },{
+    getTaks() {
-            id: 1,
+      taskApi.getTaskListSelf().then((res) => {
-            title: '2024年员工年度考核',
+        this.taskList = res.data;
-            deadline: '2024.12.31',
+      });
-            participants: 10,
-          },{
-            id: 1,
-            title: '2024年员工年度考核',
-            deadline: '2024.12.31',
-            participants: 10,
-          },{
-            id: 1,
-            title: '2024年员工年度考核',
-            deadline: '2024.12.31',
-            participants: 10,
-          },{
-            id: 1,
-            title: '2024年员工年度考核',
-            deadline: '2024.12.31',
-            participants: 10,
-          },
-        ],
-        expiredAssessments: [
-          {
-            id: 2,
-            title: '2023年员工年度考核',
-            deadline: '2023.12.31',
-            participants: 10,
-          },
-          {
-            id: 3,
-            title: '2024年Q3员工年度考核',
-            deadline: '2024.10.15',
-            participants: 10,
-          },
-          {
-            id: 4,
-            title: '2024年Q2员工年度考核',
-            deadline: '2024.10.15',
-            participants: 10,
-          },
-        ],
-      };
     },
-    methods: {
+    viewDetails(id, edit) {
-      goToAssessment(id) {
+      // 查看考核详情
-        // 跳转到考核页面
+      this.$router.push({
-        console.log(`跳转到考核 ID: ${id}`);
+        path: "/workAppraisal/detail",
-      },
+        query: {
-  
+          id: id,
-      viewDetails(id,edit) {
+          edit,
-        // 查看考核详情
+          isNormal: true,
-        this.$router.push({
+          examineTaskId: 1,
-            path: "/workAppraisal/detail",
+          reviewType: 1,
-            query: { id: id,edit,isNormal:true },
+        },
-          });
+      });
-      },
     },
-  };
+  },
-  </script>
+  created() {
-  
+    this.getTaks();
-  <style scoped>
+  },
-  .appraisal-manager {
+};
-    padding: 30px;
+</script>
-    background-color: #f8f8f8;
+
-    height: 100vh; /* 设置整体高度 */
+<style scoped>
-  }
+.appraisal-manager {
-  
+  padding: 30px;
-  .assessment-container {
+  background-color: #fff;
-    max-height:45%; /* 减去标题高度 */
+  height: calc(100vh - 100px); /* 设置整体高度 */
-    overflow-y: auto; /* 允许垂直滚动 */
+}
-  }
+
-  
+.assessment-container {
-  .card {
+  max-height: 650px; /* 减去标题高度 */
-    margin-bottom: 20px;
+  overflow-y: auto; /* 允许垂直滚动 */
-    border-radius: 10px;
+  gap: 2%;
-    width: 80%;
+  padding-top: 20px;
-  }
+  padding-left: 20px;
-  
+  flex-wrap: wrap;
-  .card-content {
+}
-    padding:0 10px;
+.taskBox {
-    background-color: #fff;
+  width: 23%;
-    border-radius: 10px;
+  height: 200px;
-    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
+  margin-bottom: 40px;
-  }
+}
-  
+
-  .status-actions {
+.card {
-    display: flex;
+  margin-bottom: 20px;
-    justify-content: space-between; /* 两端对齐 */
+  border-radius: 8px;
-    align-items: center; /* 垂直居中 */
+  width: 80%;
-  }
+}
-  
+
-  .status-text {
+.card-content {
-    font-weight: bold; /* 状态文本加粗 */
+  padding: 20px 0 0 0;
-  }
+  background-color: #fff;
-  
+  border-radius: 10px;
-  .action-buttons {
+  box-shadow: 0 0 8px rgba(0, 0, 0, 0.1);
-    display: flex;
+}
-    gap: 10px; /* 按钮之间的间距 */
+.cardBox {
-  }
+  gap: 20px;
-  .statusText{
+
-    font-size: 26px;
+  padding: 0 20px;
-    margin: 20px 0;
+}
-    font-weight: bold;
+
-  }
+.status-actions {
-  </style>
+  display: flex;
+  justify-content: space-between; /* 两端对齐 */
+  align-items: center; /* 垂直居中 */
+  height: 44px;
+  background-color: #f7faff;
+  padding: 0 20px;
+  margin-top: 20px;
+}
+.peopleNumber {
+  color: #666;
+  font-size: 14px;
+  font-weight: bold;
+}
+
+.status-text {
+  font-weight: bold; /* 状态文本加粗 */
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px; /* 按钮之间的间距 */
+  color: #4096ff;
+  font-size: 16px;
+  font-weight: bold;
+  cursor: pointer;
+}
+.statusText {
+  font-size: 26px;
+  margin: 20px 0;
+  font-weight: bold;
+}
+.timeBox {
+  font-size: 14px;
+  color: #999999;
+  font-weight: bold;
+}
+::v-deep .el-tabs__item.is-active {
+  color: #4096ff;
+}
+::v-deep .el-tabs__item {
+  font-size: 18px;
+  font-weight: bold;
+  color: #999999;
+}
+::v-deep .el-tabs__active-bar {
+  height: 3px;
+  width: 32px !important;
+  left: 10px;
+}
+.nameBox {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  gap: 10px;
+}
+::v-deep .el-tag--warning {
+  color: #ea741e;
+}
+</style>

src/views/workAppraisal/taskSet.vue

@@ -8,11 +8,14 @@
         size="small"
       >
         <el-form-item label="任务名称" class="form-item">
-          <el-input v-model="searchForm.name" placeholder="任务名称"></el-input>
+          <el-input
+            v-model="searchForm.taskName"
+            placeholder="任务名称"
+          ></el-input>
         </el-form-item>
         <el-form-item label="任务状态" class="form-item">
           <el-select
-            v-model="searchForm.projectState"
+            v-model="searchForm.taskStatus"
             placeholder="状态"
             clearable
           >
@@ -94,16 +97,20 @@
           :rules="rules"
           label-width="100px"
         >
-          <el-form-item label="任务名称" class="form-item" prop="name">
+          <el-form-item label="任务名称" class="form-item" prop="taskName">
             <el-input
-              v-model="taskData.name"
+              v-model="taskData.taskName"
               placeholder="0/20"
               style="width: 90%"
             ></el-input>
           </el-form-item>
-          <el-form-item label="考核人员" class="form-item" prop="userName">
+          <el-form-item
+            label="考核人员"
+            class="form-item"
+            prop="peopleNumberDetail"
+          >
             <el-input
-              v-model="taskData.userName"
+              v-model="taskData.peopleNumberDetail"
               placeholder="考核人员"
               readonly
               style="width: 90%"
@@ -111,12 +118,13 @@
               ><el-button slot="append" icon="el-icon-s-custom"></el-button
             ></el-input>
           </el-form-item>
-          <el-form-item label="截止时间" class="form-item" prop="time">
+          <el-form-item label="截止时间" class="form-item" prop="endTime">
             <el-date-picker
-              v-model="taskData.time"
+              v-model="taskData.endTime"
               type="date"
               style="width: 90%"
               placeholder="选择日期"
+              value-format="yyyy-MM-dd 23:59:59"
             >
             </el-date-picker>
           </el-form-item>
@@ -131,35 +139,42 @@
       <div class="modal">
         <div class="left">
           <div class="setText">累计权重</div>
-          <el-collapse v-model="letfValue" :accordion="true" style="height: 300px;">
+          <el-collapse
+            v-model="letfValue"
+            :accordion="true"
+            style="height: 300px;overflow: auto;"
+          >
             <el-collapse-item
               v-for="(item, index) in scoreList"
               :key="index"
-              :name="item.name"
+              :name="item.title"
             >
               <template #title>
                 <div class="jcsb flex-row contentTitle">
                   <span class="setTitle">{{ item.title }}</span>
-                  <span class="statusText">{{ item.score }}%</span>
+                  <span class="statusText">{{ item.weight }}%</span>
                 </div>
               </template>
               <div>
                 <div
-                  v-for="(item, index) in item.list"
+                  v-for="(ele, index) in item.list"
                   :key="index"
                   class="flex-row jcsb leftSub"
                 >
-                  <div>{{ item.name }}</div>
+                  <div>{{ ele.reviewItem }}</div>
-                  <div class="statusText">{{ item.score }}%</div>
+                  <div class="statusText">{{ ele.weight }}%</div>
                 </div>
               </div>
             </el-collapse-item>
           </el-collapse>
-          <div class="flex-row jcsb" style="margin-top: 20px;padding-right: 15px;">
+          <div
+            class="flex-row jcsb"
+            style="margin-top: 20px; padding-right: 15px"
+          >
             <div class="setTitle">总计</div>
             <div class="statusText">
               {{
-                scoreList.reduce((total, ele) => total + (ele.score || 0), 0)
+                scoreList.reduce((total, ele) => total + (ele.weight || 0), 0)
               }}%
             </div>
           </div>
@@ -172,18 +187,22 @@
           <div>
             <div
               v-for="(item, index) in (
-                scoreList.find((ele) => ele.name == letfValue) || {}
+                scoreList.find((ele) => ele.title == letfValue) || {}
               ).list"
               :key="index"
               style="margin-bottom: 10px"
               class="flex-row jcsb aic"
             >
-              <div style="width: 50%">{{ item.name }}</div>
+              <div style="width: 50%">{{ item.reviewItem }}</div>
               <div class="center" style="width: 50%">
-                <el-slider v-model="item.score" :max="20"></el-slider>
+                <el-slider
+                  v-model="item.weight"
+                  :max="20"
+                  @change="totalWeight"
+                ></el-slider>
                 <div class="flex-row jcsb scoreBox" style="margin-left: 15px">
                   <div>0%</div>
-                  <div class="scoreText">{{ item.score }}%</div>
+                  <div class="scoreText">{{ item.weight }}%</div>
                   <div>20%</div>
                 </div>
               </div>
@@ -202,7 +221,7 @@
 <script>
 import CustomTable from "@/components/CustomTable.vue";
 import SelectUser from "@/components/SelectUser.vue";
-import { projectApi, systemApi } from "@/utils/api";
+import { taskApi } from "@/utils/api";
 
 export default {
   components: {
@@ -212,25 +231,41 @@ export default {
   data() {
     return {
       searchForm: {
-        name: "",
+        taskName: "",
-        status: "",
+        taskStatus: "",
       },
       columns: [
-        { prop: "projectName", label: "任务名称" },
+        { prop: "taskName", label: "任务名称" },
-        { prop: "projectCode", label: "考核人数" },
+        { prop: "peopleNumber", label: "考核人数" },
         {
-          prop: "projectState",
+          prop: "taskStatus",
           label: "任务状态",
           type: "status",
           callback: (value) => {
             if (value == 1) var color = "#333";
             else var color = "#1686d68";
 
-            return `<span style="color: ${color}">${value}</span>`;
+            return `<span style="color: ${color}">${
+              value ? "已过期" : "进行中"
+            }</span>`;
+          },
+        },
+        {
+          prop: "createTime",
+          label: "创建时间",
+          type: "status",
+          callback: (value) => {
+            return value.split(" ")[0];
+          },
+        },
+        {
+          prop: "endTime",
+          label: "截至时间",
+          type: "status",
+          callback: (value) => {
+            return value.split(" ")[0];
           },
         },
-        { prop: "projectCode", label: "创建时间" },
-        { prop: "projectCode", label: "截至时间" },
 
         {
           prop: "operation",
@@ -253,57 +288,36 @@ export default {
       dialogVisible1: false,
       isEdit: false,
       taskData: {
-        name: "",
+        id: "",
-        time: "",
+        taskName: "",
-        userName: "",
+        peopleNumberDetail: "",
-        userId: [],
+        userIdList: [],
+        endTime: "",
+        peopleNumber: 0,
       },
       rules: {
-        name: [
+        taskName: [
           { required: true, message: "请输入活动名称", trigger: "blur" },
           { min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
         ],
-        userName: [
+        peopleNumberDetail: [
           { required: true, message: "请选择考核人员", trigger: "blur" },
         ],
-        time: [{ required: true, message: "请选择截止时间", trigger: "blur" }],
+        endTime: [
+          { required: true, message: "请选择截止时间", trigger: "blur" },
+        ],
       },
       dialogVisible2: false,
       letfValue: "",
-      scoreList: [
+      scoreList: [],
-        {
-          name: "progress",
-          title: "项目进度符合度",
-          score: 0,
-          list: [{ name: "1111" }, { name: "22" }],
-        },
-        {
-          name: "achievement",
-          title: "项目成果达成度",
-          score: 0,
-          list: [{ name: "33" }, { name: "44" }],
-        },
-        {
-          name: "documentation",
-          title: "项目文档完整性",
-          score: 0,
-          list: [{ name: "55" }, { name: "66" }],
-        },
-        {
-          name: "innovation",
-          title: "技术创新点及影响力",
-          score: 0,
-          list: [{ name: "77" }, { name: "88" }],
-        },
-      ],
     };
   },
   watch: {
     scoreList: {
       handler(newVal, oldVal) {
         this.scoreList.forEach((ele) => {
-          ele.score = ele.list.reduce(
+          ele.weight = ele.list.reduce(
-            (total, ele) => total + (ele.score || 0),
+            (total, ele) => total + (ele.weight || 0),
             0
           );
         });
@@ -313,17 +327,17 @@ export default {
   },
   methods: {
     onSearch() {
-      this.fetchProjectList();
+      this.getTaskList();
     },
     onReset() {
       Object.keys(this.searchForm).forEach((key) => {
         this.searchForm[key] = "";
       });
-      this.fetchProjectList();
+      this.getTaskList();
     },
-    fetchProjectList() {
+    getTaskList() {
-      projectApi
+      taskApi
-        .listProject({
+        .getTaskList({
           ...this.searchForm,
           pageNum: this.pageNum,
           pageSize: this.pageSize,
@@ -336,18 +350,21 @@ export default {
     handleSizeChange(size) {
       this.pageSize = size;
       this.pageNum = 1; // 重置为第一页
-      this.fetchProjectList();
+      this.getTaskList();
     },
     handleCurrentChange(page) {
       this.pageNum = page;
-      this.fetchProjectList();
+      this.getTaskList();
     },
     openUserSelectDialog() {
       this.userSelectDialogVisible = true;
     },
     handleUserConfirm(data) {
-      this.taskData.userName = data.map((ele) => ele.nickName);
+      this.taskData.peopleNumberDetail = data
-      this.taskData.userId = data.map((ele) => ele.userId);
+        .map((ele) => ele.nickName)
+        .join(",");
+      this.taskData.userIdList = data.map((ele) => ele.userId);
+      this.taskData.peopleNumber = data.length;
     },
     handleUserClose() {
       this.userSelectDialogVisible = false;
@@ -359,12 +376,33 @@ export default {
     editTask(row) {
       this.isEdit = true;
       this.dialogVisible1 = true;
-      this.taskData = row;
+      this.taskData.id = row.id;
+      this.taskData.taskName = row.taskName;
+      this.taskData.peopleNumber = row.peopleNumber;
+      this.taskData.peopleNumberDetail = row.peopleNumberDetail;
+      this.taskData.userIdList = row.userIdList;
+      this.currentSelectedUser = [];
+      (row.userIdList || []).forEach((ele) => {
+        this.currentSelectedUser.push(ele);
+      });
     },
     setTask(row) {
-      this.dialogVisible2 = true;
+      taskApi.getTaskSet(row.id).then((res) => {
+        let objData = {};
+        res.data.forEach((ele) => {
+          if (!objData[ele.reviewCategory]) objData[ele.reviewCategory] = [];
+          objData[ele.reviewCategory].push(ele);
+        });
+        this.scoreList = Object.values(objData).map((ele) => ({
+          title: ele[0].reviewCategory,
+          list: ele,
+          weight: ele.reduce((total, ele) => (ele.weight || 0) + total, 0),
+        }));
+
+        this.dialogVisible2 = true;
+      });
     },
-    delTask() {
+    delTask(row) {
       this.$confirm(
         "删除任务及绩效数据，该操作不可逆，请谨慎操作",
         "确认删除任务",
@@ -374,16 +412,37 @@ export default {
           type: "warning",
         }
       ).then(() => {
-        this.$message({
+        taskApi.delTask(row.id).then((res) => {
-          type: "success",
+          this.$message({
-          message: "删除成功!",
+            type: "success",
+            message: "删除成功!",
+          });
+          this.getTaskList();
         });
       });
     },
     saveTask() {
       this.$refs.taskFormRef.validate((valid) => {
         if (valid) {
-          alert("submit!");
+          if (this.taskData.id) {
+            taskApi.upDateTask(this.taskData).then((res) => {
+              this.$message({
+                type: "success",
+                message: "修改成功!",
+              });
+              this.dialogVisible1 = false;
+              this.getTaskList();
+            });
+          } else {
+            taskApi.addTask(this.taskData).then((res) => {
+              this.$message({
+                type: "success",
+                message: "新增成功!",
+              });
+              this.dialogVisible1 = false;
+              this.getTaskList();
+            });
+          }
         } else {
           console.log("error submit!!");
           return false;
@@ -392,7 +451,7 @@ export default {
     },
   },
   mounted() {
-    this.fetchProjectList();
+    this.getTaskList();
   },
 };
 </script>
@@ -503,7 +562,6 @@ export default {
   display: flex;
   border-bottom: 1px solid #ccc;
   border-top: 1px solid #ccc;
-
 }
 .left {
   width: 40%;
@@ -566,7 +624,7 @@ export default {
 .statusText {
   color: #ff5722;
 }
-::v-deep .el-collapse{
+::v-deep .el-collapse {
-    border: none !important;
+  border: none !important;
 }
 </style>