aiwen/src/pages/studoc/studoc.vue

<script setup>
import { ref, reactive } from "vue";
import { Plus, Calendar, Search, Delete } from "@element-plus/icons-vue";
import { ElMessage, ElMessageBox } from "element-plus";
import user from "~/store/user";
import { useRouter } from "vue-router";

const router = useRouter();

const pageNum = ref(1);
const totalNum = ref("");
const searchValue = ref("");
const tableData = ref("");
const InitData = () => {
  request({
    url: "/dyaw/xlfw_xsda/index",
    data: {
      page: pageNum.value,
      keyword: searchValue.value,
    },
  })
    .then((res) => {
      if (res.code == "1") {
        tableData.value = res.data.page_data;
        pageNum.value = Number(res.data.total_page);
        totalNum.value = Number(res.data.total_rows);
      }
    })
    .catch((err) => {
      console.log(err);
    });
};
InitData();

//多选
const multipleSelection = ref([]);
const handleSelectionChange = (val) => {
  multipleSelection.value = val;
};



//批量删除
const batchDel = () => {
  if (multipleSelection.value.length == 0) {
    ElMessage({
      showClose: true,
      message: "请至少选择一项~",
      type: "error",
    });
  } else {
    let tempArr = [];
    multipleSelection.value.forEach((item) => {
      tempArr.push(item.dxx_id);
    });
    request({
      url: "/dyaw/xlfw_xsda/delete",
      data: {
        dxx_id: tempArr.join(),
      },
    })
      .then((res) => {
        if (res.code == "1") {
          ElMessage({
            message: res.msg,
            type: "success",
          });
          InitData();
        }
      })
      .catch((err) => {
        console.log(err);
      });
  }
};
//按钮-搜索
const searchBtn = () => {
  InitData();
};
//按钮-全部档案(跳转)
const allFile = () => {
  router.push("studocAll");
};
//表格选项-详情(跳转)
const handlDetailClick = (item) => {
  router.push({
    path: "studocSingle",
    query: {
      userId: item.user_id,
    },
  });
};
//表格选项-删除
const handleDel = (item) => {
  request({
    url: "/dyaw/xlfw_xsda/delete",
    data: {
      dxx_id: item.dxx_id,
    },
  })
    .then((res) => {
      if (res.code == "1") {
        ElMessage({
          showClose: true,
          message: res.msg,
          type: "success",
        });
        InitData();
      }
    })
    .catch((err) => {
      console.log(err);
    });
};

//分页
const handleCurrentChange = (val) => {
  pageNum.value = val;
  InitData();
};
</script>

<template>
  <div class="studocList">
    <div class="allOptions">
      <el-button type="danger" :icon="Delete" round @click="batchDel">批量删除</el-button>
      <el-input v-model="searchValue" style="width: 10%; margin: 0 5px 0 20px" placeholder="关键词搜索" :prefix-icon="Search"
        round />
      <el-button type="primary" round @click="searchBtn">搜索</el-button>
      <el-button type="primary" round @click="allFile">全部档案</el-button>
    </div>
    <div class="allTables">
      <el-table ref="multipleTableRef" :data="tableData" stripe @selection-change="handleSelectionChange"
        style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" width="80" label="序号" />
        <el-table-column prop="dxx_user_realname" label="姓名" />
        <el-table-column prop="dxx_school_name" label="学校" />
        <el-table-column prop="dxx_grade_name" label="年级" />
        <el-table-column prop="dxx_class_name" label="班级" />
        <el-table-column prop="dxx_zxcs" label="咨询次数" />
        <el-table-column prop="dxx_dasl" label="档案数量" />
        <el-table-column fixed="right" label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handlDetailClick(scope.row)">详情</el-button>
            <el-button link type="primary" size="small" @click="handleDel(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="pag">
        <el-pagination class="pageC" background small layout=" prev, pager, next" :total="totalNum"
          @current-change="handleCurrentChange" />
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.studocList {
  background: #fff;
  box-sizing: border-box;
  padding: 1%;
}

.allOptions {
  text-align: right;
  margin-bottom: 10px;
}

.allTables {
  margin-top: 20px;
}

.pag {
  margin: 20px 0;
  overflow: hidden;
}

.pageC {
  float: right;
}
</style>