This commit is contained in:
魏啾 2024-10-31 10:18:09 +08:00
commit df10beaaec
18 changed files with 1261 additions and 446 deletions

79
src/api/coupon.js Normal file
View File

@ -0,0 +1,79 @@
import request from '@/utils/request'
/**
* 获取优惠券列表
* @returns
*/
export function getTbShopCoupon(params) {
return request({
url: '/api/tbShopCoupon',
method: 'get',
params: {
...params
}
})
}
/**
* 获取优惠券详情
* @returns
*/
export function getTbShopCouponInfo(id) {
return request({
url: '/api/tbShopCoupon/' + id,
method: 'get',
params: {}
})
}
/**
* 增加优惠券
* @returns
*/
export function addTbShopCoupon(params) {
return request({
url: '/api/tbShopCoupon',
method: 'post',
data: {
...params
}
})
}
/**
* 删除优惠券
* @returns
*/
export function delTbShopCoupon(params) {
return request({
url: '/api/tbShopCoupon',
method: 'delete',
data: params
})
}
/**
* 获取领取列表
* @returns
*/
export function queryReceive(params) {
return request({
url: '/api/tbShopCoupon/queryReceive',
method: 'post',
data: {
...params
}
})
}
/**
* 获取领取列表
* @returns
*/
export function delReceive(params) {
return request({
url: '/api/tbShopCoupon/receive',
method: 'delete',
data: params
})
}

View File

@ -71,7 +71,7 @@ export function tbProductStockDetailSum(params) {
*/
export function tbShopPurveyorGet(params) {
return request({
url: `/api/tbShopPurveyor`,
url: `/api/tbShopPurveyorTransact`,
method: "get",
params
});
@ -173,7 +173,14 @@ export function tbProductStockOperateOutAndOn(data) {
data
});
}
// 副单位
export function unittbConsInfo(params) {
return request({
url: `/api/tbConsInfo`,
method: "put",
data:params
});
}
/**
* 库存列表
* @returns

View File

@ -69,3 +69,15 @@ export function productGroupPut(data) {
data
});
}
/**
* 拖动排序
* @returns
*/
export function productCategorySort(data) {
return request({
url: "/api/pad/productCategory/sort",
method: "post",
data
});
}

View File

@ -164,6 +164,7 @@ export default {
}
},
openMenu(tag, e) {
console.log(11111)
const menuMinWidth = 105
const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
const offsetWidth = this.$el.offsetWidth // container width

View File

@ -438,3 +438,15 @@ export function formatDecimal(num = 0, decimal = 2, isInt = false) {
return parseFloat(num).toFixed(decimal);
}
}
/**
* 传入数组以及要交换位置的2个元素的下标
* @param {*} arr
* @param {*} i1
* @param {*} i2
* @returns
*/
export function swapArrayEle(arr, i1, i2) {
arr[i1] = arr.splice(i2, 1, arr[i1])[0];
return arr;
}

View File

@ -0,0 +1,3 @@
<template>
<div>会员积分</div>
</template>

View File

@ -0,0 +1,407 @@
<!-- eslint-disable vue/no-use-v-if-with-v-for -->
<template>
<div class="app-container">
<div class="tab">
<div v-for="(item,index) in tabList" v-if="(form.id&&form.type == item.type)||!form.id" :key="index" class="tab_item" :class="{active: form.type == item.type}" @click="tabClick(item)"> {{ item.name }} <span class="bor" /></div>
</div>
<!-- 优惠券 -->
<div v-if="form.type == 1" class="content">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="优惠卷卷名" prop="title">
<el-input v-model="form.title" placeholder="" style="width: 289px;" />
</el-form-item>
<el-form-item label="使用门槛">
<el-input v-model="form.fullAmount" type="number" placeholder="" style="width: 180px;margin-right: 66px;">
<template slot="prepend"></template>
<template slot="append"></template>
</el-input>
<el-input v-model="form.discountAmount" type="number" placeholder="" style="width: 180px;">
<template slot="prepend"></template>
<template slot="append"></template>
</el-input>
</el-form-item>
<el-form-item label="有效期类型">
<el-radio-group v-model="form.validityType">
<el-radio v-for="item in couponEnum.validityType" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.validityType == 'custom'" label="有效时间" prop="validEndTime">
<el-date-picker
v-model="validityTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['06:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
@change="validityChange"
/>
</el-form-item>
<!-- <el-form-item label="使用门槛" prop="daysToTakeEffect">
<el-input v-model="form.daysToTakeEffect" placeholder="" style="width: 200px;">
<template slot="prepend"></template>
<template slot="append">天生效</template>
</el-input>
</el-form-item> -->
<el-form-item label="可用周期" prop="userDays">
<el-checkbox-group v-model="form.userDays">
<el-checkbox v-for="(city,index) in couponEnum.cycle" :key="index" :label="city.label" @change="userDayChagne">{{ city.label }}</el-checkbox>
</el-checkbox-group>
</el-form-item>
<el-form-item label="指定时间段">
<el-radio-group v-model="form.useTimeType">
<el-radio v-for="item in couponEnum.useTimeType" :key="item.value" :label="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item v-if="form.useTimeType == 'custom'" label="指定时间段" prop="useEndTime">
<el-time-picker
v-model="useTime"
is-range
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="HH:mm"
@change="useTimeChange"
/>
</el-form-item>
<el-form-item label="发放数量" prop="number">
<el-input v-model="form.number" type="number" placeholder="" style="width: 200px;" />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle"> </el-button>
</span>
</div>
<!-- 商品券 -->
<div v-if="form.type == 2" class="content">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="商品卷卷名" prop="title">
<el-input v-model="form.title" placeholder="" style="width: 289px;" />
</el-form-item>
<el-form-item label="发放数量" prop="number">
<el-input v-model="form.number" type="number" placeholder="" style="width: 289px;" />
</el-form-item>
<el-form-item label="使用门槛">
全额满<el-input v-model="form.fullAmount" placeholder="" style="width: 100px;margin: 0 23px;"><template slot="suffix"></template></el-input>可用
</el-form-item>
<el-form-item label="赠送商品" prop="products">
<div>
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...form.products])">
添加 </el-button>
</div>
<div class="shop_list">
<div
v-for="(item, index) in form.products"
:key="item.id"
class="item_wrap"
>
<div class="name">{{ item.name }}</div>
<el-input v-model="item.num" placeholder="请填写数量" style="width: 100px;" />
<div class="del" @click="form.products.splice(index, 1)">删除</div>
</div>
</div>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle"> </el-button>
</span>
</div>
<shopList ref="shopListRef" @success="slectShop" />
</div>
</template>
<script>
import couponEnum from './couponEnum'
import shopList from '@/components/shopList'
import { addTbShopCoupon, getTbShopCouponInfo } from '@/api/coupon'
export default {
components: { shopList },
data() {
const validateProduct = (rule, value, callback) => {
if (!this.form.products.length) {
callback(new Error('请选择商品'))
} else {
callback()
}
}
return {
tabList: [
{ name: '新增优惠券', type: 1 },
{ name: '新增商品券', type: 2 }
],
tabActive: 1,
couponEnum,
dialogVisible: false,
loading: false,
validityTime: [],
useTime: ['06:00:00', '23:59:59'],
form: {
id: '',
shopId: '',
type: '1',
title: '',
fullAmount: null,
discountAmount: null,
validityType: 'fixed',
validStartTime: '',
validEndTime: '',
userDays: [],
useTimeType: 'all',
useStartTime: '',
useEndTime: '',
products: [],
number: ''
},
rules: {
title: [
{
required: true,
message: '填写券名',
trigger: 'blur'
}
],
daysToTakeEffect: [
{
required: true,
message: '填写生效天数',
trigger: 'blur'
}
],
userDays: [
{
required: true,
message: '选择可用周期',
trigger: 'change'
}
],
validEndTime: [
{
required: true,
message: '选择有效时间段',
trigger: 'change'
}
],
useEndTime: [
{
required: true,
message: '选择指定时间段',
trigger: 'change'
}
],
products: [
{
required: true,
validator: validateProduct,
trigger: 'change'
}
],
number: [
{
required: true,
message: '填写发放数量',
trigger: 'blur'
}
]
},
resetForm: ''
}
},
mounted() {
this.resetForm = { ...this.form }
this.form.type = this.$route.query.type
this.form.useStartTime = this.useTime[0]
this.form.useEndTime = this.useTime[1]
if (this.$route.query.id) { this.form.id = this.$route.query.id; this.getCouponInfo(this.$route.query.id) }
},
methods: {
/**
* 切换类型
* @param item
*/
tabClick(item) {
console.log(item)
this.form.type = item.type
this.$refs.form.resetFields()
},
/**
* 获取优惠券详情
*/
async getCouponInfo(id) {
const resInfo = await getTbShopCouponInfo(id)
this.form = resInfo
if (resInfo.validityType === 'custom') {
this.validityTime = [resInfo.validStartTime, resInfo.validEndTime]
}
if (resInfo.useTimeType === 'custom') {
this.useTime = [resInfo.useStartTime, resInfo.useEndTime]
}
this.form.userDays = this.form.userDays.split(',')
},
/**
* 选择可用周期
*/
userDayChagne(e) {
console.log(this.form.userDays)
},
/**
* 有效期选择
* @param e
*/
validityChange(e) {
this.form.validStartTime = e[0]
this.form.validEndTime = e[1]
},
/**
* 指定时间段选择
* @param e
*/
useTimeChange(e) {
this.form.useStartTime = e[0]
this.form.useEndTime = e[1]
},
/**
* 选择商品
* @param res
*/
slectShop(res) {
if (res.length <= 0) {
return
}
this.form.products = []
if (this.form.products.length) {
res.map(async item => {
if (!await this.checkShop(item.id)) {
this.form.products.push({
id: item.id,
name: item.name,
num: null
})
}
})
} else {
this.form.products.push({
id: res[0].id,
name: res[0].name,
num: null
})
}
},
/**
* 判断是否存在重复商品
* @param id
*/
checkShop(id) {
let falg = false
this.form.products.map(item => {
// eslint-disable-next-line eqeqeq
if (item.id == id) {
falg = true
}
})
return falg
},
/**
* 提交
*/
onSubmitHandle() {
console.log(this.form)
this.$refs.form.validate(async valid => {
if (valid) {
try {
this.loading = true
if (!this.form.shopId) { this.form.shopId = localStorage.getItem('shopId') }
this.form.userDays = this.form.userDays.toString()
// eslint-disable-next-line no-unused-vars
const res = await addTbShopCoupon(this.form)
this.$store.dispatch('tagsView/delView', this.$route) //
this.$router.replace({ name: 'coupon_list' }) //
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
})
this.loading = false
} catch (error) {
this.loading = false
console.log(error)
}
}
})
}
}
}
</script>
<style scoped lang="scss">
.tab{
display: flex;
margin-bottom: 30px;
padding-top: 40px;
padding-left: 10px;
.tab_item{
margin-right: 64px;
font-weight: 400;
font-size: 16px;
color: #666666;
cursor: pointer;
.bor{
display: block;
width: 56px;
height: 6px;
background-color: transparent;
border-radius: 3px 3px 3px 3px;
margin: 5px auto 0;
}
}
.active{
color: #3F9EFF;
.bor{
background-color: #3F9EFF;
}
}
}
.content{
font-weight: 400;
font-size: 16px;
color: #666666;
}
.shop_list {
display: flex;
flex-wrap: wrap;
margin-top: 15px;
.item_wrap {
$size: 80px;
display: flex;
align-items: center;
.name {
width: $size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.del{
font-weight: 400;
font-size: 14px;
color: #3F9EFF;
margin-left: 11px;
}
}
}
</style>

View File

@ -1,277 +0,0 @@
<template>
<div>
<el-dialog title="添加优惠券" :visible.sync="dialogVisible" @close="reset">
<el-form ref="form" :model="form" :rules="rules" label-width="120px" label-position="left">
<el-form-item label="优惠卷名称" prop="title">
<el-input v-model="form.title" placeholder="请输入优惠卷名称" style="width: 200px;"></el-input>
</el-form-item>
<el-form-item label="类型">
<el-radio-group v-model="form.classType">
<el-radio :label="item.value" v-for="item in couponEnum.classType" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择商品" v-if="form.classType == 'product'" prop="classType">
<div>
<el-button type="primary" icon="el-icon-plus" @click="$refs.shopListRef.show([...productIds])">
添加商品
</el-button>
</div>
<div class="shop_list">
<div class="item_wrap" v-for="(item, index) in productIds" :key="item.id"
@click="productIds.splice(index, 1)">
<div class="item" :data-index="index + 1">
<el-image :src="item.coverImg" style="width: 100%;height: 100%;"></el-image>
</div>
<div class="name">{{ item.name }}</div>
</div>
</div>
</el-form-item>
<el-form-item label="优惠类型">
<el-radio-group v-model="form.type">
<el-radio :label="item.value" v-for="item in couponEnum.type" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="满减限制" v-if="form.type == '0'">
<el-input-number v-model="form.limitAmount" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="折扣" v-if="form.type == '1'">
<el-input-number v-model="form.ratio" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="优惠券面额">
<el-input-number v-model="form.amount" controls-position="right" :min="0"></el-input-number>
</el-form-item>
<el-form-item label="发放数量">
<el-input-number v-model="form.number" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="限领数量">
<el-input-number v-model="form.limitNumber" controls-position="right" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="有效期">
<el-radio-group v-model="form.effectType">
<el-radio :label="item.value" v-for="item in couponEnum.effectType" :key="item.value">
{{ item.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="有效时间" v-if="form.effectType == 1">
<el-date-picker v-model="selectTime" type="daterange" range-separator="" start-placeholder="开始日期"
end-placeholder="结束日期" :default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss">
</el-date-picker>
</el-form-item>
<el-form-item label="状态">
<el-switch v-model="form.status" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button @click="dialogVisible = false"> </el-button>
<el-button type="primary" :loading="loading" @click="onSubmitHandle"> </el-button>
</span>
</el-dialog>
<shopList ref="shopListRef" @success="slectShop" />
</div>
</template>
<script>
import couponEnum from './../couponEnum'
import shopList from '@/components/shopList'
import { tbMerchantCoupon } from '@/api/shop'
export default {
components: { shopList },
data() {
const validateProduct = (rule, value, callback) => {
if (!this.productIds.length) {
callback(new Error('请选择商品'))
} else {
callback()
}
}
return {
couponEnum,
dialogVisible: false,
loading: false,
selectTime: [],
form: {
id: '',
title: '',
classType: 'product',
type: '0',
limitAmount: '',
ratio: '1',
amount: '',
number: '1',
limitNumber: '1',
effectType: '0',
fromTime: '',
toTime: '',
relationIds: '',
status: 1
},
rules: {
title: [
{
required: true,
message: ' ',
trigger: 'blur'
}
],
classType: [
{
required: true,
validator: validateProduct,
trigger: 'change'
}
]
},
resetForm: '',
productIds: []
}
},
mounted() {
this.resetForm = { ...this.form }
},
methods: {
//
slectShop(res) {
if (this.productIds.length) {
res.map(async item => {
if (!await this.checkShop(item.id)) {
this.productIds.push({ ...item })
}
})
} else {
this.productIds = res
}
},
//
checkShop(id) {
let falg = false
this.productIds.map(item => {
if (item.id == id) {
falg = true
}
})
return falg
},
//
onSubmitHandle() {
console.log(this.form)
this.$refs.form.validate(async valid => {
if (valid) {
try {
this.loading = true
this.form.shopId = localStorage.getItem('shopId')
this.form.fromTime = this.selectTime[0] || ''
this.form.toTime = this.selectTime[1] || ''
let arr = []
if (this.form.classType == 'product') {
arr = this.productIds.map(item => item.id)
}
this.form.relationIds = arr.join(',')
let res = await tbMerchantCoupon(this.form, this.form.id ? 'put' : 'post')
this.$emit('success', res)
this.close()
this.$notify({
title: '成功',
message: `${this.form.id ? '编辑' : '添加'}成功`,
type: 'success'
});
this.loading = false
} catch (error) {
this.loading = false
console.log(error)
}
}
})
},
show(obj) {
this.dialogVisible = true
if (obj && obj.id) {
this.form = { ...obj }
}
},
close() {
this.dialogVisible = false
},
reset() {
this.form = { ...this.resetForm }
}
}
}
</script>
<style scoped lang="scss">
.shop_list {
display: flex;
flex-wrap: wrap;
.item_wrap {
$size: 80px;
.item {
$radius: 4px;
width: $size;
height: $size;
border-radius: $radius;
overflow: hidden;
position: relative;
margin-right: 10px;
margin-top: 10px;
&:hover {
cursor: pointer;
}
&::after {
content: attr(data-index);
font-size: 12px;
height: 20px;
display: flex;
padding: 0 10px;
border-radius: 0 0 $radius 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
&::before {
content: '删除';
font-size: 12px;
width: 100%;
height: 20px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
transition: all .1s ease-in-out;
}
}
.name {
width: $size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>

View File

@ -0,0 +1,289 @@
<template>
<div>
<el-dialog title="领取详情" :visible.sync="dialogVisible" width="70%" @close="reset">
<div class="search">
<el-form :model="query" inline label-position="left">
<el-form-item>
<el-input v-model="query.value" placeholder="用户ID/用户昵称/用户手机" style="width: 180px;" />
</el-form-item>
<el-form-item>
<el-select v-model="query.status" placeholder="选择状态" style="width: 154px;">
<el-option
v-for="item in stateList"
:key="item.value"
:label="item.label"
:value="item.value"
/>
</el-select>
</el-form-item>
<el-form-item />
<el-form-item label="领取时间">
<el-date-picker
v-model="queryTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
:default-time="['00:00:00', '23:59:59']"
value-format="yyyy-MM-dd HH:mm:ss"
@change="queryTimeChange"
/>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="getTableData">查询</el-button>
<!-- <el-button v-loading="downloadLoading" icon="el-icon-download" @click="downloadHandle">
<span v-if="!downloadLoading">导出</span>
<span v-else>下载中...</span>
</el-button> -->
</el-form-item>
</el-form>
</div>
<div class="head-container">
<el-table v-loading="loading" :data="tableData.data">
<el-table-column label="用户ID" prop="id" />
<el-table-column label="用户名" prop="name" />
<el-table-column label="领取时间" prop="receiveTime" />
<el-table-column label="使用时间" prop="useTime" />
<el-table-column label="获得来源" prop="source" />
<el-table-column label="状态" align="status">
<template v-slot="scope">
<div style="display: flex;align-items: center;">
<div v-if="scope.row.overNum == scope.row.num" style="width: 30px;color: #FAAD14;">未使用</div>
<div v-if="scope.row.num!=0&&scope.row.overNum != scope.row.num">{{ scope.row.overNum }}/{{ scope.row.num }}</div>
<div v-if="scope.row.overNum == 0" style="color: #52C41A;">已使用</div>
</div>
</template>
</el-table-column>
<el-table-column label="使用门店" prop="tableName" />
<el-table-column label="操作" width="150">
<template v-slot="scope">
<el-popconfirm title="确定删除吗?" @confirm="delTableHandle([scope.row.id])">
<el-button
slot="reference"
type="text"
icon="el-icon-delete"
style="color: #FF4D4F;"
>删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination
:total="tableData.total"
:current-page="tableData.page + 1"
:page-size="tableData.size"
layout="total, sizes, prev, pager, next, jumper"
@current-change="paginationChange"
@size-change="sizeChange"
/>
</div>
</el-dialog>
</div>
</template>
<script>
import { queryReceive, delReceive } from '@/api/coupon'
export default {
// eslint-disable-next-line vue/require-prop-types
props: ['couponId'],
data() {
return {
dialogVisible: false,
downloadLoading: false,
loading: false,
stateList: [
{ label: '未使用', value: 0 },
{ label: '已使用', value: 1 }
],
queryTime: [],
query: {
couponId: '',
value: '',
status: 0,
startTime: '',
endTime: '',
page: 1,
size: 10
},
resetQuery: null,
tableData: {
data: [],
page: 0,
size: 10,
loading: false,
total: 0
}
}
},
mounted() {
this.resetQuery = { ...this.query }
},
methods: {
/**
* 查询
*/
async getTableData() {
// eslint-disable-next-line no-unused-vars, prefer-const
console.log(this.couponId)
// eslint-disable-next-line no-unused-vars, prefer-const
let res = await queryReceive({
shopId: localStorage.getItem('shopId'),
couponId: this.query.couponId,
value: this.query.value,
status: this.query.status,
startTime: this.query.startTime,
endTime: this.query.endTime,
page: this.query.page,
size: this.query.size
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
},
/**
* 时间选择监听
*/
queryTimeChange(e) {
this.query.startTime = e[0]
this.query.endTime = e[1]
},
/**
* 删除优惠券
* @param id
*/
async delTableHandle(id) {
// eslint-disable-next-line no-undef
const delRes = await delReceive(id)
console.log(delRes)
this.getTableData()
},
/**
* 打开详情
* @param obj
*/
show(obj) {
console.log(obj)
this.dialogVisible = true
this.query.couponId = obj.id
this.getTableData()
},
//
sizeChange(e) {
this.tableData.size = e
this.getTableData()
},
//
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
/**
* 关闭详情
*/
close() {
this.dialogVisible = false
},
/**
* 导出Excel
*/
async downloadHandle() {
try {
this.downloadLoading = true
// eslint-disable-next-line no-undef
const file = await summaryTableDownload({
startTime: this.query.createdAt[0],
endTime: this.query.createdAt[1]
})
// eslint-disable-next-line no-undef
downloadFile(file, '数据', 'xlsx')
this.downloadLoading = false
} catch (error) {
this.downloadLoading = false
console.log(error)
}
},
reset() {
this.query = { ...this.resetQuery }
}
}
}
</script>
<style scoped lang="scss">
.shop_list {
display: flex;
flex-wrap: wrap;
.item_wrap {
$size: 80px;
.item {
$radius: 4px;
width: $size;
height: $size;
border-radius: $radius;
overflow: hidden;
position: relative;
margin-right: 10px;
margin-top: 10px;
&:hover {
cursor: pointer;
}
&::after {
content: attr(data-index);
font-size: 12px;
height: 20px;
display: flex;
padding: 0 10px;
border-radius: 0 0 $radius 0;
align-items: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
top: 0;
left: 0;
z-index: 10;
}
&::before {
content: '删除';
font-size: 12px;
width: 100%;
height: 20px;
display: flex;
padding: 0 10px;
align-items: center;
justify-content: center;
background-color: rgba(0, 0, 0, 0.3);
backdrop-filter: blur(10px);
color: #fff;
position: absolute;
bottom: 0;
left: 0;
z-index: 10;
transition: all .1s ease-in-out;
}
}
.name {
width: $size;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
}
}
</style>

View File

@ -1,32 +1,51 @@
export default {
classType: [
{
value: 'product',
label: '商品券'
},
{
value: 'common',
label: '通用券'
}
],
type: [
{
value: '0',
label: '满减'
},
{
value: '1',
label: '折扣'
}
],
effectType: [
{
value: '0',
label: '一直有效'
},
{
value: '1',
label: '时限有效'
}
]
}
classType: [
{
value: 'product',
label: '商品券'
},
{
value: 'common',
label: '通用券'
}
],
type: [
{
value: '0',
label: '满减'
},
{
value: '1',
label: '折扣'
}
],
cycle: [
{ label: '周一' },
{ label: '周二' },
{ label: '周三' },
{ label: '周四' },
{ label: '周五' },
{ label: '周六' },
{ label: '周七' }
],
validityType: [
{
value: 'fixed',
label: '领券后有效期内可用'
},
{
value: 'custom',
label: '固定有效期范围内可用'
}
],
useTimeType: [
{
value: 'all',
label: '全时段可用'
},
{
value: 'custom',
label: '指定时间段'
}
]
}

View File

@ -1,118 +1,161 @@
<template>
<div class="app-container">
<div class="head-container">
<el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
添加优惠券
</el-button>
</div>
<div class="head-container">
<el-table :data="tableData.data" v-loading="tableData.loading">
<el-table-column label="优惠券名称" prop="title"></el-table-column>
<el-table-column label="类型" prop="classType">
<template v-slot="scope">
{{ scope.row.classType | classTypeFilter }}
</template>
</el-table-column>
<el-table-column label="优惠类型" prop="type">
<template v-slot="scope">
{{ scope.row.type | typeFilter }}
</template>
</el-table-column>
<el-table-column label="折扣" prop="ratio"></el-table-column>
<el-table-column label="面额" prop="amount"></el-table-column>
<el-table-column label="满减限制" prop="limitAmount"></el-table-column>
<el-table-column label="发放数量" prop="number"></el-table-column>
<el-table-column label="限领数量" prop="limitNumber"></el-table-column>
<el-table-column label="剩余数量" prop="leftNumber"></el-table-column>
<el-table-column label="有效期" prop="effectType">
<template v-slot="scope">
{{ scope.row.effectType | effectTypeFilter }}
</template>
</el-table-column>
<el-table-column label="开始时间" prop="fromTime"></el-table-column>
<el-table-column label="到期时间" prop="toTime"></el-table-column>
<el-table-column label="商品列表" prop="relationIds" width="200">
<template v-slot="scope">
<div style="display: flex;" v-if="scope.row.classType == 'product'">
<el-image :src="scope.row.coverImg" style="width: 30px;height: 30px;"></el-image>
<span style="margin-left: 10px;">{{ scope.row.name }}</span>
</div>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination :total="tableData.total" :current-page="tableData.page + 1" :page-size="tableData.size"
@current-change="paginationChange" @size-change="sizeChange"
layout="total, sizes, prev, pager, next, jumper"></el-pagination>
</div>
<addCoupon ref="addCoupon" @success="resetHandle" />
<div class="app-container">
<div class="head-container">
<!-- <el-button type="primary" icon="el-icon-plus" @click="$refs.addCoupon.show()">
添加优惠券
</el-button> -->
<el-button type="primary" icon="el-icon-plus" @click="$router.push({name: 'add_coupon', query: {type:1}})">
添加优惠券
</el-button>
</div>
<div class="head-container">
<el-table v-loading="tableData.loading" :data="tableData.data">
<el-table-column label="ID" prop="id" />
<el-table-column label="名称" prop="title" />
<el-table-column label="使用门槛">
<template v-slot="scope">
{{ `${scope.row.fullAmount}${scope.row.discountAmount?'减'+scope.row.discountAmount+'元':''}` }}
</template>
</el-table-column>
<!-- <el-table-column label="有效期">
<template v-slot="scope">
{{ `领券后${scope.row.validDays}天过期` }}
</template>
</el-table-column> -->
<el-table-column label="用户领取方式">
<template v-slot="scope">
{{ `` }}
</template>
</el-table-column>
<el-table-column label="总发放数量" prop="number" />
<el-table-column label="已领取" align="center">
<template v-slot="scope">
<div style="display: flex;align-items: center;">
<div style="width: 30px;">{{ scope.row.number-scope.row.leftNumber }}</div>
<div style="margin: 0 10px;">|</div>
<div style="color: #3F9EFF;cursor: pointer;flex-shrink: 0;" @click="couponDetailsOpen(scope.row)">详情</div>
</div>
</template>
</el-table-column>
<el-table-column label="已使用" prop="useNumber" />
<el-table-column label="剩余" prop="leftNumber" />
<el-table-column label="操作" width="150">
<template v-slot="scope">
<el-button type="text" icon="el-icon-edit" @click="$router.push({name: 'add_coupon', query: {type:scope.row.type ,id: scope.row.id}} )">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="delTableHandle([scope.row.id])">
<el-button
slot="reference"
type="text"
icon="el-icon-delete"
style="margin-left: 20px !important;"
>删除</el-button>
</el-popconfirm>
</template>
</el-table-column>
</el-table>
</div>
<div class="head-container">
<el-pagination
:total="tableData.total"
:current-page="tableData.page + 1"
:page-size="tableData.size"
layout="total, sizes, prev, pager, next, jumper"
@current-change="paginationChange"
@size-change="sizeChange"
/>
</div>
<couponDetails ref="couponDetails" @success="resetHandle" />
</div>
</template>
<script>
import couponEnum from './couponEnum'
import addCoupon from './components/addCoupon.vue'
import { tbMerchantCouponGet } from '@/api/shop'
import couponDetails from './components/coupon_details.vue'
import { getTbShopCoupon, delTbShopCoupon } from '@/api/coupon'
export default {
components: { addCoupon },
data() {
return {
tableData: {
data: [],
page: 0,
size: 10,
loading: false,
total: 0
}
}
// eslint-disable-next-line vue/no-unused-components
components: { couponDetails },
filters: {
typeFilter(value) {
// eslint-disable-next-line eqeqeq
return couponEnum.type.find(item => item.value == value).label
},
filters: {
classTypeFilter(value) {
return couponEnum.classType.find(item => item.value == value).label
},
typeFilter(value) {
return couponEnum.type.find(item => item.value == value).label
},
effectTypeFilter(value) {
return couponEnum.effectType.find(item => item.value == value).label
}
},
mounted() {
this.getTableData()
},
methods: {
//
resetHandle() {
this.page = 0
this.getTableData()
},
//
sizeChange(e) {
this.tableData.size = e
this.getTableData()
},
//
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
//
async getTableData() {
this.tableData.loading = true
try {
const res = await tbMerchantCouponGet({
page: this.tableData.page,
size: this.tableData.size,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
} catch (error) {
console.log(error)
}
}
effectTypeFilter(value) {
// eslint-disable-next-line eqeqeq
return couponEnum.effectType.find(item => item.value == value).label
}
},
data() {
return {
tableData: {
data: [],
page: 0,
size: 10,
loading: false,
total: 0
},
couponId: null
}
},
mounted() {
this.getTableData()
},
methods: {
//
toPath(path, row) {
this.$router.push({ path: path, query: row })
},
//
resetHandle() {
this.page = 0
this.getTableData()
},
//
sizeChange(e) {
this.tableData.size = e
this.getTableData()
},
//
paginationChange(e) {
this.tableData.page = e - 1
this.getTableData()
},
//
async getTableData() {
this.tableData.loading = true
try {
const res = await getTbShopCoupon({
page: this.tableData.page,
size: this.tableData.size,
shopId: localStorage.getItem('shopId')
})
this.tableData.loading = false
this.tableData.data = res.content
this.tableData.total = res.totalElements
console.log(this.tableData)
} catch (error) {
console.log(error)
}
},
/**
* 查看领取详情
*/
couponDetailsOpen(row) {
this.$refs.couponDetails.show(row)
this.couponId = row.id
},
/**
* 删除优惠券
* @param id
*/
async delTableHandle(id) {
const delRes = await delTbShopCoupon(id)
console.log(delRes)
this.getTableData()
}
}
}
</script>
</script>

View File

@ -49,7 +49,7 @@
<el-radio label="1">部分分类</el-radio>
<!-- <el-radio label="2">部分商品</el-radio> -->
</el-radio-group>
<div style="color: rgb(255, 77, 79);margin-left: 80px;">仅打印制作单[厨房]</div>
<div v-if="forms.classifyPrint == 1" style="color: rgb(255, 77, 79);margin-left: 80px;">仅打印制作单[厨房]</div>
<div v-if="forms.classifyPrint == 1" style="margin-left:70px">
<!-- <el-tree :data="partList" show-checkbox node-key="id" ref="tree" :default-checked-keys="this.forms.categoryIds"
:props="{ children: 'childrenList', label: 'name' }">

View File

@ -42,12 +42,12 @@
<el-button @click="$router.push({ name: 'supplier_manage' })">供应商管理</el-button>
<el-button icon="el-icon-download" :loading="downloadLoading" @click="protHandle">导出耗材</el-button>
<el-button icon="el-icon-upload2" :loading="uploadLoading" @click="dialogVisible = true">导入耗材</el-button> -->
<el-select clearable v-model="query.sort" @change="getTableData" placeholder="排序">
<el-select clearable v-model="query.sort" @change="getTableData" placeholder="排序">
<el-option label="创建时间" value="createTime,desc" />
<el-option label="数量由低到高" value="balance,asc" />
</el-select>
</div>
</div>
<div class="row_wrap" style="margin-top: 12px">
<div class="row">
@ -242,7 +242,7 @@
<span>
{{ scope.row.conUnit }}
</span>
<i class="el-icon-edit" @click="editorHandle(scope.row)"></i>
<i class="el-icon-edit" @click="editorHandles(scope.row)"></i>
</template>
</el-table-column>
@ -352,7 +352,6 @@
</el-form>
</el-dialog>
<!-- 修改和增加 -->
<el-dialog :title="dialogtitle" :visible.sync="dialogshow" width="80%">
<template v-if="dialogtitle != '编辑'">
<div v-for="(item, index) in ruleForms" :key="index">
@ -482,6 +481,39 @@
</el-form>
</template>
</el-dialog>
<!-- 单位修改 -->
<el-dialog :title="unitItem ? unitItem.conName : ''" :visible.sync="dialogtitleunit" width="40%">
<template>
<div class="unitStyle unitWidth">
<div>主单位</div>
<div>{{ unitItem ? unitItem.conUnit : '' }}</div>
<div style="display: flex;align-items: center;">
<div style="width: 9px;height: 9px;background-color: #D9D9D9;border-radius: 50%;margin:0 6px;"></div> 订货单位
</div>
</div>
<div class="unitStyleBottom unitWidth" @click="switchs = 1" v-if="switchs == 2">
<span style="margin-right: 10px;">+</span> 添加单位
</div>
<div class="unitStyle unitWidth " style="margin-top: 20px;" v-else>
<div>副单位</div>
<div><input style="width: 70px;" type="text" v-model="unitItem.conUnitTwo"> </div>
<div style="display: flex;align-items: center;">
<div style="width: 9px;height: 9px;background-color: #D9D9D9;border-radius: 50%;margin:0 6px;"></div> 订货单位
<input type="text" disabled placeholder="1">
<div style="width: 80px;">{{ unitItem.conUnitTwo }}</div>= <input style="width: 80px;" v-model="unitItem.conUnitTwoConvert"
type="number">{{
unitItem.conUnit }}
</div>
</div>
<div style="display: flex; justify-content: center;margin-top: 20px;">
<el-button @click="dialogtitleunit = false"> </el-button>
<el-button type="primary" @click="submitUnit()">
</el-button>
</div>
</template>
</el-dialog>
<el-dialog title="选择类型" :visible.sync="typedialogshow">
<div class="head-container">
@ -592,7 +624,7 @@ import {
tbConsInfoFlowstock
} from "@/api/consumable";
import AddConsTakin from "../components/addConsTakin";
import { tbConsInfodownload, tbConsInfoinputStock } from '@/api/invoicing'
import { tbConsInfodownload, tbConsInfoinputStock, unittbConsInfo } from '@/api/invoicing'
import { downloadFile } from "@/utils";
import UploadExcel from '@/components/UploadExcel'
import consRecordDetail from "../components/cons_record_detail";
@ -677,6 +709,9 @@ export default {
total: 0
},
ruleFormLoading: false,
dialogtitleunit: false,
unitItem: { switchs: 2 },
switchs: 2,
ruleForms: [],
ruleForm: {
conCode: "",
@ -769,6 +804,15 @@ export default {
}
})
},
async submitUnit() {
const res = await unittbConsInfo([{
conUnitTwoConvert: this.unitItem.conUnitTwoConvert * 1,
conUnitTwo: this.unitItem.conUnitTwo,
id: this.unitItem.id
}])
this.unitItem = {}
this.dialogtitleunit = false
},
//
toGoodslist(orderNo) {
this.$router.push({
@ -843,13 +887,22 @@ export default {
console.log(error);
}
},
//
editorHandles(row) {
this.unitItem = row;
this.switchs = 2
if (row.conUnitTwo) {
this.switchs = 1
}
this.dialogtitleunit = true;
},
//
editorHandle(row) {
this.dialogtitle = "编辑";
for (let key in this.ruleForm) {
this.ruleForm[key] = row[key];
}
console.log(row, '调试1')
this.ruleForm.id = row.id;
this.dialogshow = true;
},
@ -1306,4 +1359,70 @@ export default {
}
}
}
.unitStyle {
display: flex;
align-items: center;
border-radius: 2px 2px 2px 2px;
>div:first-child {
width: 95px;
height: 42px;
line-height: 42px;
text-align: center;
border-right: 1px solid #DDDFE6;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #999999;
}
>div:nth-child(2) {
width: 80px;
height: 42px;
line-height: 42px;
text-align: center;
border-right: 1px solid #DDDFE6;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #3F9EFF;
}
>div:last-child {
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #999999;
>input {
width: 39px;
height: 28px;
background: #FFFFFF;
border-radius: 2px 2px 2px 2px;
border: 1px solid #DDDFE6;
margin: 0 16px;
}
}
}
.unitStyleBottom {
margin-top: 30px;
line-height: 42px;
text-align: center;
font-family: Source Han Sans CN, Source Han Sans CN;
font-weight: 400;
font-size: 14px;
color: #3F9EFF;
}
.unitWidth {
// width: 418px;
height: 42px;
border-radius: 2px 2px 2px 2px;
border: 1px solid #DDDFE6;
}
</style>

View File

@ -84,6 +84,10 @@
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="欠款金额">
<el-input v-model="queryForm.waitAmount" disabled style="width: 220px;"></el-input>
</el-form-item>
</el-col> <el-col :span="8">
<el-form-item label="备注">
<el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
</el-form-item>
@ -122,6 +126,17 @@
<div class="tips">原价{{ scope.row.costPrice }}/{{ scope.row.conUnit }}</div>
</template>
</el-table-column>
<el-table-column label="单位">
<template v-slot="scope">
<el-select @change="consCountTotal($event, scope.row, 'unit')" v-model="scope.row.unit"
:placeholder="scope.row.conUnit">
<el-option :label="scope.row.conUnit" :value="scope.row.conUnit"> </el-option>
<el-option :label="scope.row.conUnitTwo" :value="scope.row.conUnitTwo"
v-if="scope.row.conUnitTwo"> </el-option>
</el-select>
<div class="tips"> &nbsp;</div>
</template>
</el-table-column>
<el-table-column label="数量">
<template v-slot="scope">
<el-input-number v-model="scope.row.stockNumber" :min="0" :step="1" step-strictly
@ -133,10 +148,9 @@
</el-table-column>
<el-table-column label="小计">
<template v-slot="scope">
<!-- <el-input-number v-model="scope.row.totalAmount" :min="0"
<!-- <el-input-number v-model="scope.row.totalAmount" :min="0" scope.row.price , scope.row.stockNumber
controls-position="right"></el-input-number> -->
<el-input :value="formatDecimal(scope.row.price * scope.row.stockNumber)" readonly
style="width: 100px;" />
<el-input :value="formatDecimal(testform(scope.row))" readonly style="width: 100px;" />
</template>
</el-table-column>
<!-- <el-table-column label="变动后剩余库存">
@ -342,6 +356,13 @@ export default {
cb(uniqueArray);
}, 1000 * Math.random());
},
testform(d) {
let p = 1
if (d.unit && d.unit == d.conUnitTwo) {
p = d.conUnitTwoConvert
}
return d.price * d.stockNumber * p
},
handleSelect(item) {//
this.autocompletename = ''
if (this.inTabValue == 'goods') {
@ -392,6 +413,9 @@ export default {
},
//
changeTypeEnum(index) {
let filterd= this.purveyorList.filter(ele=>ele.id == index)
this.queryForm.waitAmount = filterd[0].waitAmount
this.inTabs.forEach((i) => {
if (i.value == this.inTabValue) {
this.queryForm.type = i.type
@ -424,7 +448,11 @@ export default {
let zong = 0
this.tableData.list.forEach(ele => {
zong += ele.price * ele.stockNumber
let p = 1
if (ele.unit && ele.conUnitTwo == ele.unit) {
p = ele.conUnitTwoConvert
}
zong += ele.price * ele.stockNumber * p
})
this.queryForm.totalAmount = formatDecimal(zong)
}

View File

@ -83,6 +83,11 @@
</el-col>
</el-row>
<el-row>
<el-col :span="8">
<el-form-item label="欠款金额">
<el-input v-model="queryForm.waitAmount" disabled style="width: 220px;"></el-input>
</el-form-item>
</el-col>
<el-col :span="8">
<el-form-item label="备注">
<el-input v-model="queryForm.remark" placeholder="请输入备注" style="width: 220px;"></el-input>
@ -120,6 +125,17 @@
<div class="tips">原价{{ scope.row.costPrice }}/{{ scope.row.conUnit }}</div>
</template>
</el-table-column>
<el-table-column label="单位">
<template v-slot="scope">
<el-select @change="consCountTotal($event, scope.row, 'unit')" v-model="scope.row.unit"
:placeholder="scope.row.conUnit">
<el-option :label="scope.row.conUnit" :value="scope.row.conUnit"> </el-option>
<el-option :label="scope.row.conUnitTwo" :value="scope.row.conUnitTwo"
v-if="scope.row.conUnitTwo"> </el-option>
</el-select>
<div class="tips"> &nbsp;</div>
</template>
</el-table-column>
<el-table-column label="数量">
<template v-slot="scope">
<el-input-number v-model="scope.row.stockNumber" :min="0" :step="1" step-strictly
@ -132,8 +148,7 @@
<template v-slot="scope">
<!-- <el-input-number v-model="scope.row.totalAmount" :min="0"
controls-position="right"></el-input-number> -->
<el-input :value="formatDecimal(scope.row.price * scope.row.stockNumber)" readonly
style="width: 100px;" />
<el-input :value="formatDecimal(testform(scope.row))" readonly style="width: 100px;" />
</template>
</el-table-column>
<!-- <el-table-column label="变动后剩余库存">
@ -337,6 +352,13 @@ export default {
cb(uniqueArray);
}, 1000 * Math.random());
},
testform(d) {
let p = 1
if (d.unit && d.unit == d.conUnitTwo) {
p = d.conUnitTwoConvert
}
return d.price * d.stockNumber * p
},
handleSelect(item) {//
this.autocompletename = ''
if (this.inTabValue == 'goods') {
@ -385,7 +407,11 @@ export default {
let zong = 0
this.tableData.list.forEach(ele => {
zong += ele.price * ele.stockNumber
let p = 1
if (ele.unit && ele.conUnitTwo == ele.unit) {
p = ele.conUnitTwoConvert
}
zong += ele.price * ele.stockNumber * p
})
this.queryForm.totalAmount = formatDecimal(zong)
}
@ -508,6 +534,9 @@ export default {
},
//
changeTypeEnum(index) {
let filterd= this.purveyorList.filter(ele=>ele.id == index)
this.queryForm.waitAmount = filterd[0].waitAmount
if (this.queryForm.purveyorId) {
this.shopTypesActive = 0
} else {

View File

@ -25,18 +25,18 @@
@change="showChange($event, scope.row)"></el-switch>
</template>
</el-table-column>
<el-table-column label="颜色">
<!-- <el-table-column label="颜色">
<template v-slot="scope">
<div
:style="{ width: '20px', height: '20px', borderRadius: '50%', backgroundColor: scope.row.style || '#efefef' }">
</div>
</template>
</el-table-column>
</el-table-column> -->
<el-table-column label="操作" width="300">
<template v-slot="scope">
<el-button type="text" size="mini" round icon="el-icon-plus"
<!-- <el-button type="text" size="mini" round icon="el-icon-plus"
@click="$refs.addClassifyRef.show({ pid: scope.row.id })"
v-if="!scope.row.pid">添加子分类</el-button>
v-if="!scope.row.pid">添加子分类</el-button> -->
<el-button type="text" size="mini" round icon="el-icon-edit"
@click="$refs.addClassifyRef.show(scope.row)">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="delHandle([scope.row.id])">

View File

@ -14,12 +14,12 @@
<el-form-item label="分类图片">
<uploadImg ref="uploadImg" @success="res => form.pic = res[0]" @remove="form.pic = ''" />
</el-form-item>
<el-form-item label="颜色标识">
<!-- <el-form-item label="颜色标识">
<el-color-picker v-model="form.style"></el-color-picker>
<div style="color: #999;">
标识色用在无图模式时的商品点单按钮显示可以更有效的从视觉.上进行商品分组
</div>
</el-form-item>
</el-form-item> -->
<el-form-item label="开关">
<el-switch v-model="form.isShow" :active-value="1" :inactive-value="0"></el-switch>
</el-form-item>

View File

@ -2,8 +2,8 @@
<div class="app-container">
<div class="left_menu">
<div class="search_wrap">
<el-input placeholder="名称/代码" v-model="query.name">
<el-button slot="append" icon="el-icon-search"></el-button>
<el-input placeholder="名称/代码" v-model="query.name" @change="searchCateory">
<el-button slot="append" icon="el-icon-search" @click="searchCateory"></el-button>
</el-input>
</div>
<div class="tree_wrap">
@ -15,16 +15,18 @@
<div class="header_wrap">
<el-button type="primary" @click="addHandle">新建</el-button>
</div>
<div class="table">
<el-table :data="tableData.list" border height="100%" v-loading="tableData.loading">
<div class="table" id="table_drag">
<el-table ref="table" :data="tableData.list" border height="100%" v-loading="tableData.loading"
row-key="id">
<el-table-column label="序号" type="index"></el-table-column>
<el-table-column label="ID" prop="id" width="80"></el-table-column>
<el-table-column label="菜品名称" prop="productNames"></el-table-column>
<el-table-column label="类型" prop="padLayoutName"></el-table-column>
<el-table-column label="所属小类" prop="productCategoryName"></el-table-column>
<el-table-column label="自定义分类" prop="customName"></el-table-column>
<el-table-column label="操作">
<el-table-column label="操作" width="200">
<template v-slot="scope">
<el-button type="text">拖动排序</el-button>
<el-button type="text" v-if="isPcBowser">拖动排序</el-button>
<el-button type="text" @click="editorHandle(scope.row, 1)">编辑</el-button>
<el-popconfirm title="确定删除吗?" @confirm="delTableHandle(scope.row.id)">
<el-button type="text" slot="reference">删除</el-button>
@ -45,10 +47,12 @@
</template>
<script>
import Sortable from 'sortablejs'
import AddPadPage from './components/addPadPage.vue'
import { tbShopCategoryGet } from '@/api/shop'
import { productGrouppage, productCategoryDelete } from '@/api/pad.js'
import editor from 'mavon-editor';
import { productGrouppage, productCategoryDelete, productCategorySort } from '@/api/pad.js'
import { swapArrayEle } from '@/utils/index.js'
export default {
components: {
AddPadPage
@ -59,6 +63,7 @@ export default {
name: ''
},
selectCatory: '',
treeDataOrgin: [],
treeData: [],
tableData: {
loading: false,
@ -71,8 +76,46 @@ export default {
},
mounted() {
this.tbShopCategoryGet()
if (this.isPcBowser) {
this.$nextTick(() => {
this.tableDrag()
})
}
},
methods: {
//
searchCateory() {
this.treeData = this.treeDataOrgin.filter(item => {
return item.name.includes(this.query.name)
})
},
//
tableDrag() {
const el = document.querySelector('#table_drag .el-table__body-wrapper tbody')
new Sortable(el, {
animation: 150,
onEnd: async e => {
// console.log('===', e);
if (e.oldIndex == e.newIndex) return
let arr = swapArrayEle(this.tableData.list, e.oldIndex, e.newIndex)
console.log(arr);
let data = arr.map((item, index) => {
return {
id: item.id,
sort: index
}
})
try {
await productCategorySort(data)
this.getTableData()
} catch (error) {
console.log(error);
}
}
});
},
//
async delTableHandle(id) {
try {
@ -119,6 +162,7 @@ export default {
sort: 'id,desc',
shopId: localStorage.getItem('shopId')
})
this.treeDataOrgin = res.content
this.treeData = res.content
this.getTableData()
} catch (error) {