pms-front/src/views/workAppraisal/managerUser.vue

<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>