cc-officialweb-admin/src/view/serve/serves.vue

<template>
  <div>
    <el-card>
      <!-- 添加el-dialog组件 -->
      <el-button type="primary"
                 @click="() => router.push({ path: '/serves/add'})">添加
      </el-button>
      <el-table :data="tableData" border style="width: 100%;margin-top:20px">
        <el-table-column label="序号" width="60">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column prop="title" label="名称" width="180">
          <template #default="scope">
            {{ scope.row.title }}
          </template>
        </el-table-column>
        <el-table-column prop="synopsis" label="简介" width="180">
          <template #default="scope">
            {{ scope.row.synopsis }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="scope">
            <el-button type="danger" size="small" @click="deleteServe(scope.row.ID)">删除</el-button>
            <!--            <el-button type="primary" size="small" @click="deleteResource(scope.row.ID)">修改</el-button>-->
            <el-button size="small"
                       @click="() => router.push({ path: '/serves/detail', query: { id: scope.row.ID } })">详情
            </el-button>

          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination style="margin-top:20px" :current-page="searchForm.page" :page-size="searchForm.size"
                     :total="total"
                     @current-change="handleCurrentChange"/>
    </el-card>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";
import {ElMessage, ElMessageBox} from 'element-plus';
import {useRouter} from 'vue-router'
import serve from "../../api/serve.js";
const router = useRouter();
// Dom 挂载之后
onMounted(() => {
  getServeAll();
  getServeType();
})
// 资源数据
const typeMapping = {
  recruit: '招募',
  about: '关于我们',
}
const showUpload = ref(false);
const value = ref('');
const showUploadDialog = ref(false);
let tableData = ref([]);
let total = ref(0);
const toggleUpload = () => {
  showUpload.value = !showUpload.value;
};
// 搜索条件
const searchForm = reactive({
  page: 1,
  size: 5,
  desc: 'created_at desc'
})
const ServeType = reactive([{}])
// 获取资源列表
const getServeAll = async () => {
  const res = await serve.getAllService(searchForm);
  tableData.value = res.data.Data.Data;
  total.value = res.data.Data.Size;
}

const handleSizeChange = (size) => {
  searchForm.size = size;
  getServeAll();
}
const handleCurrentChange = (current) => {
  searchForm.page = current;
  getServeAll();
}
const searchUser = () => {
  searchForm.current = 1;
  getServeAll();
}
const getServeType = async () => {
  const res = await serve.GetServiceType();
  ServeType.value = res.data.Data;
  console.log(ServeType.value)
}
// 删除资源信息
const deleteServe = (id) => {
  ElMessageBox.confirm(
      '确定要删除该资源信息吗?',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
  ).then(async () => {
    const res = await serve.deleteService({id: id});
    if (res.data.Code === 200) {
      ElMessage.success("删除成功")
      await getServeAll();
    } else {
      ElMessage.error(res.data.Msg)
    }
  }).catch(() => {
    ElMessage({
      type: 'info',
      message: '取消删除',
    })
  })
}
</script>

<style lang="scss" scoped></style>