fe-manage/src/components/student/TableModelStudent.vue

<template>
  <div class="CommonStudent">
    <a-drawer
      :visible="visiable"
      class="drawerStyle ProjCheckship"
      placement="right"
      width="40%"
    >
      <div class="drawerMain" id="ProjCheckship" style="">
        <div class="header">
          <div class="headerTitle">权限名单</div>
          <img
            style="width: 29px; height: 29px; cursor: pointer"
            src="../../assets/images/basicinfo/close.png"
            @click="closeDrawer"
          />
        </div>
        <div class="TableStudent">
          <a-row
            type="flex"
            gutter="12"
            style="padding-left: 20px; margin-right: 0px"
          >
            <a-col>
              <a-form-item title="姓名：">
                <a-input
                  class="cus-input"
                  v-model:value="searchName"
                  placeholder="请输入姓名"
                />
              </a-form-item>
            </a-col>
            <a-col>
              <a-button
                class="cus-btn"
                style="background: #4ea6ff; color: #fff; width: 100px"
                @click="search"
                :loading="stuAsyncLoading"
              >
                <template #icon
                  ><img
                    style="margin-right: 10px"
                    src="../../assets/images/courseManage/search0.png"
                  />
                </template>
                搜索
              </a-button>
            </a-col>
            <a-col :span="2">
              <a-button
                class="cus-btn"
                style="width: 100px;background: #4ea6ff;color: #fff;"
                @click="reset"
              >
                <template #icon
                  ><img
                    style="margin-right: 10px"
                    src="../../assets/images/leveladd/reset0.png"
                  />
                </template>
                重置
              </a-button>
            </a-col>
          </a-row>
          <div style="margin-top: 20px">
            <a-table
              :columns="columns"
              :data-source="studentList"
              :pagination="stuPagination"
              :loading="loading"
              row-key="id"
            >
              <template #action="{ record }">
                <a-space :size="2">
                  <slot name="extension" v-bind:data="{ record }"></slot>
                  <a-button
                    v-if="
                      record.type !== 6 &&
                      record.type !== 9 &&
                      record.type !== 12
                    "
                    @click="del(record.id)"
                    type="link"
                    danger
                    >删除</a-button
                  >
                </a-space>
              </template>
            </a-table>
          </div>
        </div>
        <div class="btnn">
          <button class="btn2" @click="closeDrawer">取消</button>
          <button class="btn2" @click="closeDrawer">确定</button>
        </div>
      </div>
    </a-drawer>
    <a-button @click="openDrawer" type="link"><slot></slot></a-button>
  </div>

  <!-- 删除弹窗 -->
  <a-modal
    v-model:visible="deleteModalVisible"
    :footer="null"
    wrapClassName="deleteModal1"
    centered="true"
  >
    <div class="delete">
      <div class="del_header"></div>
      <div class="del_main">
        <div class="header">
          <div class="icon"></div>
          <span>提示</span>
          <div class="close_exit" @click="closeSameModal"></div>
        </div>
        <div class="body">
          <span>确定删除?</span>
          <span style="margin-top: 20px">数据删除后不可恢复！</span>
        </div>
        <div class="del_btnbox">
          <div class="del_btn btn1" @click="closeSameModal">
            <div class="btnText">取消</div>
          </div>
          <div class="del_btn btn2" @click="sureSameModal">
            <div class="btnText">确定</div>
          </div>
        </div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import {
  computed,
  defineProps,
  defineExpose,
  ref,
  watch,
} from "vue";
import { usePage } from "@/api/request";
import { STUDENT_LIST } from "@/api/apis";
import { delStudentList } from "@/api/index1";
import {useAsyncStu} from "@/utils/useCommon";

const props = defineProps({
  type: Number,
  id: String,
  stage: {
    type: Array,
    default: () => [],
  },
  types: {
    type: Array,
    default: () => [],
  },
});

const visiable = ref(false);

const initParams = {
  studentName: "",
  pageNo: 1,
  pageSize: 10,
  type: props.type || "",
  types: props.types,
  pid: props.id || "",
};

const searchParams = ref(initParams);
const searchName = ref("");

const columns = ref([
  {
    title: "姓名",
    dataIndex: "studentName",
    key: "studentName",
    width: 30,
    align: "center",
    ellipsis: true,
  },
  {
    title: "工号",
    dataIndex: "studentUserNo",
    key: "studentUserNo",
    width: 50,
    align: "center",
    ellipsis: true,
  },
  {
    title: "部门",
    dataIndex: "studentDepartName",
    key: "studentDepartName",
    width: 80,
    align: "center",
    ellipsis: true,
  },
  {
    title: "权限",
    dataIndex: "type",
    key: "type",
    width: 30,
    align: "center",
    customRender: ({ record: { type } }) =>
      ({
        4: "查看权",
        5: "管理权",
        6: "归属权",
        7: "查看权",
        8: "管理权",
        9: "归属权",
        10: "查看权",
        11: "管理权",
        12: "归属权",
      }[type]),
  },
  {
    title: "操作",
    dataIndex: "operation",
    key: "operation",
    width: 50,
    align: "center",
    slots: { customRender: "action" },
  },
]);

const {
  data: studentList,
  fetch: searchStu,
  total,
  loading,
} = usePage(STUDENT_LIST, searchParams);

const { loading: stuAsyncLoading } = useAsyncStu(props.id, props.types.join(","), searchStu);


const stuPagination = computed(() => ({
  total: total.value,
  showSizeChanger: false,
  current: searchParams.value.pageNo,
  pageSize: searchParams.value.pageSize,
  onChange: changePagination,
}));

const openDrawer = () => {
  visiable.value = true;
};

const changePagination = (page) => {
  searchParams.value.pageNo = page;
};

function search() {
  searchParams.value.studentName = searchName.value;
  searchParams.value.pageNo = 1;
  searchStu()
}

const deleteModalVisible = ref(false);
const deleteId = ref(null);
function del(id) {
  deleteModalVisible.value = true;
  deleteId.value = id;
}

//确定删除
const sureSameModal = () => {
  if (deleteId.value) {
    loading.value = true;
    delStudentList({ ids: [deleteId.value] }).then(() => searchStu());
    deleteModalVisible.value = false;
  }
};
//取消
const closeSameModal = () => {
  deleteModalVisible.value = false;
  deleteId.value = null;
};

const closeDrawer = () => {
  visiable.value = false;
};

function reset() {
  searchParams.value = initParams;
  searchName.value = "";
  searchParams.value.pageNo = 1;
  searchStu()
}

watch(visiable, () => {
  visiable.value && searchStu();
  searchParams.value = initParams;
});

defineExpose({
  searchStu,
  loading,
});
</script>
<style lang="scss">
.cus-btn {
  width: 100%;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 16px;
  border: 1px solid #4ea6ff;
  border-radius: 8px;
  background: #4ea6ff;
  cursor: pointer;
  color: #fff;
}

.white {
  background: #fff;
  color: #4ea6ff;
}

.cus-input {
  height: 40px;
  border-radius: 8px;
}

.cus-select {
  height: 40px;
  border-radius: 8px;
}

.CommonStudent {
  .ant-btn-primary {
    background-color: #4ea6ff !important;
  }

  .cus-select {
    height: 40px;
    border-radius: 8px;
  }

  .tableBox .ant-table-row .ant-table-cell {
    height: 48px;
    font-size: 14px;
    font-weight: 400;
    color: #4f5156;
    line-height: 29px;
    padding: 0px;
  }

  .tableBox .ant-table-thead tr th {
    font-size: 14px;
  }

  .ant-tabs-tabpane {
    height: 100%;
  }

  .ant-tabs {
    overflow: visible;
  }

  .right1 {
    border-left: 1px solid #f2f6fe;
    margin-left: 20px;

    .onerow {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-right: 40px;
      flex-wrap: wrap;

      width: 100%;

      .onleft {
        display: flex;
        text-align: center;

        .already {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
          margin-left: 32px;
          white-space: nowrap;
          // margin-bottom: 20px;
        }

        .count {
          color: #4ea6ff;
          font-size: 16px;
          margin: 0 6px;
        }

        .peo {
          color: rgba(51, 51, 51, 1);
          font-size: 16px;
          font-weight: 500;
        }
      }

      .clbox {
        margin-right: 50px;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        width: 104px;
        height: 32px;
        border-radius: 4px;
        background: #4ea6ff;

        .colose {
          width: 16px;
          height: 16px;
          // border-radius: 8px;
          // background: #ffffff;
          // position: relative;
          background-image: url(../../assets/images/basicinfo/ch.png);
          background-size: 100%;
          margin-right: 4px;
        }

        .allclear {
          color: rgba(255, 255, 255, 1);
          font-size: 14px;
        }
      }
    }

    .selecteds {
      display: flex;
      flex-wrap: wrap;
      margin-left: 32px;

      .person {
        width: 100%;
        margin-top: 20px;
        border-top: 1px solid #f2f6fe;
      }

      .chose {
        width: 64px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .ch {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .ifsw {
        display: flex;
        align-items: end;
        justify-content: center;
        color: #4ea6ff;
      }

      .sw {
        display: flex;
        align-items: center;
        justify-content: center;
        text-align: justify;
        color: #4ea6ff;
        margin-top: 23px;
        margin-left: 10px;
      }

      .dept {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose1 {
        //width: 90px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch1 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }

      .group {
        width: 100%;
        margin-top: 30px;
        border-top: 1px solid #f2f6fe;
      }

      .chose2 {
        //width: 120px;
        height: 24px;
        margin-top: 25px;
        margin-right: 25px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 2px;
        border: 1px solid rgba(56, 139, 225, 1);
        color: rgba(56, 139, 225, 1);
        font-size: 12px;
        position: relative;

        .span {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }

        .ch2 {
          position: absolute;
          width: 18px;
          height: 18px;
          background-image: url(../../assets/images/basicinfo/ch.png);
          right: -8px;
          top: -8px;
        }
      }
    }
  }
}
.deleteModal1 {
  .ant-modal {
    width: 424px !important;
    height: 258px !important;

    .ant-modal-content {
      width: 424px !important;
      height: 258px !important;

      .ant-modal-body {
        width: 424px !important;
        height: 258px !important;
        padding: 0 !important;

        .delete {
          z-index: 999;
          width: 424px;
          height: 258px;
          background: #ffffff;
          box-shadow: 0px 1px 35px 0px rgba(118, 136, 166, 0.21);
          border-radius: 4px;

          // position: absolute;
          // left: 50%;
          // top: 10%;
          // transform: translate(-50%, -50%);
          .del_header {
            position: absolute;
            width: calc(100%);
            height: 68px;
            background: linear-gradient(
              rgba(78, 166, 255, 0.2) 0%,
              rgba(78, 166, 255, 0) 100%
            );
          }

          .del_main {
            width: 100%;
            position: relative;

            .header {
              display: flex;
              align-items: center;
              padding-top: 20px;
              padding-left: 26px;
              font-size: 16px;

              .icon {
                width: 16px;
                height: 16px;
                margin-right: 10px;
                background-image: url(@/assets/images/taskpage/gan.png);
                background-size: 100% 100%;
              }

              .close_exit {
                position: absolute;
                right: 42px;
                cursor: pointer;
                width: 20px;
                height: 20px;
                background-image: url(@/assets/images/coursewareManage/close.png);
                background-size: 100% 100%;
              }
            }

            .body {
              width: 100%;
              margin: 34px auto 56px auto;
              display: flex;
              justify-content: center;
              align-items: center;
              flex-direction: column;
              // background-color: red;
              position: relative;

              .back {
                position: absolute;
                top: 30px;
                font-size: 12px;
                font-weight: 400;
                color: #666666;
              }
            }

            .del_btnbox {
              display: flex;
              margin: 30px auto;
              justify-content: center;

              .del_btn {
                width: 100px;
                height: 40px;
                background: rgba(64, 158, 255, 0);
                border-radius: 8px;
                display: flex;
                align-items: center;
                justify-content: center;

                flex-shrink: 0;
                cursor: pointer;

                .btnText {
                  font-size: 14px;
                  font-weight: 400;
                  line-height: 40px;
                }
              }

              .btn1 {
                border: 1px solid rgba(64, 158, 255, 1);
                color: #4ea6ff;
                margin-right: 14px;
              }

              .btn2 {
                background-color: #4ea6ff;
                color: #ffffff;
              }
            }
          }
        }
      }
    }
    .ant-modal-close-x {
      display: none;
    }
  }
}
</style>