From 4d62c1babaf8f80cfd4dd89f6d41facd4db8a452 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E2=80=98wangjiuyun?= <‘1595161655@qq.com>
Date: Thu, 2 Jan 2025 17:57:15 +0800
Subject: [PATCH] =?UTF-8?q?=E8=80=83=E6=A0=B8=E9=9D=99=E6=80=81=E5=BC=80?=
 =?UTF-8?q?=E5=8F=91=E5=AE=8C=E6=88=9080%?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CustomTable.vue            |   8 +-
 src/components/SelectUser.vue             |  24 +-
 src/views/projectBank/userScore.vue       | 265 ++++++++++
 src/views/projectBank/userScoreDetail.vue | 289 +++++++++++
 src/views/workAppraisal/detail.vue        | 263 ++++++++++
 src/views/workAppraisal/manager.vue       | 163 ++++++
 src/views/workAppraisal/managerUser.vue   | 288 +++++++++++
 src/views/workAppraisal/normalWorker.vue  | 163 ++++++
 src/views/workAppraisal/taskSet.vue       | 572 ++++++++++++++++++++++
 9 files changed, 2029 insertions(+), 6 deletions(-)
 create mode 100644 src/views/projectBank/userScore.vue
 create mode 100644 src/views/projectBank/userScoreDetail.vue
 create mode 100644 src/views/workAppraisal/detail.vue
 create mode 100644 src/views/workAppraisal/manager.vue
 create mode 100644 src/views/workAppraisal/managerUser.vue
 create mode 100644 src/views/workAppraisal/normalWorker.vue
 create mode 100644 src/views/workAppraisal/taskSet.vue

diff --git a/src/components/CustomTable.vue b/src/components/CustomTable.vue
index 123dca9..9fe4962 100644
--- a/src/components/CustomTable.vue
+++ b/src/components/CustomTable.vue
@@ -12,7 +12,12 @@
       :row-key="rowKey"
       :height="tableHeight"
     >
-      <el-table-column v-if="showSelection" type="selection" width="55" />
+      <el-table-column
+        reserve-selection
+        v-if="showSelection"
+        type="selection"
+        width="55"
+      />
       <el-table-column v-if="showIndex" type="index" width="50" label="序号" />
       <template>
         <el-table-column
@@ -21,6 +26,7 @@
           :label="column.label"
           v-for="(column, index) in columns"
           :key="index"
+          :sortable="column.sortable"
         >
           <template #default="scope">
             <slot :name="column.prop" :row="scope.row">
diff --git a/src/components/SelectUser.vue b/src/components/SelectUser.vue
index e7ab63f..df6502e 100644
--- a/src/components/SelectUser.vue
+++ b/src/components/SelectUser.vue
@@ -20,7 +20,7 @@
           :columns="columns"
           :tableData="userData"
           :total="total"
-          :show-selection="false"
+          :show-selection="showSelection"
           :show-index="true"
           :table-height="tableHeight"
           :multiSelect="multiSelect"
@@ -34,6 +34,7 @@
             }
           "
           maxHeight="380"
+          :highligt="highligt"
         >
           <template slot="operation" slot-scope="{ row }">
             <div class="operation-buttons">
@@ -75,12 +76,21 @@ export default {
     },
     dialogVisible: {
       type: Boolean,
-      required: true,
+      default: true,
     },
     currentSelectedUser: {
       type: Array,
       default: () => [],
     },
+    showSelection: {
+      type: Boolean,
+      default: false,
+    },
+    highligt:{
+      type: Boolean,
+      default: true,
+    }
+    
   },
   data() {
     return {
@@ -138,8 +148,8 @@ export default {
       this.handleClose();
     },
     handleSelectionChange(val) {
-      if (this.isInternalChange) return;
 
+      if (this.isInternalChange) return;
       if (!this.multiSelect) {
         this.isInternalChange = true;
         this.$nextTick(() => {
@@ -174,9 +184,13 @@ export default {
       this.selectedUsers = [val];
     },
     rowClick(row) {
-      if (row.userId == this.selectedUsers[0]?.userId)
+
+      if(!this.showSelection){
+        if (row.userId == this.selectedUsers[0]?.userId)
         this.$refs.customTableRef.$refs.elTableRef.setCurrentRow();
-      else this.selectedUsers = [row];
+      else this.selectedUsers = [row]
+      }
+   ;
     },
   },
   watch: {
diff --git a/src/views/projectBank/userScore.vue b/src/views/projectBank/userScore.vue
new file mode 100644
index 0000000..0424449
--- /dev/null
+++ b/src/views/projectBank/userScore.vue
@@ -0,0 +1,265 @@
+<template>
+  <div class="project-list flex-row jcsb">
+    <div class="left">
+      <div style="margin-bottom: 20px">人员绩效表</div>
+      <el-tree
+        :data="deptOptions"
+        :props="defaultProps"
+        :expand-on-click-node="false"
+        :filter-node-method="filterNode"
+        ref="tree"
+        node-key="id"
+        default-expand-all
+        highlight-current
+        @node-click="handleNodeClick"
+      />
+    </div>
+    <div class="right f1">
+      <div class="search-bar">
+        <el-form
+          :inline="true"
+          :model="searchForm"
+          class="demo-form-inline"
+          size="small"
+        >
+          <el-form-item label="统计任务" class="form-item"> </el-form-item>
+        </el-form>
+      </div>
+      <div class="f1 df">
+        <CustomTable
+          :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
+                type="text"
+                size="mini"
+                icon="el-icon-view"
+                @click="handleEdit(row, 0)"
+                >查看详情</el-button
+              >
+            </div>
+          </template>
+        </CustomTable>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import CustomTable from "@/components/CustomTable.vue";
+import SelectUser from "@/components/SelectUser.vue";
+import { projectApi, systemApi } from "@/utils/api";
+import { deptTreeSelect } from "@/api/system/user";
+
+export default {
+  components: {
+    CustomTable,
+    SelectUser,
+  },
+  data() {
+    return {
+      deptOptions: undefined,
+      searchForm: {
+        projectName: "",
+      },
+      columns: [
+        { prop: "projectName", label: "考核人员" },
+        { prop: "projectCode", label: "考核评分", sortable: true },
+        {
+          prop: "projectState",
+          label: "状态",
+          type: "status",
+          callback: (value) => {
+            if (value == 1) var color = "#333";
+            else var color = "#1686d68";
+
+            return `<span style="color: ${color}">${value}</span>`;
+          },
+        },
+        {
+          prop: "operation",
+          label: "操作",
+          width: "250",
+          className: "operation-column",
+        },
+      ],
+      tableData: [],
+      total: 0,
+      currentSelectedUser: [],
+      pageNum: 1, // 当前页码
+      pageSize: 10, // 每页条数
+      statusList: [
+        { label: "全部", value: "" },
+        { label: "待评分", value: "0" },
+        { label: "已完成", value: "1" },
+      ],
+    };
+  },
+  methods: {
+    onSearch() {
+      this.fetchProjectList();
+    },
+    onReset() {
+      Object.keys(this.searchForm).forEach((key) => {
+        this.searchForm[key] = "";
+      });
+      this.fetchProjectList();
+    },
+    handleEdit(row, edit) {
+      this.$router.push({
+        path: "/projectBank/userScoreDetail",
+        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();
+    },
+    getDeptTree() {
+      deptTreeSelect().then((response) => {
+        this.deptOptions = response.data;
+      });
+    },
+  },
+  mounted() {
+    this.getDeptTree();
+
+    this.fetchProjectList();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.project-list {
+  padding: 20px;
+  background-color: white;
+  height: 88vh;
+  box-sizing: border-box;
+  overflow: hidden;
+  align-items: flex-start;
+  gap: 20px;
+  .left {
+    padding-top: 20px;
+    width: 300px;
+    height: 100%;
+    box-shadow: 5px 0 5px rgba(0, 0, 0, 0.5); /* 阴影效果 */
+  }
+  .right {
+    padding-top: 20px;
+  }
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+  // display: flex;
+  // flex-wrap: nowrap;
+  // align-items: flex-start;
+}
+
+.demo-form-inline .el-form-item {
+  // margin-right: 50px; /* 将间距设置为 30px */
+  margin-bottom: 0;
+}
+
+.demo-form-inline .el-form-item:last-child {
+  margin-right: 0; /* 移除最后一个元素的右边距 */
+}
+
+.form-item {
+  flex: 1;
+}
+
+.form-item ::v-deep .el-form-item__content {
+  // width: 100%;
+}
+
+.form-item ::v-deep .el-input,
+.form-item ::v-deep .el-select {
+  // width: 100%;
+}
+
+.search-buttons {
+  white-space: nowrap;
+}
+
+::v-deep .operation-buttons .el-button {
+  padding: 4px 8px;
+  margin: 0 2px;
+}
+
+::v-deep .operation-column {
+  background-color: #ffffff;
+  box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
+}
+
+.el-button.is-text {
+  min-width: 32px !important;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.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>
diff --git a/src/views/projectBank/userScoreDetail.vue b/src/views/projectBank/userScoreDetail.vue
new file mode 100644
index 0000000..5d45f05
--- /dev/null
+++ b/src/views/projectBank/userScoreDetail.vue
@@ -0,0 +1,289 @@
+<template>
+  <div class="conetentBox">
+    <div class="flex-row jcsb aic userBox">
+      <div>
+        <el-form
+          :inline="true"
+          :model="searchForm"
+          class="demo-form-inline"
+          size="small"
+        >
+          <el-form-item label="考核人员" class="form-item">
+            <el-input
+              v-model="searchForm.userName"
+              placeholder="考核人员"
+              readonly
+              @click.native="openUserSelectDialog"
+              ><el-button slot="append" icon="el-icon-s-custom"></el-button
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="考核任务" class="form-item">
+            <el-select v-model="searchForm.taskId" placeholder="请选择">
+              <el-option
+                v-for="item in taskList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-form>
+      </div>
+      <div>考核评分：</div>
+    </div>
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="组长评估" name="first">
+        <div
+          v-for="(table, index) in tableData"
+          :key="index"
+          style="margin-bottom: 20px"
+        >
+          <div class="userBox">表格 {{ index + 1 }}</div>
+          <el-table :data="table" style="width: 100%">
+            <el-table-column
+              v-for="(header, hIndex) in headers"
+              :key="hIndex"
+              :label="header.label"
+              :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>
+        </div>
+        <div>
+          <div>
+            <div class="userBox">总体评价</div>
+            <div>
+              <el-input
+                type="textarea"
+                :autosize="{ minRows: 4 }"
+                placeholder="0/300"
+                v-model="managerText"
+                readonly
+              >
+              </el-input>
+            </div>
+          </div></div
+      ></el-tab-pane>
+      <el-tab-pane label="个人自评" name="second">
+        <div
+          v-for="(table, index) in tableData"
+          :key="index"
+          style="margin-bottom: 20px"
+        >
+          <div class="userBox">表格 {{ index + 1 }}</div>
+          <el-table :data="table" style="width: 100%">
+            <el-table-column
+              v-for="(header, hIndex) in headers"
+              :key="hIndex"
+              :label="header.label"
+              :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">
+              <template slot-scope="scope">
+                <div>
+                  <el-button
+                    @click="handleEdit(scope.row)"
+                    type="text"
+                    size="mini"
+                    :class="{ hasEdit: !scope.row.remark }"
+                    >{{ scope.row.remark ? "查看" : "未填写" }}</el-button
+                  >
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+        </div>
+        <div></div
+      ></el-tab-pane>
+    </el-tabs>
+    <el-dialog title="自评总结" :visible.sync="dialogVisible" width="30%">
+      <div>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 4 }"
+          placeholder="0/200"
+          v-model="remark"
+          readonly
+        >
+        </el-input>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible = false">关闭</el-button>
+      </span>
+    </el-dialog>
+    <SelectUser
+      :dialogVisible="userSelectDialogVisible"
+      :currentSelectedUser="currentSelectedUser"
+      :showSelection="true"
+      :highligt="false"
+      @confirm="handleUserConfirm"
+      @close="handleUserClose"
+    />
+  </div>
+</template>
+
+<script>
+import SelectUser from "@/components/SelectUser.vue";
+
+export default {
+  components: {
+    SelectUser,
+  },
+  data() {
+    return {
+      taskId: "",
+      isNormal: false,
+      dialogVisible: false,
+      saveStatus: "",
+      remark: "",
+      headers: [
+        { label: "考核项", prop: "name", width: 300 },
+        { label: "评分标准", prop: "description" },
+      ],
+      // 二维数组，每个子数组代表一个表格的数据
+      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" },
+        ],
+        // 可以根据需要添加更多表格数据
+      ],
+      taskList: [{ label: "任务1", value: 1 }],
+      managerText: "",
+      searchForm: {
+        userName: "",
+        userId: "",
+        taskId: "",
+      },
+      activeName: "first",
+      userSelectDialogVisible: false,
+      currentSelectedUser: [],
+    };
+  },
+  methods: {
+    updateScore(row) {
+      // 这里可以添加更新评分后的逻辑
+      console.log(`项目: ${row.name}, 评分: ${row.score}`);
+    },
+    handleEdit(row) {
+      this.dialogVisible = true;
+      this.remark = row.remark;
+    },
+    openUserSelectDialog() {
+      this.userSelectDialogVisible = true;
+    },
+    handleUserConfirm(data) {
+      this.searchForm.userName = data.map((ele) => ele.nickName);
+      this.searchForm.userId = data.map((ele) => ele.userId);
+    },
+    handleUserClose() {
+      this.userSelectDialogVisible = false;
+    },
+  },
+  created() {},
+};
+</script>
+
+<style scoped>
+.conetentBox {
+  padding: 30px;
+  background-color: #fff;
+  height: 90vh; /* 设置整体高度 */
+  overflow: auto;
+}
+.el-table {
+  margin-top: 20px;
+}
+.userBox {
+  margin: 0 0 20px;
+  font-size: 16px;
+  font-weight: bold;
+}
+::v-deep .el-slider__runway {
+  height: 20px;
+  border-radius: 20px;
+  margin: 10px !important;
+  /* width: 95%; */
+}
+::v-deep .el-slider__bar {
+  height: 20px;
+  border-radius: 20px;
+  background-color: #ff5722;
+}
+::v-deep .el-slider__button {
+  display: none;
+}
+.scoreText {
+  color: #1686d8;
+}
+::v-deep .el-table th {
+  text-align: center;
+}
+
+::v-deep .el-table .cell {
+  text-align: center;
+}
+.statusText {
+  color: #ff5722;
+  position: absolute;
+  right: -58px;
+  top: 10px;
+}
+.hasEdit {
+  color: #ff5722;
+}
+::v-deep .el-dialog {
+  margin-top: 15% !important;
+}
+</style>
diff --git a/src/views/workAppraisal/detail.vue b/src/views/workAppraisal/detail.vue
new file mode 100644
index 0000000..281d492
--- /dev/null
+++ b/src/views/workAppraisal/detail.vue
@@ -0,0 +1,263 @@
+<template>
+  <div class="conetentBox">
+    <div class="flex-row jcsb aic userBox">
+      <div>张三 2024年员工年度考核</div>
+      <div>考核评分：</div>
+    </div>
+    <div
+      v-for="(table, index) in tableData"
+      :key="index"
+      style="margin-bottom: 20px"
+    >
+      <div class="userBox">表格 {{ index + 1 }}</div>
+      <el-table :data="table" style="width: 100%">
+        <el-table-column
+          v-for="(header, hIndex) in headers"
+          :key="hIndex"
+          :label="header.label"
+          :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>
+        </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>
+    <el-dialog title="自评总结" :visible.sync="dialogVisible" width="30%">
+      <div>
+        <el-input
+          type="textarea"
+          :autosize="{ minRows: 4 }"
+          placeholder="0/200"
+          v-model="remark"
+        >
+        </el-input>
+      </div>
+
+      <span slot="footer" class="dialog-footer">
+        <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>
+export default {
+  data() {
+    return {
+      taskId: "",
+      isNormal: false,
+      dialogVisible: false,
+      dialogVisible2: false,
+      dialogVisible3: false,
+      selectRow: false,
+      saveStatus: "",
+      remark: "",
+      headers: [
+        { label: "考核项", prop: "name", width: 300 },
+        { label: "评分标准", prop: "description" },
+      ],
+      // 二维数组，每个子数组代表一个表格的数据
+      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: "",
+    };
+  },
+  methods: {
+    updateScore(row) {
+      // 这里可以添加更新评分后的逻辑
+      console.log(`项目: ${row.name}, 评分: ${row.score}`);
+    },
+    handleEdit(row) {
+      this.dialogVisible = true;
+      this.selectRow = row;
+      this.remark = this.selectRow.remark;
+    },
+    saveEdit() {
+      if (this.remark.length > 200) {
+        this.$message({
+          message: "自评总结限制200个字符",
+          type: "warning",
+        });
+        return;
+      }
+      this.dialogVisible = false;
+      this.selectRow.remark = this.remark;
+    },
+    cancelEdit() {
+      this.dialogVisible = false;
+    },
+    saveScoreCheck(status) {
+      this.dialogVisible2 = true;
+      this.saveStatus = status;
+    },
+    saveScore() {
+      this.dialogVisible2 = false;
+      if (this.managerText.length > 300) {
+        this.$message({
+          message: "总体评价限制300个字符",
+          type: "warning",
+        });
+      }
+      if(this.tableData.filter((ele)=>!ele.remark).length){
+        this.dialogVisible3=true
+      }
+    },
+  },
+  created() {
+    this.isNormal = this.$route.query.isNormal || "";
+  },
+};
+</script>
+
+<style scoped>
+.conetentBox {
+  padding: 30px;
+  background-color: #fff;
+  height: 90vh; /* 设置整体高度 */
+  overflow: auto;
+}
+.el-table {
+  margin-top: 20px;
+}
+.userBox {
+  margin: 0 0 20px;
+  font-size: 16px;
+  font-weight: bold;
+}
+::v-deep .el-slider__runway {
+  height: 20px;
+  border-radius: 20px;
+  margin: 10px !important;
+  /* width: 95%; */
+}
+::v-deep .el-slider__bar {
+  height: 20px;
+  border-radius: 20px;
+  background-color: #ff5722;
+}
+::v-deep .el-slider__button {
+  display: none;
+}
+.scoreText {
+  color: #1686d8;
+}
+::v-deep .el-table th {
+  text-align: center;
+}
+
+::v-deep .el-table .cell {
+  text-align: center;
+}
+.statusText {
+  color: #ff5722;
+  position: absolute;
+  right: -58px;
+  top: 10px;
+}
+.hasEdit {
+  color: #ff5722;
+}
+::v-deep .el-dialog {
+  margin-top: 15% !important;
+}
+</style>
diff --git a/src/views/workAppraisal/manager.vue b/src/views/workAppraisal/manager.vue
new file mode 100644
index 0000000..a14f4d2
--- /dev/null
+++ b/src/views/workAppraisal/manager.vue
@@ -0,0 +1,163 @@
+<template>
+  <div class="appraisal-manager">
+    <el-row class="assessment-container">
+    <div class="statusText">进行中</div>
+      <el-col :span="8"  v-for="item in ongoingAssessments" :key="item.id">
+        <el-card class="card">
+          <div class="card-content">
+            <div class="flex-row jcsb">
+              <div>{{ item.title }}</div>
+            <div>考核人数：{{ item.participants }}</div>
+          </div>
+          <p>截止时间：{{ item.deadline }}</p>
+            <div class="status-actions">
+              <el-tag>进行中</el-tag>
+              <div class="action-buttons">
+                <el-button type="primary" @click="viewDetails(item.id,1)">考核评分</el-button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+    <el-row class="assessment-container">
+      <div class="statusText">已过期</div>
+      <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>{{ item.title }}</div>
+            <div>考核人数：{{ item.participants }}</div>
+          </div>
+          <p>截止时间：{{ item.deadline }}</p>
+            <div class="status-actions">
+              <el-tag type="info">已过期</el-tag>
+              <div class="action-buttons">
+                <el-button type="primary" @click="viewDetails(item.id,0)">查看详情</el-button>
+              </div>
+            </div>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+
+  </div>
+</template>
+
+<script>
+export default {
+  name: "AppraisalManager",
+  data() {
+    return {
+      ongoingAssessments: [
+        {
+          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) {
+      // 跳转到考核页面
+      console.log(`跳转到考核 ID: ${id}`);
+    },
+
+    viewDetails(id,edit) {
+      // 查看考核详情
+      this.$router.push({
+          path: "/workAppraisal/managerUser",
+          query: { id: id,edit },
+        });
+    },
+  },
+};
+</script>
+
+<style scoped>
+.appraisal-manager {
+  padding: 30px;
+  background-color: #f8f8f8;
+  height: 100vh; /* 设置整体高度 */
+}
+
+.assessment-container {
+  max-height:45%; /* 减去标题高度 */
+  overflow-y: auto; /* 允许垂直滚动 */
+}
+
+.card {
+  margin-bottom: 20px;
+  border-radius: 10px;
+  width: 80%;
+}
+
+.card-content {
+  padding:0 10px;
+  background-color: #fff;
+  border-radius: 10px;
+  /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
+}
+
+.status-actions {
+  display: flex;
+  justify-content: space-between; /* 两端对齐 */
+  align-items: center; /* 垂直居中 */
+}
+
+.status-text {
+  font-weight: bold; /* 状态文本加粗 */
+}
+
+.action-buttons {
+  display: flex;
+  gap: 10px; /* 按钮之间的间距 */
+}
+.statusText{
+  font-size: 26px;
+  margin: 20px 0;
+  font-weight: bold;
+}
+</style>
\ No newline at end of file
diff --git a/src/views/workAppraisal/managerUser.vue b/src/views/workAppraisal/managerUser.vue
new file mode 100644
index 0000000..6e80694
--- /dev/null
+++ b/src/views/workAppraisal/managerUser.vue
@@ -0,0 +1,288 @@
+<template>
+    <div class="project-list">
+      <div class="search-bar">
+        <el-form
+          :inline="true"
+          :model="searchForm"
+          class="demo-form-inline"
+          size="small"
+        >
+          <el-form-item label="考核人员" class="form-item">
+            <el-input
+              v-model="searchForm.projectLeaderName"
+              placeholder="考核人员"
+              readonly
+              @click.native="openUserSelectDialog"
+              ><el-button slot="append" icon="el-icon-s-custom"></el-button
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="状态" class="form-item">
+            <el-select v-model="searchForm.projectState" placeholder="状态" clearable>
+              <el-option
+                v-for="item in statusList"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
+          </el-form-item>
+          <el-form-item class="search-buttons">
+            <el-button type="primary" @click="onSearch">查询</el-button>
+            <el-button @click="onReset">重置</el-button>
+          </el-form-item>
+        </el-form>
+      </div>
+  
+      <div class="f1 df">
+        <CustomTable
+          :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>
+  
+  <script>
+  import CustomTable from "@/components/CustomTable.vue";
+  import SelectUser from "@/components/SelectUser.vue";
+  import { projectApi, systemApi } from "@/utils/api";
+  
+  export default {
+    components: {
+      CustomTable,
+      SelectUser,
+    },
+    data() {
+      return {
+        searchForm: {
+          projectName: "",
+          projectLeaderName: "",
+          projectLeader: "",
+          projectState: "",
+        },
+        columns: [
+          { prop: "projectName", label: "考核人员"},
+          { prop: "projectCode", label: "考核评分", sortable: true},
+          {
+            prop: "projectState",
+            label: "状态",
+            type: "status",
+            callback: (value) => {
+              if(value==1)
+              var color = "#333";
+            else 
+            var color = "#1686d68";
+
+              return `<span style="color: ${color}">${value}</span>`;
+            },
+          },
+          {
+            prop: "operation",
+            label: "操作",
+            width: "250",
+            className: "operation-column",
+          },
+        ],
+        tableData: [],
+        total: 0,
+        userSelectDialogVisible: false,
+        currentSelectedUser: [],
+        pageNum: 1, // 当前页码
+        pageSize: 10, // 每页条数
+        statusList: [
+            {label:'全部',value:''},
+            {label:'待评分',value:'0'},
+            {label:'已完成',value:'1'},
+
+        ],
+      };
+    },
+    methods: {
+      onSearch() {
+        this.fetchProjectList();
+      },
+      onReset() {
+        Object.keys(this.searchForm).forEach((key) => {
+          this.searchForm[key] = "";
+        });
+        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() {
+      this.fetchProjectList();
+    },
+  };
+  </script>
+  
+  <style lang="scss" scoped>
+  .project-list {
+    padding: 20px;
+    background-color: white;
+    height: 88vh;
+    box-sizing: border-box;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  
+  .search-bar {
+    margin-bottom: 20px;
+  }
+  
+  .demo-form-inline {
+    // display: flex;
+    // flex-wrap: nowrap;
+    // align-items: flex-start;
+  }
+  
+  .demo-form-inline .el-form-item {
+    // margin-right: 50px; /* 将间距设置为 30px */
+    margin-bottom: 0;
+  }
+  
+  .demo-form-inline .el-form-item:last-child {
+    margin-right: 0; /* 移除最后一个元素的右边距 */
+  }
+  
+  .form-item {
+    flex: 1;
+  }
+  
+  .form-item ::v-deep .el-form-item__content {
+    // width: 100%;
+  }
+  
+  .form-item ::v-deep .el-input,
+  .form-item ::v-deep .el-select {
+    // width: 100%;
+  }
+  
+  .search-buttons {
+    white-space: nowrap;
+  }
+  
+  ::v-deep .operation-buttons .el-button {
+    padding: 4px 8px;
+    margin: 0 2px;
+  }
+  
+  ::v-deep .operation-column {
+    background-color: #ffffff;
+    box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
+  }
+  
+  .el-button.is-text {
+    min-width: 32px !important;
+  }
+  
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .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>
+  
\ No newline at end of file
diff --git a/src/views/workAppraisal/normalWorker.vue b/src/views/workAppraisal/normalWorker.vue
new file mode 100644
index 0000000..fa0c445
--- /dev/null
+++ b/src/views/workAppraisal/normalWorker.vue
@@ -0,0 +1,163 @@
+<template>
+    <div class="appraisal-manager">
+      <el-row class="assessment-container">
+      <div class="statusText">进行中</div>
+        <el-col :span="8"  v-for="item in ongoingAssessments" :key="item.id">
+          <el-card class="card">
+            <div class="card-content">
+              <div class="flex-row jcsb">
+                <div>{{ item.title }}</div>
+              <div>考核人数：{{ item.participants }}</div>
+            </div>
+            <p>截止时间：{{ item.deadline }}</p>
+              <div class="status-actions">
+                <el-tag>进行中</el-tag>
+                <div class="action-buttons">
+                  <el-button type="primary" @click="viewDetails(item.id,1)">考核评分</el-button>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+      <el-row class="assessment-container">
+        <div class="statusText">已过期</div>
+        <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>{{ item.title }}</div>
+              <div>考核人数：{{ item.participants }}</div>
+            </div>
+            <p>截止时间：{{ item.deadline }}</p>
+              <div class="status-actions">
+                <el-tag type="info">已过期</el-tag>
+                <div class="action-buttons">
+                  <el-button type="primary" @click="viewDetails(item.id,0)">查看详情</el-button>
+                </div>
+              </div>
+            </div>
+          </el-card>
+        </el-col>
+      </el-row>
+  
+    </div>
+  </template>
+  
+  <script>
+  export default {
+    name: "NormalWorker",
+    data() {
+      return {
+        ongoingAssessments: [
+          {
+            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) {
+        // 跳转到考核页面
+        console.log(`跳转到考核 ID: ${id}`);
+      },
+  
+      viewDetails(id,edit) {
+        // 查看考核详情
+        this.$router.push({
+            path: "/workAppraisal/detail",
+            query: { id: id,edit,isNormal:true },
+          });
+      },
+    },
+  };
+  </script>
+  
+  <style scoped>
+  .appraisal-manager {
+    padding: 30px;
+    background-color: #f8f8f8;
+    height: 100vh; /* 设置整体高度 */
+  }
+  
+  .assessment-container {
+    max-height:45%; /* 减去标题高度 */
+    overflow-y: auto; /* 允许垂直滚动 */
+  }
+  
+  .card {
+    margin-bottom: 20px;
+    border-radius: 10px;
+    width: 80%;
+  }
+  
+  .card-content {
+    padding:0 10px;
+    background-color: #fff;
+    border-radius: 10px;
+    /* box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); */
+  }
+  
+  .status-actions {
+    display: flex;
+    justify-content: space-between; /* 两端对齐 */
+    align-items: center; /* 垂直居中 */
+  }
+  
+  .status-text {
+    font-weight: bold; /* 状态文本加粗 */
+  }
+  
+  .action-buttons {
+    display: flex;
+    gap: 10px; /* 按钮之间的间距 */
+  }
+  .statusText{
+    font-size: 26px;
+    margin: 20px 0;
+    font-weight: bold;
+  }
+  </style>
\ No newline at end of file
diff --git a/src/views/workAppraisal/taskSet.vue b/src/views/workAppraisal/taskSet.vue
new file mode 100644
index 0000000..4bc66bc
--- /dev/null
+++ b/src/views/workAppraisal/taskSet.vue
@@ -0,0 +1,572 @@
+<template>
+  <div class="project-list">
+    <div class="search-bar">
+      <el-form
+        :inline="true"
+        :model="searchForm"
+        class="demo-form-inline"
+        size="small"
+      >
+        <el-form-item label="任务名称" class="form-item">
+          <el-input v-model="searchForm.name" placeholder="任务名称"></el-input>
+        </el-form-item>
+        <el-form-item label="任务状态" class="form-item">
+          <el-select
+            v-model="searchForm.projectState"
+            placeholder="状态"
+            clearable
+          >
+            <el-option
+              v-for="item in statusList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value"
+            />
+          </el-select>
+        </el-form-item>
+        <el-form-item class="search-buttons">
+          <el-button type="primary" @click="onSearch">查询</el-button>
+          <el-button @click="onReset">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="table-actions mb10">
+      <el-button type="primary" size="mini" @click="addTask"
+        >+ 新增任务</el-button
+      >
+    </div>
+    <div class="f1 df">
+      <CustomTable
+        :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="editTask(row)"
+              type="text"
+              size="mini"
+              icon="el-icon-edit"
+              >编辑</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              icon="el-icon-setting"
+              @click="setTask(row)"
+              >指标配置</el-button
+            >
+            <el-button
+              type="text"
+              size="mini"
+              icon="el-icon-delete"
+              @click="delTask(row)"
+              >删除</el-button
+            >
+          </div>
+        </template>
+      </CustomTable>
+    </div>
+    <SelectUser
+      :dialogVisible="userSelectDialogVisible"
+      :currentSelectedUser="currentSelectedUser"
+      :showSelection="true"
+      :highligt="false"
+      @confirm="handleUserConfirm"
+      @close="handleUserClose"
+    />
+    <el-dialog
+      :title="isEdit ? '编辑考核任务' : '新增考核任务'"
+      :visible.sync="dialogVisible1"
+      width="25%"
+    >
+      <div>
+        <el-form
+          :model="taskData"
+          size="small"
+          ref="taskFormRef"
+          :rules="rules"
+          label-width="100px"
+        >
+          <el-form-item label="任务名称" class="form-item" prop="name">
+            <el-input
+              v-model="taskData.name"
+              placeholder="0/20"
+              style="width: 90%"
+            ></el-input>
+          </el-form-item>
+          <el-form-item label="考核人员" class="form-item" prop="userName">
+            <el-input
+              v-model="taskData.userName"
+              placeholder="考核人员"
+              readonly
+              style="width: 90%"
+              @click.native="openUserSelectDialog"
+              ><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-date-picker
+              v-model="taskData.time"
+              type="date"
+              style="width: 90%"
+              placeholder="选择日期"
+            >
+            </el-date-picker>
+          </el-form-item>
+        </el-form>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible1 = false">取 消</el-button>
+        <el-button type="primary" @click="saveTask">确 定</el-button>
+      </span>
+    </el-dialog>
+    <el-dialog title="配置指标和权重" :visible.sync="dialogVisible2">
+      <div class="modal">
+        <div class="left">
+          <div class="setText">累计权重</div>
+          <el-collapse v-model="letfValue" :accordion="true" style="height: 300px;">
+            <el-collapse-item
+              v-for="(item, index) in scoreList"
+              :key="index"
+              :name="item.name"
+            >
+              <template #title>
+                <div class="jcsb flex-row contentTitle">
+                  <span class="setTitle">{{ item.title }}</span>
+                  <span class="statusText">{{ item.score }}%</span>
+                </div>
+              </template>
+              <div>
+                <div
+                  v-for="(item, index) in item.list"
+                  :key="index"
+                  class="flex-row jcsb leftSub"
+                >
+                  <div>{{ item.name }}</div>
+                  <div class="statusText">{{ item.score }}%</div>
+                </div>
+              </div>
+            </el-collapse-item>
+          </el-collapse>
+          <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)
+              }}%
+            </div>
+          </div>
+        </div>
+        <div class="right">
+          <div class="flex-row jcsb" style="margin-bottom: 10px">
+            <div style="width: 50%">指标</div>
+            <div class="center" style="width: 50%">权重占比</div>
+          </div>
+          <div>
+            <div
+              v-for="(item, index) in (
+                scoreList.find((ele) => ele.name == letfValue) || {}
+              ).list"
+              :key="index"
+              style="margin-bottom: 10px"
+              class="flex-row jcsb aic"
+            >
+              <div style="width: 50%">{{ item.name }}</div>
+              <div class="center" style="width: 50%">
+                <el-slider v-model="item.score" :max="20"></el-slider>
+                <div class="flex-row jcsb scoreBox" style="margin-left: 15px">
+                  <div>0%</div>
+                  <div class="scoreText">{{ item.score }}%</div>
+                  <div>20%</div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="dialogVisible2 = false">取消</el-button>
+        <el-button type="primary" @click="save">保存</el-button>
+      </span>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import CustomTable from "@/components/CustomTable.vue";
+import SelectUser from "@/components/SelectUser.vue";
+import { projectApi, systemApi } from "@/utils/api";
+
+export default {
+  components: {
+    CustomTable,
+    SelectUser,
+  },
+  data() {
+    return {
+      searchForm: {
+        name: "",
+        status: "",
+      },
+      columns: [
+        { prop: "projectName", label: "任务名称" },
+        { prop: "projectCode", label: "考核人数" },
+        {
+          prop: "projectState",
+          label: "任务状态",
+          type: "status",
+          callback: (value) => {
+            if (value == 1) var color = "#333";
+            else var color = "#1686d68";
+
+            return `<span style="color: ${color}">${value}</span>`;
+          },
+        },
+        { prop: "projectCode", label: "创建时间" },
+        { prop: "projectCode", label: "截至时间" },
+
+        {
+          prop: "operation",
+          label: "操作",
+          width: "250",
+          className: "operation-column",
+        },
+      ],
+      tableData: [],
+      total: 0,
+      userSelectDialogVisible: false,
+      currentSelectedUser: [],
+      pageNum: 1, // 当前页码
+      pageSize: 10, // 每页条数
+      statusList: [
+        { label: "全部", value: "" },
+        { label: "待评分", value: "0" },
+        { label: "已完成", value: "1" },
+      ],
+      dialogVisible1: false,
+      isEdit: false,
+      taskData: {
+        name: "",
+        time: "",
+        userName: "",
+        userId: [],
+      },
+      rules: {
+        name: [
+          { required: true, message: "请输入活动名称", trigger: "blur" },
+          { min: 1, max: 20, message: "长度在 3 到 5 个字符", trigger: "blur" },
+        ],
+        userName: [
+          { required: true, message: "请选择考核人员", trigger: "blur" },
+        ],
+        time: [{ required: true, message: "请选择截止时间", trigger: "blur" }],
+      },
+      dialogVisible2: false,
+      letfValue: "",
+      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(
+            (total, ele) => total + (ele.score || 0),
+            0
+          );
+        });
+      },
+      deep: true,
+    },
+  },
+  methods: {
+    onSearch() {
+      this.fetchProjectList();
+    },
+    onReset() {
+      Object.keys(this.searchForm).forEach((key) => {
+        this.searchForm[key] = "";
+      });
+      this.fetchProjectList();
+    },
+    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.taskData.userName = data.map((ele) => ele.nickName);
+      this.taskData.userId = data.map((ele) => ele.userId);
+    },
+    handleUserClose() {
+      this.userSelectDialogVisible = false;
+    },
+    addTask() {
+      this.isEdit = false;
+      this.dialogVisible1 = true;
+    },
+    editTask(row) {
+      this.isEdit = true;
+      this.dialogVisible1 = true;
+      this.taskData = row;
+    },
+    setTask(row) {
+      this.dialogVisible2 = true;
+    },
+    delTask() {
+      this.$confirm(
+        "删除任务及绩效数据，该操作不可逆，请谨慎操作",
+        "确认删除任务",
+        {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
+        }
+      ).then(() => {
+        this.$message({
+          type: "success",
+          message: "删除成功!",
+        });
+      });
+    },
+    saveTask() {
+      this.$refs.taskFormRef.validate((valid) => {
+        if (valid) {
+          alert("submit!");
+        } else {
+          console.log("error submit!!");
+          return false;
+        }
+      });
+    },
+  },
+  mounted() {
+    this.fetchProjectList();
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.project-list {
+  padding: 20px;
+  background-color: white;
+  height: 88vh;
+  box-sizing: border-box;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+}
+
+.search-bar {
+  margin-bottom: 20px;
+}
+
+.demo-form-inline {
+  // display: flex;
+  // flex-wrap: nowrap;
+  // align-items: flex-start;
+}
+
+.demo-form-inline .el-form-item {
+  // margin-right: 50px; /* 将间距设置为 30px */
+  margin-bottom: 0;
+}
+
+.demo-form-inline .el-form-item:last-child {
+  margin-right: 0; /* 移除最后一个元素的右边距 */
+}
+
+.form-item {
+  flex: 1;
+}
+
+.form-item ::v-deep .el-form-item__content {
+  // width: 100%;
+}
+
+.form-item ::v-deep .el-input,
+.form-item ::v-deep .el-select {
+  // width: 100%;
+}
+
+.search-buttons {
+  white-space: nowrap;
+}
+
+::v-deep .operation-buttons .el-button {
+  padding: 4px 8px;
+  margin: 0 2px;
+}
+
+::v-deep .operation-column {
+  background-color: #ffffff;
+  box-shadow: -2px 0 5px rgba(241, 112, 6, 0.1);
+}
+
+.el-button.is-text {
+  min-width: 32px !important;
+}
+
+.dialog-footer {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.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;
+}
+::v-deep .el-dialog {
+  margin-top: 10% !important;
+}
+.modal {
+  display: flex;
+  border-bottom: 1px solid #ccc;
+  border-top: 1px solid #ccc;
+
+}
+.left {
+  width: 40%;
+  padding: 20px;
+  border-right: 1px solid #ccc;
+  height: 450px;
+  overflow: auto;
+}
+.right {
+  width: 60%;
+  padding: 20px 40px;
+  height: 450px;
+  overflow: auto;
+  div.center {
+    text-align: center;
+    position: relative;
+  }
+}
+.scoreBox {
+  position: absolute;
+  top: 45px;
+  right: -20px;
+}
+::v-deep .el-slider__runway {
+  height: 20px;
+  border-radius: 20px;
+  margin: 15px !important;
+  /* width: 95%; */
+}
+::v-deep .el-slider__bar {
+  height: 20px;
+  border-radius: 20px;
+  background-color: #ff5722;
+}
+::v-deep .el-slider__button {
+  display: none;
+}
+.scoreText {
+  color: #1686d8;
+}
+.setText {
+  margin-bottom: 20px;
+
+  text-align: right;
+}
+.leftSub {
+  padding-right: 20px;
+  margin-bottom: 5px;
+}
+.setTitle {
+  font-weight: bold;
+}
+::v-deep .el-collapse-item__content {
+  padding-bottom: 10px;
+}
+::v-deep .el-collapse-item__header {
+}
+.contentTitle {
+}
+.statusText {
+  color: #ff5722;
+}
+::v-deep .el-collapse{
+    border: none !important;
+}
+</style>