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"
              >
                <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 white" style="width: 100px" @click="reset">
                <template #icon><img style="margin-right: 10px" src="../../assets/images/leveladd/reset.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="btn1" @click="closeDrawer">取消</button>
          <button class="btn2" @click="closeDrawer">确定</button>
        </div>
      </div>
    </a-drawer>
    <div @click="openDrawer">
      <slot></slot>
    </div>
  </div>
</template>
<script setup>
import {computed, createVNode, defineProps, defineExpose, ref, watch} from "vue";
import {usePage} from "@/api/request";
import {STUDENT_LIST} from "@/api/apis";
import {delStudentList} from "@/api/index1";
import {ExclamationCircleOutlined} from "@ant-design/icons-vue";
import {Modal} from "ant-design-vue";

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 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
}
function del(id) {
  Modal.confirm({
    title: () => '确定删除?',
    icon: () => createVNode(ExclamationCircleOutlined),
    content: () => '数据删除后不可恢复！',
    okText: () => '确定',
    okType: 'danger',
    cancelText: () => '取消',
    onOk() {
      id && delStudentList({ids: [id]}).then(() => searchStu())
    },
  });
}

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

function reset(){
  searchParams.value = initParams
  searchName.value=''
}

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;
        }
      }
    }
  }
}
</style>