Implement ISRM and SRM management views, including internal demand, purchase, inventory, supplier, contract, evaluation, and report functionalities. Update router configuration to support new views and enhance layout with appropriate icons and styles.
This commit is contained in:
173
src/views/srm/ContractView.vue
Normal file
173
src/views/srm/ContractView.vue
Normal file
@@ -0,0 +1,173 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
|
||||
|
||||
interface Contract {
|
||||
id: number
|
||||
contractNo: string
|
||||
supplier: string
|
||||
amount: number
|
||||
startDate: string
|
||||
endDate: string
|
||||
status: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Contract[]>([
|
||||
{
|
||||
id: 1,
|
||||
contractNo: 'CT202401001',
|
||||
supplier: 'ABC科技有限公司',
|
||||
amount: 500000,
|
||||
startDate: '2024-01-01',
|
||||
endDate: '2024-12-31',
|
||||
status: '执行中',
|
||||
createTime: '2024-01-01',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
contractNo: 'CT202401002',
|
||||
supplier: 'XYZ办公用品公司',
|
||||
amount: 100000,
|
||||
startDate: '2024-01-15',
|
||||
endDate: '2024-12-31',
|
||||
status: '执行中',
|
||||
createTime: '2024-01-15',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 30,
|
||||
})
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
待签署: 'warning',
|
||||
执行中: 'primary',
|
||||
已到期: 'info',
|
||||
已终止: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="contract-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">合同管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="合同编号/供应商名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="待签署" value="待签署" />
|
||||
<el-option label="执行中" value="执行中" />
|
||||
<el-option label="已到期" value="已到期" />
|
||||
<el-option label="已终止" value="已终止" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Plus" @click="ElMessage.info('创建合同')">创建合同</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="contractNo" label="合同编号" width="150" />
|
||||
<el-table-column prop="supplier" label="供应商" width="180" />
|
||||
<el-table-column prop="amount" label="合同金额" width="120">
|
||||
<template #default="scope">
|
||||
<span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.amount.toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="startDate" label="开始日期" width="120" />
|
||||
<el-table-column prop="endDate" label="结束日期" width="120" />
|
||||
<el-table-column prop="status" label="状态" width="120">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="120" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Document" @click="ElMessage.info('查看合同')">查看</el-button>
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑合同')">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除合同')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.contract-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
210
src/views/srm/EvaluationView.vue
Normal file
210
src/views/srm/EvaluationView.vue
Normal file
@@ -0,0 +1,210 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Search, Star, Edit } from '@element-plus/icons-vue'
|
||||
|
||||
interface Evaluation {
|
||||
id: number
|
||||
supplier: string
|
||||
period: string
|
||||
quality: number
|
||||
delivery: number
|
||||
service: number
|
||||
price: number
|
||||
total: number
|
||||
level: string
|
||||
evaluator: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Evaluation[]>([
|
||||
{
|
||||
id: 1,
|
||||
supplier: 'ABC科技有限公司',
|
||||
period: '2024年Q1',
|
||||
quality: 95,
|
||||
delivery: 90,
|
||||
service: 92,
|
||||
price: 88,
|
||||
total: 91.25,
|
||||
level: '优秀',
|
||||
evaluator: '采购部',
|
||||
createTime: '2024-01-15',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
supplier: 'XYZ办公用品公司',
|
||||
period: '2024年Q1',
|
||||
quality: 85,
|
||||
delivery: 88,
|
||||
service: 90,
|
||||
price: 92,
|
||||
total: 88.75,
|
||||
level: '良好',
|
||||
evaluator: '采购部',
|
||||
createTime: '2024-01-14',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
period: '',
|
||||
level: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 20,
|
||||
})
|
||||
|
||||
const getLevelType = (level: string) => {
|
||||
const map: Record<string, string> = {
|
||||
优秀: 'success',
|
||||
良好: 'primary',
|
||||
一般: 'warning',
|
||||
差: 'danger',
|
||||
}
|
||||
return map[level] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="evaluation-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">供应商评估</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="供应商名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="评估周期">
|
||||
<el-select v-model="searchForm.period" placeholder="全部" clearable style="width: 150px">
|
||||
<el-option label="2024年Q1" value="2024年Q1" />
|
||||
<el-option label="2024年Q2" value="2024年Q2" />
|
||||
<el-option label="2024年Q3" value="2024年Q3" />
|
||||
<el-option label="2024年Q4" value="2024年Q4" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="等级">
|
||||
<el-select v-model="searchForm.level" placeholder="全部" clearable style="width: 100px">
|
||||
<el-option label="优秀" value="优秀" />
|
||||
<el-option label="良好" value="良好" />
|
||||
<el-option label="一般" value="一般" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', period: '', level: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Edit" @click="ElMessage.info('创建评估')">创建评估</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="supplier" label="供应商" width="180" />
|
||||
<el-table-column prop="period" label="评估周期" width="120" />
|
||||
<el-table-column prop="quality" label="质量" width="100">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.quality" :color="scope.row.quality >= 90 ? '#67c23a' : scope.row.quality >= 80 ? '#e6a23c' : '#f56c6c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="delivery" label="交付" width="100">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.delivery" :color="scope.row.delivery >= 90 ? '#67c23a' : scope.row.delivery >= 80 ? '#e6a23c' : '#f56c6c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="service" label="服务" width="100">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.service" :color="scope.row.service >= 90 ? '#67c23a' : scope.row.service >= 80 ? '#e6a23c' : '#f56c6c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="price" label="价格" width="100">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.price" :color="scope.row.price >= 90 ? '#67c23a' : scope.row.price >= 80 ? '#e6a23c' : '#f56c6c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="total" label="综合得分" width="120">
|
||||
<template #default="scope">
|
||||
<span style="font-weight: 600; font-size: 16px">{{ scope.row.total.toFixed(2) }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="level" label="等级" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getLevelType(scope.row.level)">
|
||||
<el-icon style="margin-right: 5px"><Star /></el-icon>
|
||||
{{ scope.row.level }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="evaluator" label="评估人" width="100" />
|
||||
<el-table-column prop="createTime" label="评估时间" width="120" />
|
||||
<el-table-column label="操作" width="100" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑评估')">编辑</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.evaluation-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
178
src/views/srm/InquiryView.vue
Normal file
178
src/views/srm/InquiryView.vue
Normal file
@@ -0,0 +1,178 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
|
||||
|
||||
interface Inquiry {
|
||||
id: number
|
||||
inquiryNo: string
|
||||
item: string
|
||||
quantity: number
|
||||
suppliers: string[]
|
||||
status: string
|
||||
createTime: string
|
||||
deadline: string
|
||||
}
|
||||
|
||||
const tableData = ref<Inquiry[]>([
|
||||
{
|
||||
id: 1,
|
||||
inquiryNo: 'INQ202401001',
|
||||
item: '服务器设备',
|
||||
quantity: 20,
|
||||
suppliers: ['ABC科技有限公司', 'DEF科技公司'],
|
||||
status: '报价中',
|
||||
createTime: '2024-01-15',
|
||||
deadline: '2024-01-25',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
inquiryNo: 'INQ202401002',
|
||||
item: '办公桌椅',
|
||||
quantity: 50,
|
||||
suppliers: ['XYZ办公用品公司'],
|
||||
status: '已报价',
|
||||
createTime: '2024-01-14',
|
||||
deadline: '2024-01-24',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 30,
|
||||
})
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
报价中: 'warning',
|
||||
已报价: 'primary',
|
||||
已选择: 'success',
|
||||
已取消: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="inquiry-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">询价管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="询价单号/物品名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="报价中" value="报价中" />
|
||||
<el-option label="已报价" value="已报价" />
|
||||
<el-option label="已选择" value="已选择" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Plus" @click="ElMessage.info('创建询价单')">创建询价单</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="inquiryNo" label="询价单号" width="150" />
|
||||
<el-table-column prop="item" label="物品名称" width="150" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" />
|
||||
<el-table-column prop="suppliers" label="询价供应商" width="250">
|
||||
<template #default="scope">
|
||||
<el-tag
|
||||
v-for="(supplier, index) in scope.row.suppliers"
|
||||
:key="index"
|
||||
style="margin-right: 5px; margin-bottom: 5px"
|
||||
>
|
||||
{{ supplier }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="deadline" label="截止日期" width="120" />
|
||||
<el-table-column prop="createTime" label="创建时间" width="120" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Document" @click="ElMessage.info('查看报价')">查看报价</el-button>
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑询价')">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除询价')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.inquiry-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
165
src/views/srm/PerformanceView.vue
Normal file
165
src/views/srm/PerformanceView.vue
Normal file
@@ -0,0 +1,165 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Search, TrendCharts } from '@element-plus/icons-vue'
|
||||
|
||||
interface Performance {
|
||||
id: number
|
||||
supplier: string
|
||||
totalOrders: number
|
||||
totalAmount: number
|
||||
onTimeRate: number
|
||||
qualityRate: number
|
||||
satisfaction: number
|
||||
ranking: number
|
||||
}
|
||||
|
||||
const tableData = ref<Performance[]>([
|
||||
{
|
||||
id: 1,
|
||||
supplier: 'ABC科技有限公司',
|
||||
totalOrders: 25,
|
||||
totalAmount: 500000,
|
||||
onTimeRate: 98,
|
||||
qualityRate: 95,
|
||||
satisfaction: 92,
|
||||
ranking: 1,
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
supplier: 'XYZ办公用品公司',
|
||||
totalOrders: 18,
|
||||
totalAmount: 200000,
|
||||
onTimeRate: 95,
|
||||
qualityRate: 88,
|
||||
satisfaction: 90,
|
||||
ranking: 2,
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 20,
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="performance-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">供应商绩效</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="供应商名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="searchForm.keyword = ''">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column label="排名" width="80">
|
||||
<template #default="scope">
|
||||
<el-tag :type="scope.row.ranking === 1 ? 'success' : scope.row.ranking === 2 ? 'primary' : 'info'">
|
||||
{{ scope.row.ranking }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="supplier" label="供应商" width="200" />
|
||||
<el-table-column prop="totalOrders" label="订单总数" width="120" />
|
||||
<el-table-column prop="totalAmount" label="交易总额" width="120">
|
||||
<template #default="scope">
|
||||
<span style="color: #f56c6c; font-weight: 600">¥{{ (scope.row.totalAmount / 10000).toFixed(0) }}万</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="onTimeRate" label="准时交付率" width="140">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.onTimeRate" :color="scope.row.onTimeRate >= 95 ? '#67c23a' : '#e6a23c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="qualityRate" label="质量合格率" width="140">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.qualityRate" :color="scope.row.qualityRate >= 90 ? '#67c23a' : '#e6a23c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="satisfaction" label="满意度" width="140">
|
||||
<template #default="scope">
|
||||
<el-progress :percentage="scope.row.satisfaction" :color="scope.row.satisfaction >= 90 ? '#67c23a' : '#e6a23c'" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="操作" width="120" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="TrendCharts" @click="ElMessage.info('查看详情')">详情</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.performance-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
182
src/views/srm/PurchaseView.vue
Normal file
182
src/views/srm/PurchaseView.vue
Normal file
@@ -0,0 +1,182 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Search, Document } from '@element-plus/icons-vue'
|
||||
|
||||
interface Purchase {
|
||||
id: number
|
||||
purchaseNo: string
|
||||
supplier: string
|
||||
item: string
|
||||
quantity: number
|
||||
unitPrice: number
|
||||
totalAmount: number
|
||||
status: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Purchase[]>([
|
||||
{
|
||||
id: 1,
|
||||
purchaseNo: 'PUR202401001',
|
||||
supplier: 'ABC科技有限公司',
|
||||
item: '服务器设备',
|
||||
quantity: 20,
|
||||
unitPrice: 8000,
|
||||
totalAmount: 160000,
|
||||
status: '待确认',
|
||||
createTime: '2024-01-15',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
purchaseNo: 'PUR202401002',
|
||||
supplier: 'XYZ办公用品公司',
|
||||
item: '办公桌椅',
|
||||
quantity: 50,
|
||||
unitPrice: 500,
|
||||
totalAmount: 25000,
|
||||
status: '已确认',
|
||||
createTime: '2024-01-14',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 50,
|
||||
})
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
待确认: 'warning',
|
||||
已确认: 'primary',
|
||||
已发货: 'info',
|
||||
已完成: 'success',
|
||||
已取消: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="purchase-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">采购管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="采购单号/供应商名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="待确认" value="待确认" />
|
||||
<el-option label="已确认" value="已确认" />
|
||||
<el-option label="已发货" value="已发货" />
|
||||
<el-option label="已完成" value="已完成" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', status: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Plus" @click="ElMessage.info('创建采购单')">创建采购单</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="purchaseNo" label="采购单号" width="150" />
|
||||
<el-table-column prop="supplier" label="供应商" width="180" />
|
||||
<el-table-column prop="item" label="物品名称" width="150" />
|
||||
<el-table-column prop="quantity" label="数量" width="100" />
|
||||
<el-table-column prop="unitPrice" label="单价" width="100">
|
||||
<template #default="scope">
|
||||
<span>¥{{ scope.row.unitPrice }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="totalAmount" label="总金额" width="120">
|
||||
<template #default="scope">
|
||||
<span style="color: #f56c6c; font-weight: 600">¥{{ scope.row.totalAmount.toLocaleString() }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="120" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Document" @click="ElMessage.info('查看详情')">查看</el-button>
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑采购单')">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除采购单')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.purchase-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
200
src/views/srm/ReportView.vue
Normal file
200
src/views/srm/ReportView.vue
Normal file
@@ -0,0 +1,200 @@
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ShoppingCart, Money, User, Document } from '@element-plus/icons-vue'
|
||||
|
||||
const reportData = {
|
||||
suppliers: {
|
||||
total: 45,
|
||||
active: 38,
|
||||
inactive: 7,
|
||||
},
|
||||
purchases: {
|
||||
total: 120,
|
||||
amount: 5000000,
|
||||
monthly: 800000,
|
||||
},
|
||||
contracts: {
|
||||
total: 25,
|
||||
active: 20,
|
||||
expired: 5,
|
||||
},
|
||||
evaluations: {
|
||||
total: 30,
|
||||
excellent: 8,
|
||||
good: 15,
|
||||
average: 7,
|
||||
},
|
||||
}
|
||||
|
||||
const monthlyData = [
|
||||
{ month: '1月', purchases: 18, amount: 700000, contracts: 3 },
|
||||
{ month: '2月', purchases: 20, amount: 750000, contracts: 4 },
|
||||
{ month: '3月', purchases: 22, amount: 800000, contracts: 5 },
|
||||
{ month: '4月', purchases: 21, amount: 780000, contracts: 4 },
|
||||
{ month: '5月', purchases: 23, amount: 850000, contracts: 5 },
|
||||
{ month: '6月', purchases: 24, amount: 900000, contracts: 6 },
|
||||
]
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="report-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">SRM 报表统计</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-row :gutter="20" class="stats-row">
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%)">
|
||||
<el-icon :size="32"><User /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">供应商总数</div>
|
||||
<div class="stat-value">{{ reportData.suppliers.total }}</div>
|
||||
<div class="stat-growth">合作中 {{ reportData.suppliers.active }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%)">
|
||||
<el-icon :size="32"><ShoppingCart /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">采购总额</div>
|
||||
<div class="stat-value">¥{{ (reportData.purchases.amount / 10000).toFixed(0) }}万</div>
|
||||
<div class="stat-growth">本月 ¥{{ (reportData.purchases.monthly / 10000).toFixed(0) }}万</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)">
|
||||
<el-icon :size="32"><Document /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">合同总数</div>
|
||||
<div class="stat-value">{{ reportData.contracts.total }}</div>
|
||||
<div class="stat-growth">执行中 {{ reportData.contracts.active }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col :span="6">
|
||||
<el-card shadow="hover" class="stat-card">
|
||||
<div class="stat-content">
|
||||
<div class="stat-icon" style="background: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)">
|
||||
<el-icon :size="32"><Money /></el-icon>
|
||||
</div>
|
||||
<div class="stat-info">
|
||||
<div class="stat-label">评估总数</div>
|
||||
<div class="stat-value">{{ reportData.evaluations.total }}</div>
|
||||
<div class="stat-growth">优秀 {{ reportData.evaluations.excellent }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row :gutter="20" class="charts-row">
|
||||
<el-col :span="24">
|
||||
<el-card shadow="hover">
|
||||
<template #header>
|
||||
<div class="card-header">
|
||||
<span>月度统计</span>
|
||||
</div>
|
||||
</template>
|
||||
<el-table :data="monthlyData" stripe>
|
||||
<el-table-column prop="month" label="月份" width="100" />
|
||||
<el-table-column prop="purchases" label="采购单数" width="120" />
|
||||
<el-table-column prop="amount" label="采购金额">
|
||||
<template #default="scope">
|
||||
<span style="color: #409eff; font-weight: 600">¥{{ (scope.row.amount / 10000).toFixed(0) }}万</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="contracts" label="合同数量" width="120" />
|
||||
</el-table>
|
||||
</el-card>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.report-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.stats-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
border-radius: 8px;
|
||||
transition: transform 0.3s;
|
||||
}
|
||||
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.stat-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.stat-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.stat-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
font-size: 14px;
|
||||
color: #909399;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 24px;
|
||||
font-weight: 600;
|
||||
color: #303133;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.stat-growth {
|
||||
font-size: 12px;
|
||||
color: #67c23a;
|
||||
}
|
||||
|
||||
.charts-row {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
font-weight: 600;
|
||||
font-size: 16px;
|
||||
}
|
||||
</style>
|
||||
|
||||
197
src/views/srm/SupplierView.vue
Normal file
197
src/views/srm/SupplierView.vue
Normal file
@@ -0,0 +1,197 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue'
|
||||
import { ElMessage } from 'element-plus'
|
||||
import { Plus, Edit, Delete, Search, Phone, Star } from '@element-plus/icons-vue'
|
||||
|
||||
interface Supplier {
|
||||
id: number
|
||||
code: string
|
||||
name: string
|
||||
category: string
|
||||
contact: string
|
||||
phone: string
|
||||
email: string
|
||||
address: string
|
||||
rating: number
|
||||
status: string
|
||||
createTime: string
|
||||
}
|
||||
|
||||
const tableData = ref<Supplier[]>([
|
||||
{
|
||||
id: 1,
|
||||
code: 'SUP001',
|
||||
name: 'ABC科技有限公司',
|
||||
category: 'IT设备',
|
||||
contact: '张经理',
|
||||
phone: '13800138001',
|
||||
email: 'zhang@abc.com',
|
||||
address: '北京市朝阳区',
|
||||
rating: 5,
|
||||
status: '合作中',
|
||||
createTime: '2024-01-01',
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
code: 'SUP002',
|
||||
name: 'XYZ办公用品公司',
|
||||
category: '办公用品',
|
||||
contact: '李主管',
|
||||
phone: '13800138002',
|
||||
email: 'li@xyz.com',
|
||||
address: '上海市浦东新区',
|
||||
rating: 4,
|
||||
status: '合作中',
|
||||
createTime: '2024-01-05',
|
||||
},
|
||||
])
|
||||
|
||||
const searchForm = reactive({
|
||||
keyword: '',
|
||||
category: '',
|
||||
status: '',
|
||||
})
|
||||
|
||||
const pagination = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
total: 50,
|
||||
})
|
||||
|
||||
const getStatusType = (status: string) => {
|
||||
const map: Record<string, string> = {
|
||||
合作中: 'success',
|
||||
待审核: 'warning',
|
||||
已停用: 'danger',
|
||||
}
|
||||
return map[status] || 'info'
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="supplier-view">
|
||||
<el-page-header>
|
||||
<template #content>
|
||||
<span class="page-title">供应商管理</span>
|
||||
</template>
|
||||
</el-page-header>
|
||||
|
||||
<el-card class="content-card" shadow="hover">
|
||||
<div class="toolbar">
|
||||
<el-form :inline="true" :model="searchForm" class="search-form">
|
||||
<el-form-item label="关键词">
|
||||
<el-input
|
||||
v-model="searchForm.keyword"
|
||||
placeholder="供应商编码/名称"
|
||||
clearable
|
||||
style="width: 200px"
|
||||
>
|
||||
<template #prefix>
|
||||
<el-icon><Search /></el-icon>
|
||||
</template>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="分类">
|
||||
<el-select v-model="searchForm.category" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="IT设备" value="IT设备" />
|
||||
<el-option label="办公用品" value="办公用品" />
|
||||
<el-option label="原材料" value="原材料" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="状态">
|
||||
<el-select v-model="searchForm.status" placeholder="全部" clearable style="width: 120px">
|
||||
<el-option label="合作中" value="合作中" />
|
||||
<el-option label="待审核" value="待审核" />
|
||||
<el-option label="已停用" value="已停用" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="ElMessage.info('搜索功能')">搜索</el-button>
|
||||
<el-button @click="Object.assign(searchForm, { keyword: '', category: '', status: '' })">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<el-button type="primary" :icon="Plus" @click="ElMessage.info('添加供应商')">添加供应商</el-button>
|
||||
</div>
|
||||
|
||||
<el-table :data="tableData" stripe style="width: 100%">
|
||||
<el-table-column prop="code" label="供应商编码" width="120" />
|
||||
<el-table-column prop="name" label="供应商名称" width="200" />
|
||||
<el-table-column prop="category" label="供应类别" width="120" />
|
||||
<el-table-column prop="contact" label="联系人" width="100" />
|
||||
<el-table-column prop="phone" label="联系电话" width="130">
|
||||
<template #default="scope">
|
||||
<div style="display: flex; align-items: center; gap: 5px">
|
||||
<el-icon><Phone /></el-icon>
|
||||
<span>{{ scope.row.phone }}</span>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="email" label="邮箱" width="180" />
|
||||
<el-table-column prop="address" label="地址" width="200" />
|
||||
<el-table-column prop="rating" label="评级" width="100">
|
||||
<template #default="scope">
|
||||
<el-rate v-model="scope.row.rating" disabled show-score text-color="#ff9900" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="status" label="状态" width="100">
|
||||
<template #default="scope">
|
||||
<el-tag :type="getStatusType(scope.row.status)">{{ scope.row.status }}</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column prop="createTime" label="创建时间" width="120" />
|
||||
<el-table-column label="操作" width="200" fixed="right">
|
||||
<template #default="scope">
|
||||
<el-button type="primary" link :icon="Edit" @click="ElMessage.info('编辑供应商')">编辑</el-button>
|
||||
<el-button type="danger" link :icon="Delete" @click="ElMessage.info('删除供应商')">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<div class="pagination">
|
||||
<el-pagination
|
||||
v-model:current-page="pagination.currentPage"
|
||||
v-model:page-size="pagination.pageSize"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
/>
|
||||
</div>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.supplier-view {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.page-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.content-card {
|
||||
margin-top: 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
|
||||
.toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
flex-wrap: wrap;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.search-form {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.pagination {
|
||||
margin-top: 20px;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user