feat: 图库功能
This commit is contained in:
duan
@@ -1 +1,16 @@
|
||||
<template></template>
|
||||
<template>
|
||||
<div style="padding: 15px;">
|
||||
<!-- 搜索 -->
|
||||
<Search></Search>
|
||||
<!-- 数据统计 -->
|
||||
<DataStatistics></DataStatistics>
|
||||
<!-- 表格 -->
|
||||
<Content></Content>
|
||||
<!-- 其他内容 -->
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import Search from './consumablesconfig/Search.vue'
|
||||
import DataStatistics from './consumablesconfig/DataStatistics.vue'
|
||||
import Content from './consumablesconfig/Content.vue'
|
||||
</script>
|
||||
23
src/views/inventory/consumablesconfig/Content.vue
Normal file
23
src/views/inventory/consumablesconfig/Content.vue
Normal file
@@ -0,0 +1,23 @@
|
||||
<template>
|
||||
<div class="Table">
|
||||
<!-- 按钮 -->
|
||||
<AddButton></AddButton>
|
||||
<!-- 表格 -->
|
||||
<Table></Table>
|
||||
<!-- 分页 -->
|
||||
<Paging></Paging>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import AddButton from './component/AddButton.vue'
|
||||
import Table from './component/Table.vue'
|
||||
import Paging from './component/Paging.vue'
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.Table {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
</style>
|
||||
103
src/views/inventory/consumablesconfig/DataStatistics.vue
Normal file
103
src/views/inventory/consumablesconfig/DataStatistics.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<div class="DataStatistics">
|
||||
<div style="width: 200px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<span>耗材种数</span>
|
||||
<span>{{ datas.totalRow }}</span>
|
||||
</div>
|
||||
<div style="width: 300px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>增加数量：</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动增加：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>入库：</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div style="width: 500px;">
|
||||
<el-icon class="iconStyle">
|
||||
<UserFilled />
|
||||
</el-icon>
|
||||
<div>
|
||||
<div><span>减少数量：</span><span>0</span></div>
|
||||
<div style="display: flex;">
|
||||
<div>
|
||||
<span>手动减少：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>消耗：</span><span>0</span>
|
||||
</div>
|
||||
<span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>报损：</span><span>0</span>
|
||||
</div><span style="margin: 0 20px;color: #ccc;">|</span>
|
||||
<div>
|
||||
<span>出库：</span><span>0</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
import API from "@/api/product/index";
|
||||
import { onMounted, reactive } from "vue";
|
||||
onMounted(() => {
|
||||
getPage();
|
||||
})
|
||||
let datas = reactive({
|
||||
totalRow: 0
|
||||
})
|
||||
async function getPage() {
|
||||
let res = await API.getPage();
|
||||
datas.totalRow = res.totalRow
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
<style scoped lang="scss">
|
||||
.DataStatistics {
|
||||
border: 1px solid #e4e7ed;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
margin: 20px 0;
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
>div {
|
||||
height: 80px;
|
||||
background-color: #f4f9ff;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-around;
|
||||
|
||||
padding: 20px;
|
||||
|
||||
.iconStyle {
|
||||
background-color: #d4e9fe;
|
||||
border-radius: 50%;
|
||||
padding: 6px;
|
||||
font-size: 36px;
|
||||
color: #3f9eff;
|
||||
}
|
||||
|
||||
span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
61
src/views/inventory/consumablesconfig/Search.vue
Normal file
61
src/views/inventory/consumablesconfig/Search.vue
Normal file
@@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div class="Search">
|
||||
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||
<el-form-item label="耗材分类">
|
||||
<el-select v-model="formInline.region" placeholder="请选择耗材分类" clearable>
|
||||
<el-option label="Zone one" value="shanghai" />
|
||||
<el-option label="Zone two" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="耗材名称">
|
||||
<el-input v-model="formInline.user" placeholder="请输入耗材名称" clearable />
|
||||
</el-form-item>
|
||||
<el-form-item label="日期">
|
||||
<el-date-picker v-model="formInline.value1" type="daterange" range-separator="-" start-placeholder="开始日期"
|
||||
end-placeholder="结束日期" />
|
||||
</el-form-item>
|
||||
<el-form-item label="排列方式">
|
||||
<el-select v-model="formInline.region" placeholder="请选择排列方式" clearable>
|
||||
<el-option label="创建时间" value="shanghai" />
|
||||
<el-option label="数量由低到高" value="beijing" />
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
|
||||
<el-button icon="Refresh" @click="onSubmit">重置</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive } from 'vue'
|
||||
|
||||
const formInline = reactive({
|
||||
user: '',
|
||||
region: '',
|
||||
date: '',
|
||||
value1: ""
|
||||
})
|
||||
|
||||
const onSubmit = () => {
|
||||
console.log('submit!')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.Search {
|
||||
padding: 20px;
|
||||
background-color: #fff;
|
||||
border: 1px solid #e4e7ed;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-input {
|
||||
--el-input-width: 220px;
|
||||
}
|
||||
|
||||
.demo-form-inline .el-select {
|
||||
--el-select-width: 220px;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,7 @@
|
||||
<template>
|
||||
<el-button type="success" icon="Plus">新增</el-button>
|
||||
<el-button>入库</el-button>
|
||||
<el-button>出库</el-button>
|
||||
<el-button>分类管理</el-button>
|
||||
<el-button>供应商管理</el-button>
|
||||
</template>
|
||||
22
src/views/inventory/consumablesconfig/component/Paging.vue
Normal file
22
src/views/inventory/consumablesconfig/component/Paging.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-pagination background :page-size="20" :page-sizes="[10, 20, 30, 40]" layout="prev,pager,next,jumper,total,sizes"
|
||||
v-model:current-page="datas.currentPage" :total="datas.total" @size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange" />
|
||||
</div>
|
||||
</template>
|
||||
<script setup>
|
||||
let datas = reactive({
|
||||
currentPage: 1,
|
||||
pageSize: 20,
|
||||
total: 20,
|
||||
})
|
||||
// 当前条改变
|
||||
function handleSizeChange(val) {
|
||||
console.log(`每页 ${val} 条`);
|
||||
}
|
||||
// 当前页改变
|
||||
function handleCurrentChange(val) {
|
||||
console.log(`当前页: ${val}`);
|
||||
}
|
||||
</script>
|
||||
34
src/views/inventory/consumablesconfig/component/Table.vue
Normal file
34
src/views/inventory/consumablesconfig/component/Table.vue
Normal file
@@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div style="margin-top: 10px;">
|
||||
<el-table :data="tableData" border style="width: 100%">
|
||||
<el-table-column prop="date" label="Date" width="180" />
|
||||
<el-table-column prop="name" label="Name" width="180" />
|
||||
<el-table-column prop="address" label="Address" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const tableData = [
|
||||
{
|
||||
date: '2016-05-03',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-02',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-04',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
{
|
||||
date: '2016-05-01',
|
||||
name: 'Tom',
|
||||
address: 'No. 189, Grove St, Los Angeles',
|
||||
},
|
||||
]
|
||||
</script>
|
||||
Reference in New Issue
Block a user