feat: 广告模块,交班记录80%,等用户完成
This commit is contained in:
@@ -428,6 +428,17 @@ export const constantRoutes: RouteRecordRaw[] = [
|
|||||||
hidden: true
|
hidden: true
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: "advertisement",
|
||||||
|
component: () => import("@/views/application/list/advertisement/index.vue"),
|
||||||
|
name: "advertisement",
|
||||||
|
meta: {
|
||||||
|
title: "广告",
|
||||||
|
affix: false,
|
||||||
|
hidden: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
/**列表end */
|
/**列表end */
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -1 +1 @@
|
|||||||
<template></template>
|
<template>aasdhkas</template>
|
||||||
13
src/views/application/list/advertisement/index.vue
Normal file
13
src/views/application/list/advertisement/index.vue
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
<template>
|
||||||
|
<!-- 广告模块 -->
|
||||||
|
<div style="padding: 15px;">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<Search></Search>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<Content></Content>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Search from './indexconfig/Search.vue'
|
||||||
|
import Content from './indexconfig/Content.vue'
|
||||||
|
</script>
|
||||||
252
src/views/application/list/advertisement/indexconfig/Content.vue
Normal file
252
src/views/application/list/advertisement/indexconfig/Content.vue
Normal file
@@ -0,0 +1,252 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Table">
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<AddButton @add="add"></AddButton>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"
|
||||||
|
@handleStatusChange="handleStatusChange"></Table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
|
||||||
|
<!-- 其他模板 -->
|
||||||
|
<!-- 新增/编辑 -->
|
||||||
|
<myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
|
||||||
|
<el-form ref="ruleFormRef" :model="datas.DialogForm" label-width="120px">
|
||||||
|
<el-form-item label="上传弹窗广告" prop="imgUrl">
|
||||||
|
<div style="display: flex; flex-wrap: wrap">
|
||||||
|
<div v-for="(item, index) in datas.DialogForm.imgUrl" :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 label="圆角设置">
|
||||||
|
<div class="slider-demo-block">
|
||||||
|
<el-slider v-model="datas.DialogForm.borderRadius" style="width: 300px;" />
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="弹窗位置">
|
||||||
|
<el-radio-group v-model="datas.DialogForm.showPosition">
|
||||||
|
<el-radio label="首页" value="home" />
|
||||||
|
<el-radio label="点餐页" value="make_order" />
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="弹窗频率">
|
||||||
|
<el-radio-group v-model="datas.DialogForm.frequency">
|
||||||
|
<el-radio label="仅首次展示" value="only_one" />
|
||||||
|
<el-radio label="每次打开都展示" value="every_show" />
|
||||||
|
<el-radio label="每天展示一次" value="every_day" />
|
||||||
|
<el-radio label="每三天展示一次" value="three_day" />
|
||||||
|
<el-radio label="每七天展示一次" value="seven_day" />
|
||||||
|
<el-radio label="每30天展示一次" value="thirty_day" />
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="跳转页面">
|
||||||
|
<el-select v-model="datas.DialogForm.linkPath" placeholder="跳转页面" clearable>
|
||||||
|
<el-option :label="item.name" :value="item.id" v-for="item in datas.linkPathList" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</myDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import AddButton from './component/AddButton.vue'
|
||||||
|
import Table from './component/Table.vue'
|
||||||
|
import Paging from './component/Paging.vue'
|
||||||
|
import myDialog from '@/components/mycomponents/myDialog.vue'
|
||||||
|
import eventBus from '@/utils/eventBus'
|
||||||
|
import API from './api'
|
||||||
|
|
||||||
|
const datas = reactive({
|
||||||
|
tableData: [], // 表格数据
|
||||||
|
title: '新增数据',
|
||||||
|
pagingConfig: {
|
||||||
|
total: 0, // 总数
|
||||||
|
pageSize: 10, // 每页数据数量
|
||||||
|
pageNumber: 1, // 当前页码
|
||||||
|
},
|
||||||
|
DialogForm: { // 弹窗表单数据
|
||||||
|
linkPath: "",
|
||||||
|
imgUrl: [],
|
||||||
|
borderRadius: 0,
|
||||||
|
showPosition: "home",
|
||||||
|
frequency: "only_one",
|
||||||
|
status: 0
|
||||||
|
},
|
||||||
|
// 跳转页面列表
|
||||||
|
linkPathList: [
|
||||||
|
],
|
||||||
|
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
|
||||||
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const myDialogRef = ref(null)
|
||||||
|
const ruleFormRef = ref(null)
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
// 获取小程序跳转页面
|
||||||
|
getxcxlist()
|
||||||
|
eventBus.on('search', (res) => {
|
||||||
|
getList(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
eventBus.off('search')
|
||||||
|
})
|
||||||
|
async function getList(data = {}) {
|
||||||
|
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
||||||
|
datas.tableData = res
|
||||||
|
datas.pagingConfig.total = res.totalRow
|
||||||
|
datas.pagingConfig.pageSize = res.pageSize
|
||||||
|
datas.pagingConfig.pageNumber = res.pageNumber
|
||||||
|
}
|
||||||
|
async function getxcxlist() {
|
||||||
|
const res = await API.miniAppPagesPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, })
|
||||||
|
datas.linkPathList = res.records
|
||||||
|
}
|
||||||
|
function add() {
|
||||||
|
if (datas.DialogForm.id) {
|
||||||
|
rest()
|
||||||
|
}
|
||||||
|
datas.title = '新增数据'
|
||||||
|
myDialogRef.value.open()
|
||||||
|
}
|
||||||
|
async function handleEdit(row) {
|
||||||
|
datas.title = '编辑数据'
|
||||||
|
const res = await API.getinfo(row.id)
|
||||||
|
datas.DialogForm = res
|
||||||
|
// 有图片
|
||||||
|
datas.DialogForm.imgUrl = res.imgUrl.split(',')
|
||||||
|
myDialogRef.value.open()
|
||||||
|
}
|
||||||
|
async function handleStatusChange(d) {
|
||||||
|
datas.title = '编辑数据'
|
||||||
|
let res = await API.update(d)
|
||||||
|
if (res) {
|
||||||
|
ElMessage({
|
||||||
|
message: '成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
rest()
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
async function confirm() {
|
||||||
|
ruleFormRef.value.validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
let res = null
|
||||||
|
if (datas.title == '新增数据') {
|
||||||
|
// 图片处理
|
||||||
|
datas.DialogForm.imgUrl = datas.DialogForm.imgUrl.join(',')
|
||||||
|
res = await API.add(datas.DialogForm)
|
||||||
|
} else {
|
||||||
|
datas.DialogForm.imgUrl = datas.DialogForm.imgUrl.join(',')
|
||||||
|
res = await API.update(datas.DialogForm)
|
||||||
|
}
|
||||||
|
if (res) {
|
||||||
|
ElMessage({
|
||||||
|
message: '成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
rest()
|
||||||
|
getList()
|
||||||
|
myDialogRef.value.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 重置
|
||||||
|
function rest() {
|
||||||
|
datas.DialogForm = { sort: 1, imgUrl: [] }
|
||||||
|
}
|
||||||
|
async function handleDelete(id) {
|
||||||
|
ElMessageBox.confirm("是否删除数据项?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(
|
||||||
|
async () => {
|
||||||
|
let res = await API.deleteByIds(id)
|
||||||
|
if (res) {
|
||||||
|
ElMessage({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片
|
||||||
|
const addImg = ref(null)
|
||||||
|
function addimgEvent() {
|
||||||
|
(addImg.value)?.show()
|
||||||
|
}
|
||||||
|
function successEvent(d) {
|
||||||
|
datas.DialogForm['imgUrl'].push(d[0].url);
|
||||||
|
}
|
||||||
|
function deleteEvent(d) {
|
||||||
|
let index = datas.DialogForm.imgUrl.findIndex((ele) => ele == d);
|
||||||
|
datas.DialogForm.imgUrl.splice(index, 1);
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
function sizeChange(val) {
|
||||||
|
datas.pagingConfig.pageSize = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
function currentChange(val) {
|
||||||
|
datas.pagingConfig.pageNumber = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Table {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片库样式
|
||||||
|
.upImgStyle {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 148px;
|
||||||
|
height: 148px;
|
||||||
|
line-height: 148px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
border-radius: 1%;
|
||||||
|
font-size: 30px;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.showStyle:hover>.buttonstyle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.buttonstyle {
|
||||||
|
border-radius: 50%;
|
||||||
|
color: #db1616;
|
||||||
|
background-color: #fff;
|
||||||
|
font-size: 20px;
|
||||||
|
display: none;
|
||||||
|
position: absolute;
|
||||||
|
right: 0px;
|
||||||
|
top: -10px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,56 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Search">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
<el-form-item label="展示位置">
|
||||||
|
<el-select v-model="formInline.showPosition" placeholder="请选择耗材分类" clearable>
|
||||||
|
<el-option label="首页" value="home" />
|
||||||
|
<el-option label="点餐页" value="make_order" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="状态">
|
||||||
|
<el-select v-model="formInline.status" placeholder="请选择排列方式" clearable>
|
||||||
|
<el-option label="未启用" :value="0" />
|
||||||
|
<el-option label="已启用" :value="1" />
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="reset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import eventBus from '@/utils/eventBus'
|
||||||
|
const formInline = reactive({
|
||||||
|
showPosition: '',
|
||||||
|
status: '',
|
||||||
|
})
|
||||||
|
const onSubmit = () => {
|
||||||
|
eventBus.emit('search', formInline)
|
||||||
|
}
|
||||||
|
const reset = () => {
|
||||||
|
for (let key in formInline) {
|
||||||
|
formInline[key] = ''
|
||||||
|
}
|
||||||
|
eventBus.emit('search', formInline)
|
||||||
|
}
|
||||||
|
</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>
|
||||||
70
src/views/application/list/advertisement/indexconfig/api.ts
Normal file
70
src/views/application/list/advertisement/indexconfig/api.ts
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
const baseURL = "/account/admin/shopAd";
|
||||||
|
|
||||||
|
// XXX-配置
|
||||||
|
const AuthAPI = {
|
||||||
|
// 列表
|
||||||
|
getList(params: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/list`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 分页*/
|
||||||
|
getPage(params: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 获取小程序
|
||||||
|
miniAppPagesPage(params: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `/system/admin/miniAppPages/page`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 新增
|
||||||
|
add(data: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "post",
|
||||||
|
data: { ...data },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 详情
|
||||||
|
getinfo(id: number) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/detail?id=${id}`,
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
update(data: Object) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "put",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteByIds(id: number | String) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "delete",
|
||||||
|
data: { id },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
export interface Responseres {
|
||||||
|
code?: number | null;
|
||||||
|
data?: any;
|
||||||
|
msg?: null | string;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthAPI;
|
||||||
@@ -0,0 +1,10 @@
|
|||||||
|
<template>
|
||||||
|
<el-button type="success" icon="Plus" @click="addEvent">新增</el-button>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(['add']);
|
||||||
|
|
||||||
|
function addEvent() {
|
||||||
|
emit('add');
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 10px;">
|
||||||
|
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
|
||||||
|
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
|
||||||
|
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
pagingConfig: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['sizeChange', 'currentChange'])
|
||||||
|
// 当前条改变
|
||||||
|
function handleSizeChange(val) {
|
||||||
|
emit('sizeChange', val)
|
||||||
|
}
|
||||||
|
// 当前页改变
|
||||||
|
function handleCurrentChange(val) {
|
||||||
|
emit('currentChange', val)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,71 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 10px;">
|
||||||
|
<el-table :data="props.list" border style="width: 100%">
|
||||||
|
<el-table-column prop="name" align="center" label="弹窗广告">
|
||||||
|
<template v-slot="scope">
|
||||||
|
<div>
|
||||||
|
<el-image style="width: 40px; height: 40px" :src="scope.row.imgUrl.split(',')[0]" fit="contain" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="showPosition" align="center" label="弹窗位置">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ showPositionFilter(scope.row.showPosition) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否可见" align="center" prop="status">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-switch v-model="scope.row.status" @change="handleStatusChange(scope.row)" :active-value="1"
|
||||||
|
:inactive-value="0" />
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="frequency" align="center" label="弹窗频率">
|
||||||
|
<template #default="scope">
|
||||||
|
{{ frequencyFilter(scope.row.frequency) }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createTime" align="center" label="创建日期" />
|
||||||
|
<el-table-column label="操作" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button size="small" type="danger" link icon="Delete" style="color: #f89797;"
|
||||||
|
@click="handleDelete(scope.$index, scope.row)"> 删除 </el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(['handleDelete', 'handleEdit', 'handleStatusChange'])
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
function frequencyFilter(d) {
|
||||||
|
// only_one 仅首次展示, every_show 每次打开都展示,every_day 每天展示一次,three_day 每三天展示一次, seven_day 每七天展示一次, thirty_day 没30天展示一次
|
||||||
|
if (d == 'only_one') return '仅首次展示'
|
||||||
|
if (d == 'every_show') return '每次打开都展示'
|
||||||
|
if (d == 'every_day') return '每天展示一次'
|
||||||
|
if (d == 'three_day') return '每三天展示一次'
|
||||||
|
if (d == 'seven_day') return '每七天展示一次'
|
||||||
|
if (d == 'thirty_day') return '每30天展示一次'
|
||||||
|
}
|
||||||
|
function handleStatusChange(d) {
|
||||||
|
emit('handleStatusChange', d)
|
||||||
|
}
|
||||||
|
function showPositionFilter(d) {
|
||||||
|
// home首页,make_order点餐页
|
||||||
|
if (d == 'home') return '首页'
|
||||||
|
if (d == 'make_order') return '点餐页'
|
||||||
|
}
|
||||||
|
function handleEdit(row) {
|
||||||
|
emit('handleEdit', row)
|
||||||
|
}
|
||||||
|
function handleDelete(index, row) {
|
||||||
|
emit('handleDelete', row.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -24,7 +24,7 @@ import call from "@/assets/images/application/call.png";
|
|||||||
const list = ref([
|
const list = ref([
|
||||||
{ name: "存酒", icon: bear, path: "", desc: "用户未喝完的酒可暂存在店里" },
|
{ name: "存酒", icon: bear, path: "", desc: "用户未喝完的酒可暂存在店里" },
|
||||||
{ name: "点歌", icon: song, path: "", desc: "用户可以付费点歌" },
|
{ name: "点歌", icon: song, path: "", desc: "用户可以付费点歌" },
|
||||||
{ name: "广告", icon: ad, path: "", desc: "添加弹窗广告" },
|
{ name: "广告", icon: ad, path: "advertisement", desc: "添加弹窗广告" },
|
||||||
{ name: "叫号", icon: call, path: "lineUplist", desc: "" },
|
{ name: "叫号", icon: call, path: "lineUplist", desc: "" },
|
||||||
]);
|
]);
|
||||||
|
|
||||||
|
|||||||
@@ -1,3 +1,13 @@
|
|||||||
<template>
|
<template>
|
||||||
<div></div>
|
<!-- 交班模块 -->
|
||||||
|
<div style="padding: 15px;">
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<Search></Search>
|
||||||
|
<!-- 表格 -->
|
||||||
|
<Content></Content>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Search from './workconfig/Search.vue'
|
||||||
|
import Content from './workconfig/Content.vue'
|
||||||
|
</script>
|
||||||
217
src/views/data/workconfig/Content.vue
Normal file
217
src/views/data/workconfig/Content.vue
Normal file
@@ -0,0 +1,217 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Table">
|
||||||
|
<!-- 表格 -->
|
||||||
|
<Table :list="datas.tableData" @handleDelete="handleDelete" @handleEdit="handleEdit"></Table>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<Paging :pagingConfig="datas.pagingConfig" @sizeChange="sizeChange" @currentChange="currentChange"></Paging>
|
||||||
|
<!-- 其他模板 -->
|
||||||
|
<!-- 新增/编辑 -->
|
||||||
|
<myDialog ref="myDialogRef" :title="datas.title" @confirm="confirm" width="30%">
|
||||||
|
<el-form ref="ruleFormRef" :rules="datas.rules" :model="datas.DialogForm" label-width="80px">
|
||||||
|
<el-form-item label="商品图片" required prop="images">
|
||||||
|
<div style="display: flex; flex-wrap: wrap">
|
||||||
|
<div v-for="(item, index) in datas.DialogForm.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 label="适用群体">
|
||||||
|
<el-radio-group v-model="datas.DialogForm.deductionGroup">
|
||||||
|
<el-radio label="全部" value="all" />
|
||||||
|
<el-radio label="仅会员" value="vip" />
|
||||||
|
</el-radio-group>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="联系电话">
|
||||||
|
<el-input v-model="datas.DialogForm.telephone" placeholder="请输入联系电话" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="开启下单积分抵扣">
|
||||||
|
<el-switch v-model="datas.DialogForm.enableDeduction" :active-value="1" :inactive-value="0" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="额外价格">
|
||||||
|
<el-col :span="3">
|
||||||
|
<el-input v-model="datas.DialogForm.minPaymentAmount" type="number" placeholder="">
|
||||||
|
<template #append>元</template>
|
||||||
|
</el-input>
|
||||||
|
</el-col>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="备注">
|
||||||
|
<el-input v-model="datas.DialogForm.remark" placeholder="请输入备注" type="textarea" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</myDialog>
|
||||||
|
<!-- 选择图片 -->
|
||||||
|
<AddImg ref="addImg" @successEvent="successEvent"></AddImg>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import Table from './component/Table.vue'
|
||||||
|
import Paging from './component/Paging.vue'
|
||||||
|
import myDialog from '@/components/mycomponents/myDialog.vue'
|
||||||
|
import eventBus from '@/utils/eventBus'
|
||||||
|
import API from './api'
|
||||||
|
|
||||||
|
const datas = reactive({
|
||||||
|
tableData: [], // 表格数据
|
||||||
|
title: '新增数据',
|
||||||
|
pagingConfig: {
|
||||||
|
total: 0, // 总数
|
||||||
|
pageSize: 10, // 每页数据数量
|
||||||
|
pageNumber: 1, // 当前页码
|
||||||
|
},
|
||||||
|
DialogForm: { // 弹窗表单数据
|
||||||
|
name: "",
|
||||||
|
telephone: "",
|
||||||
|
address: "",
|
||||||
|
remark: "",
|
||||||
|
images: []
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
name: [
|
||||||
|
{ required: true, message: '请输入供应商名称', trigger: 'blur' },
|
||||||
|
{ min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
|
||||||
|
],
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const myDialogRef = ref(null)
|
||||||
|
const ruleFormRef = ref(null)
|
||||||
|
onMounted(() => {
|
||||||
|
getList()
|
||||||
|
eventBus.on('search', (res) => {
|
||||||
|
getList(res)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
onBeforeUnmount(() => {
|
||||||
|
eventBus.off('search')
|
||||||
|
})
|
||||||
|
|
||||||
|
async function getList(data = {}) {
|
||||||
|
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
||||||
|
datas.tableData = res.records
|
||||||
|
datas.pagingConfig.total = res.totalRow
|
||||||
|
datas.pagingConfig.pageSize = res.pageSize
|
||||||
|
datas.pagingConfig.pageNumber = res.pageNumber
|
||||||
|
}
|
||||||
|
function add() {
|
||||||
|
if (datas.DialogForm.id) {
|
||||||
|
rest()
|
||||||
|
}
|
||||||
|
datas.title = '新增数据'
|
||||||
|
myDialogRef.value.open()
|
||||||
|
}
|
||||||
|
async function handleEdit(row) {
|
||||||
|
datas.title = '编辑数据'
|
||||||
|
const res = await API.getinfo(row.id)
|
||||||
|
datas.DialogForm = res
|
||||||
|
// 有图片
|
||||||
|
// datas.DialogForm.goodsImageUrl = res.goodsImageUrl.split(',')
|
||||||
|
myDialogRef.value.open()
|
||||||
|
}
|
||||||
|
async function confirm() {
|
||||||
|
ruleFormRef.value.validate(async valid => {
|
||||||
|
if (valid) {
|
||||||
|
let res = null
|
||||||
|
if (datas.title == '新增数据') {
|
||||||
|
// 图片处理
|
||||||
|
// datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
|
||||||
|
res = await API.add(datas.DialogForm)
|
||||||
|
} else {
|
||||||
|
// datas.DialogForm.goodsImageUrl = datas.DialogForm.goodsImageUrl.join(',')
|
||||||
|
res = await API.update(datas.DialogForm)
|
||||||
|
}
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: '成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
rest()
|
||||||
|
getList()
|
||||||
|
myDialogRef.value.close()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
// 重置
|
||||||
|
function rest() {
|
||||||
|
datas.DialogForm = { sort: 1, images: [] }
|
||||||
|
}
|
||||||
|
async function handleDelete(id) {
|
||||||
|
ElMessageBox.confirm("是否删除数据项?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning",
|
||||||
|
}).then(
|
||||||
|
async () => {
|
||||||
|
let res = await API.deleteByIds(id)
|
||||||
|
if (res.code == 200) {
|
||||||
|
ElMessage({
|
||||||
|
message: '删除成功',
|
||||||
|
type: 'success',
|
||||||
|
})
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片
|
||||||
|
const addImg = ref(null)
|
||||||
|
function addimgEvent() {
|
||||||
|
(addImg.value)?.show()
|
||||||
|
}
|
||||||
|
function successEvent(d) {
|
||||||
|
datas.DialogForm['images'].push(d[0].url);
|
||||||
|
}
|
||||||
|
function deleteEvent(d) {
|
||||||
|
let index = datas.DialogForm.images.findIndex((ele) => ele == d);
|
||||||
|
datas.DialogForm.images.splice(index, 1);
|
||||||
|
}
|
||||||
|
// 分页
|
||||||
|
function sizeChange(val) {
|
||||||
|
datas.pagingConfig.pageSize = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
function currentChange(val) {
|
||||||
|
datas.pagingConfig.pageNumber = val
|
||||||
|
getList()
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.Table {
|
||||||
|
padding: 20px;
|
||||||
|
background-color: #fff;
|
||||||
|
border: 1px solid #e4e7ed;
|
||||||
|
margin-top: 20px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 图片库样式
|
||||||
|
.upImgStyle {
|
||||||
|
cursor: pointer;
|
||||||
|
width: 148px;
|
||||||
|
height: 148px;
|
||||||
|
line-height: 148px;
|
||||||
|
text-align: center;
|
||||||
|
border: 1px dashed #ccc;
|
||||||
|
border-radius: 1%;
|
||||||
|
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>
|
||||||
77
src/views/data/workconfig/Search.vue
Normal file
77
src/views/data/workconfig/Search.vue
Normal file
@@ -0,0 +1,77 @@
|
|||||||
|
<template>
|
||||||
|
<div class="Search">
|
||||||
|
<el-form :inline="true" :model="formInline" class="demo-form-inline">
|
||||||
|
|
||||||
|
<el-form-item label="日期">
|
||||||
|
<el-date-picker :shortcuts="formInline.shortcuts" v-model="formInline.value1" type="daterange"
|
||||||
|
range-separator="-" start-placeholder="开始日期" value-format="YYYY-MM-DD" @change="dateChange"
|
||||||
|
end-placeholder="结束日期" />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" icon="Search" @click="onSubmit">搜索</el-button>
|
||||||
|
<el-button icon="Refresh" @click="reset">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import eventBus from '@/utils/eventBus'
|
||||||
|
const formInline = reactive({
|
||||||
|
shortcuts: [{
|
||||||
|
text: '最近一周',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
|
||||||
|
return [start, end]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近一个月',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
|
||||||
|
return [start, end]
|
||||||
|
}
|
||||||
|
}, {
|
||||||
|
text: '最近三个月',
|
||||||
|
value: () => {
|
||||||
|
const end = new Date();
|
||||||
|
const start = new Date();
|
||||||
|
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
|
||||||
|
return [start, end]
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
})
|
||||||
|
const onSubmit = () => {
|
||||||
|
eventBus.emit('search', formInline)
|
||||||
|
}
|
||||||
|
const reset = () => {
|
||||||
|
for (let key in formInline) {
|
||||||
|
formInline[key] = ''
|
||||||
|
}
|
||||||
|
eventBus.emit('search', formInline)
|
||||||
|
}
|
||||||
|
function dateChange(d) {
|
||||||
|
formInline.endDate = d[1]
|
||||||
|
formInline.beginDate = d[0]
|
||||||
|
}
|
||||||
|
</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>
|
||||||
60
src/views/data/workconfig/api.ts
Normal file
60
src/views/data/workconfig/api.ts
Normal file
@@ -0,0 +1,60 @@
|
|||||||
|
import request from "@/utils/request";
|
||||||
|
const baseURL = "/account/admin/handover-record";
|
||||||
|
// XXX-配置
|
||||||
|
const AuthAPI = {
|
||||||
|
// 列表
|
||||||
|
getList(params: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/list`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
/** 分页*/
|
||||||
|
getPage(params: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/page`,
|
||||||
|
method: "get",
|
||||||
|
params,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 新增
|
||||||
|
add(data: any) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "post",
|
||||||
|
data: { ...data },
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 详情
|
||||||
|
getinfo(id: number) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/${id}`,
|
||||||
|
method: "get",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 编辑
|
||||||
|
update(data: Object) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}`,
|
||||||
|
method: "put",
|
||||||
|
data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除
|
||||||
|
deleteByIds(id: number | String) {
|
||||||
|
return request<any, Responseres>({
|
||||||
|
url: `${baseURL}/${id}`,
|
||||||
|
method: "delete",
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
};
|
||||||
|
export interface Responseres {
|
||||||
|
code?: number | null;
|
||||||
|
data?: any;
|
||||||
|
msg?: null | string;
|
||||||
|
[property: string]: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default AuthAPI;
|
||||||
24
src/views/data/workconfig/component/Paging.vue
Normal file
24
src/views/data/workconfig/component/Paging.vue
Normal file
@@ -0,0 +1,24 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 10px;">
|
||||||
|
<el-pagination background :page-size="props.pagingConfig.pageSize" :page-sizes="[10, 20, 30, 40]"
|
||||||
|
layout="prev,pager,next,jumper,total,sizes" v-model:current-page="props.pagingConfig.pageNumber"
|
||||||
|
:total="props.pagingConfig.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
const props = defineProps({
|
||||||
|
pagingConfig: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
const emit = defineEmits(['sizeChange', 'currentChange'])
|
||||||
|
// 当前条改变
|
||||||
|
function handleSizeChange(val) {
|
||||||
|
emit('sizeChange', val)
|
||||||
|
}
|
||||||
|
// 当前页改变
|
||||||
|
function handleCurrentChange(val) {
|
||||||
|
emit('currentChange', val)
|
||||||
|
}
|
||||||
|
</script>
|
||||||
39
src/views/data/workconfig/component/Table.vue
Normal file
39
src/views/data/workconfig/component/Table.vue
Normal file
@@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div style="margin-top: 10px;">
|
||||||
|
<el-table :data="props.list" border style="width: 100%">
|
||||||
|
<el-table-column prop="date" align="center" label="商户名称" />
|
||||||
|
<el-table-column prop="staffName" align="center" label="职员名称" />
|
||||||
|
<el-table-column prop="orderCount" align="center" label="订单数量" />
|
||||||
|
<el-table-column prop="date" align="center" label="应交金额" />
|
||||||
|
<el-table-column prop="quickInAmount" align="center" label="快捷收款金额" />
|
||||||
|
<el-table-column prop="refundAmount" align="center" label="退款金额" />
|
||||||
|
<el-table-column prop="date" align="center" label="总收入" />
|
||||||
|
<el-table-column prop="loginTime" align="center" label="开始时间" />
|
||||||
|
<el-table-column prop="handoverTime" align="center" label="交班时间" />
|
||||||
|
<el-table-column label="操作" align="center">
|
||||||
|
<template #default="scope">
|
||||||
|
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">查看</el-button>
|
||||||
|
<el-button size="small" type="primary" link icon="Edit" @click="handleEdit(scope.row)">导出</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
const emit = defineEmits(['handleDelete', 'handleEdit'])
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Array,
|
||||||
|
default: () => []
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
function handleEdit(row) {
|
||||||
|
emit('handleEdit', row)
|
||||||
|
}
|
||||||
|
function handleDelete(index, row) {
|
||||||
|
emit('handleDelete', row.id)
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
@@ -91,9 +91,6 @@ onMounted(() => {
|
|||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
eventBus.off('search')
|
eventBus.off('search')
|
||||||
})
|
})
|
||||||
eventBus.on('search', (res) => {
|
|
||||||
getList(res)
|
|
||||||
})
|
|
||||||
async function getList(data = {}) {
|
async function getList(data = {}) {
|
||||||
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
const res = await API.getPage({ page: datas.pagingConfig.pageNumber, size: datas.pagingConfig.pageSize, ...data })
|
||||||
datas.tableData = res.records
|
datas.tableData = res.records
|
||||||
@@ -196,6 +193,10 @@ function currentChange(val) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
// 图片库样式
|
// 图片库样式
|
||||||
|
.showStyle:hover>.buttonstyle {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
.upImgStyle {
|
.upImgStyle {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
width: 148px;
|
width: 148px;
|
||||||
|
|||||||
Reference in New Issue
Block a user