czg_team/cashier-web
7
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: 图库功能

Browse Source
This commit is contained in:
duan
2025-02-27 10:20:13 +08:00
parent 5f41da34fb
commit 9a16e09fa1
13 changed files with 541 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
src/views/inventory/consumables.vue
View File

@@ -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
View 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
View 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
View 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>

7
src/views/inventory/consumablesconfig/component/AddButton.vue Normal file
View File

@@ -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
View 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
View 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>

60
src/views/product/indexconfig/addgoods.vue
View File

@@ -33,32 +33,26 @@
</el-form-item>
</el-col>
</el-form-item>
<el-form-item label="商品图片" required prop="images">
<MultiImageUpload v-model="ruleForm.images" />
</el-form-item>
<!-- <el-form-item label="商品图片" required prop="images">
<MultiImageUpload v-model="ruleForm.images" />
</el-form-item> -->
<el-form-item label="商品图片" required prop="images">
<div style="display: flex; flex-wrap: wrap">
<div v-for="(item, index) in datas.imgList" :key="index" style="position: relative" class="showStyle">
<i class="el-icon-error buttonstyle" @click="deleteEvent(item)"></i>
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :key="item.id" :src="item.url"
alt="" />
<div v-for="(item, index) in ruleForm.images" :key="index" style="position: relative" class="showStyle">
<el-icon class="buttonstyle" @click="deleteEvent(item)">
<DeleteFilled />
</el-icon>
<img style="width: 148px; height: 148px; margin-right: 6px" class="imgStyle" :src="item" alt="" />
</div>
<div class="upImgStyle" @click="addimgEvent">+</div>
</div>
</el-form-item> -->
</el-form-item>
<el-form-item>
<div class="tips">注：第一张图为商品封面图，图片尺寸为750×750</div>
</el-form-item>
<!-- 选择图片 -->
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
<!-- <el-form-item label="显示/隐藏" required prop="type">
<el-checkbox-group v-model="ruleForm.showType">
<el-checkbox label="table">堂食</el-checkbox>
<el-checkbox label="dine">自取</el-checkbox>
<el-checkbox label="delivery">配送</el-checkbox>
<el-checkbox label="express">快递</el-checkbox>
</el-checkbox-group>
</el-form-item> -->
<el-form-item label="商品类型">
<el-radio-group v-model="ruleForm.type" @change="changeTypeEnum(ruleForm.type)">
<el-radio value="single">单规格商品</el-radio>
@@ -309,7 +303,6 @@ let datas = reactive<datasForm>({
showSelectSku: false,
selectSkuItem: {},
addGroupIndex: -1,
imgList: [],
})
let shopListRef = ref(null)
@@ -328,7 +321,6 @@ interface datasForm {
showSelectSku: boolean,
selectSkuItem: any,
addGroupIndex: any,
imgList: any[]
}
interface RuleForm {
name: string,
@@ -343,7 +335,7 @@ interface RuleForm {
skuList: string[],
weight: any,
isAllowTempModifyPrice: any,
days: string[],
days: any,
useTime: string[],
startTime: string,
endTime: string,
@@ -529,13 +521,11 @@ function addgoods(index: number = -1) {
(shopListRef.value as any)?.opens()
}
function deleteEvent(d: any) {
let index = datas.imgList.findIndex((ele) => ele.url == d.url);
datas.imgList.splice(index, 1);
let index = ruleForm.images.findIndex((ele) => ele == d);
ruleForm.images.splice(index, 1);
}
function successEvent(d: any) {
// this.form.images.push(d[0].url);
// this.imgList.push(d[0]);
ruleForm.images.push(d[0].url);
}
// 分组选择商品
function selectShopRes(res: Array<any>) {
@@ -757,11 +747,17 @@ const submitForm = async (formEl: FormInstance | undefined) => {
// console.log(ruleForm, '套餐')
}
if (ruleForm.id) {
setTimeout(() => {
ruleForm.days = ruleForm.days.split(',')
}, 600);
let res = await UserAPI3.update(ruleForm)
if (res.code == 200) {
ElMessage.success("修改成功");
}
} else {
setTimeout(() => {
ruleForm.days = ruleForm.days.split(',')
}, 600);
let res = await UserAPI3.addunit(ruleForm)
if (res.code == 200) {
ElMessage.success("添加成功");
@@ -869,6 +865,10 @@ const resetForm = (formEl: FormInstance | undefined) => {
margin-bottom: 20px;
}
.showStyle:hover>.buttonstyle {
display: block;
}
.upImgStyle {
cursor: pointer;
width: 148px;
@@ -880,4 +880,16 @@ const resetForm = (formEl: FormInstance | undefined) => {
font-size: 30px;
color: #ccc;
}
.buttonstyle {
border-radius: 50%;
color: #db1616;
background-color: #fff;
font-size: 20px;
display: none;
position: absolute;
right: 0px;
top: -10px;
z-index: 10;
}
</style>