SSMWeb/src/views/admin1/me/index.vue

<script setup>
import { ArrowRight, Search } from '@element-plus/icons-vue'
import {getData} from '@/api/common'
import {onMounted, ref} from "vue";
import {useRoute} from "vue-router";
import {ElMessage} from "element-plus";

const Router = useRoute()
const total = 0
const tableData = ref([])

// TODO 初始化数据
onMounted(()=>{
    getWorkListData("/work/list")
})

// TODO 获取后端数据
const getWorkListData = async (url) => {
  let { data } = await getData(url)
  ElMessage.success("获取成功")
  if (data) return tableData.value = data
}
// TODO 渲染后端数据

const tableColumn = ref([
    {id:1,prop:'id',label:'序号'},
    {id:2,prop:'workId',label:'部门编号'},
    {id:3,prop:'workName',label:'部门名称'},
    {id:4,prop:'workDescription',label:'备注'},
    {id:5,prop:'createDate',label:'部门创建时间'},
])
// TODO 添加 添加操作弹窗

// TODO 返回操作状态

</script>

<template>
  <!-- 面包屑区域 -->
  <el-breadcrumb :separator-icon="ArrowRight">
    <el-breadcrumb-item :to="{ path: '/admin1' }" @click="">系统管理员</el-breadcrumb-item>
      <el-breadcrumb-item>{{ Router.meta.title }}</el-breadcrumb-item>
  </el-breadcrumb>

  <!-- 卡片区域 -->
  <el-card class="box-card">

    

















    <!-- <el-row :gutter="20"> -->
      <!-- 搜索区域 -->
      <!-- <el-col :span="5">
        <el-input placeholder="Please input" class="input-with-select">
          <template #append>
            <el-button :icon="Search" round>Search</el-button>
          </template>
        </el-input>
      </el-col> -->
      <!-- 添加按钮区域 -->
      <!-- <el-col :span="4">
        <el-button type="primary">添加部门</el-button>
      </el-col>

    </el-row> -->
    <!-- 部门列表区 -->
    <!-- <el-table
            :data="tableData"
            border
            stripe
            :height="680"
    >
        <el-table-column v-for="{id,prop,label} in tableColumn" :prop="prop" :key="id" :label="label" :width="label === '序号' ? 100:''" align="center" />
        <el-table-column fixed="right" label="操作" align="center" width="240">
            <template #default="scope">
                <el-button link type="primary" size="small" @click="">操作</el-button>
            </template>
        </el-table-column>
    </el-table> -->
  <!--   分页区   -->
    <!-- <el-pagination
            background
            @size-change=""
            @current-change=""
            :current-page="currentPage1"
            :page-sizes="[15,30,45,60]"
            :page-size="15"
            layout="total,sizes,prev, pager,next,jumper"
            :total="1000"
    >

    </el-pagination> -->
  </el-card>
</template>

<style scoped lang="less">
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 16px;
}

.el-card {
  width: 100% !important;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
}

.el-table{
  margin: 15px 0 !important;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;
}
</style>