You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
120 lines
3.0 KiB
120 lines
3.0 KiB
<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("/vendors/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:'vendorName',label:'厂商'}, |
|
{id:3,prop:'vendorType',label:'厂商类型'}, |
|
{id:4,prop:'vendorStatus',label:'状态'}, |
|
{id:6,prop:'vendorPeople',label:'联系人'}, |
|
{id:7,prop:'vendorIphone',label:'联系方式'}, |
|
{id:8,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> |