kubbo/dvcp_v2_webapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

曲靖复制郫都 商品管理,订单管理,网格员积分

Browse Source
This commit is contained in:
aixianling
2023-03-07 16:08:10 +08:00
parent 590dfcc348
commit 5a43d51436
13 changed files with 3326 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
project/qujing/app/AppGoods/AppGoods.vue Normal file
View File

@@ -0,0 +1,63 @@
<template>
<div class="doc-circulation">
<keep-alive :include="['List']">
<component ref="component" :is="component" @change="onChange" :params="params" :instance="instance" :dict="dict"></component>
</keep-alive>
</div>
</template>
<script>
import List from './components/List'
import Add from './components/Add'
export default {
name: 'AppGoods',
label: '商品管理',
props: {
instance: Function,
dict: Object
},
data () {
return {
component: 'List',
params: {},
include: []
}
},
components: {
Add,
List
},
methods: {
onChange (data) {
if (data.type === 'Add') {
this.component = 'Add'
this.params = data.params
}
if (data.type === 'List') {
this.component = 'List'
this.params = data.params
this.$nextTick(() => {
if (data.isRefresh) {
this.$refs.component.getList()
}
})
}
}
}
}
</script>
<style lang="scss">
.doc-circulation {
height: 100%;
background: #F3F6F9;
overflow: auto;
}
</style>

268
project/qujing/app/AppGoods/components/Add.vue Normal file
View File

@@ -0,0 +1,268 @@
<template>
<ai-detail class="appgoods">
<template slot="title">
<ai-title title="添加商品" isShowBack isShowBottomBorder @onBackClick="cancel(false)">
</ai-title>
</template>
<template slot="content">
<ai-card title="基本信息">
<template #content>
<el-form :model="form" label-width="120px" ref="form">
<el-form-item label="商品名称" prop="merchandiseName" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
<el-input type="input" v-model="form.merchandiseName" clearable placeholder="请输入商品名称" maxlength="30" show-word-limit></el-input>
</el-form-item>
<el-form-item label="商品图片" prop="imageUrl" :rules="[{required: true, message: '请选择商品图片', trigger: 'change'}]">
<ai-uploader
:instance="instance"
isShowTip
isCrop
:cropOps="{
fixedNumber: [1, 1]
}"
v-model="form.imageUrl"
:limit="1">
<template slot="tips">
<p>最多上传1张图片,单个文件最大10MB，支持jpg、jpeg、png格式</p>
<p>建议尺寸：800*800</p>
</template>
</ai-uploader>
</el-form-item>
<el-form-item label="商品单价" prop="merchandiseIntegral" :rules="[{required: true, message: '请输入商品单价', trigger: 'blur'}]">
<el-input-number type="input" v-model="form.merchandiseIntegral" clearable placeholder="请输入商品单价" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="商品库存" prop="merchandiseNumber" :rules="[{required: true, message: '请输入商品库存', trigger: 'blur'}]">
<el-input-number type="input" v-model="form.merchandiseNumber" clearable placeholder="请输入商品库存" :min="1"></el-input-number>
</el-form-item>
<el-form-item label="可见范围" prop="visibleRange" :rules="[{required: true, message: '请输入商品名称', trigger: 'blur'}]">
<el-radio-group v-model="form.visibleRange">
<el-radio label="0">不限</el-radio>
<el-radio label="1">仅指定网格可见</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="选择网格" v-if="form.visibleRange === '1'" prop="wxGroupsName" style="width: 100%;" :rules="[{ required: true, message: '请选择网格', trigger: 'change' }]">
<ai-picker
:instance="instance"
multiple
dialogTitle="选择网格"
:ops="{label: 'girdName'}"
pageTitle="网格"
action="/app/appgirdinfo/girdList"
v-model="form.rangeList"
@pick="onPick"
@change="onSelcetChange">
<div class="AppAnnounceDetail-select">
<el-input size="small" class="AppAnnounceDetail-select__input" placeholder="请选择..." disabled v-model="form.wxGroupsName"></el-input>
<div class="select-left" v-if="form.rangeList.length">
<span v-for="(item, index) in girdList" :key="index" v-if="index < 9">{{ item.girdName }}</span>
<em v-if="girdList.length > 9">等{{ girdList.length }}个</em>
</div>
<i v-if="!form.rangeList.length">请选择</i>
<div class="select-right">{{ form.rangeList.length ? '重新选择' : '选择' }}</div>
</div>
</ai-picker>
</el-form-item>
</el-form>
</template>
</ai-card>
</template>
<template #footer>
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="confirm">提交</el-button>
</template>
</ai-detail>
</template>
<script>
export default {
name: 'Add',
props: {
instance: Function,
dict: Object,
params: Object
},
data () {
return {
info: {},
form: {
merchandiseName: '',
merchandiseIntegral: '',
merchandiseNumber: '',
wxGroupsName: '',
rangeList: [],
visibleRange: '',
imageUrl: []
},
girdList: [],
cropOps: {
width: "336px",
height: "210px"
},
id: ''
}
},
created () {
if (this.params && this.params.id) {
this.id = this.params.id
this.getInfo(this.params.id)
}
},
methods: {
getInfo (id) {
this.instance.post(`/app/appintegralmerchandise/queryDetailById?id=${id}`).then(res => {
if (res.code === 0) {
this.form = res.data
this.form.imageUrl = [{
url: res.data.imageUrl
}]
if (res.data.rangeList && res.data.rangeList.length) {
this.form.wxGroupsName = 1
this.girdList = res.data.rangeList.map(v => {
return {
...v,
id: v.rangeId,
girdName: v.rangeName
}
})
this.form.rangeList = res.data.rangeList.map(v => v.rangeId)
}
}
})
},
onPick (e) {
this.girdList = e
},
onSelcetChange (e) {
if (e.length) {
this.form.wxGroupsName = '1'
} else {
this.form.wxGroupsName = ''
this.form.wxGroups = []
}
},
confirm () {
this.$refs.form.validate((valid) => {
if (valid) {
this.instance.post(`/app/appintegralmerchandise/addOrUpdate`, {
...this.form,
imageUrl: this.form.imageUrl[0].url,
rangeList: this.girdList.length ? this.girdList.map(v => {
return {
rangeId: v.id,
rangeName: v.girdName
}
}): []
}).then(res => {
if (res.code == 0) {
this.$message.success('提交成功')
setTimeout(() => {
this.cancel(true)
}, 600)
}
})
}
})
},
cancel (isRefresh) {
this.$emit('change', {
type: 'List',
isRefresh: !!isRefresh
})
}
}
}
</script>
<style scoped lang="scss">
.appgoods {
.AppAnnounceDetail-select {
display: flex;
align-items: center;
min-height: 32px;
line-height: 1;
background: #F5F5F5;
border-radius: 4px;
border: 1px solid #D0D4DC;
cursor: pointer;
overflow: hidden;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
border-color: #26f;
}
& > i {
flex: 1;
height: 100%;
line-height: 32px;
padding: 0 12px;
color: #888888;
font-size: 14px;
font-style: normal;
border-right: 1px solid #D0D4DC;
background: #fff;
}
.AppAnnounceDetail-select__input {
position: absolute;
left: 0;
top: 0;
z-index: -1;
opacity: 0;
height: 100%;
}
.select-right {
height: 100%;
padding: 0 12px;
color: #222222;
font-size: 12px;
cursor: pointer;
transition: all ease 0.3s;
&:hover {
opacity: 0.5;
}
}
.select-left {
display: flex;
flex-wrap: wrap;
flex: 1;
padding: 5px 0 0px 12px;
border-right: 1px solid #D0D4DC;
border-radius: 4px 0 0 4px;
background: #fff;
em {
height: 22px;
line-height: 22px;
margin: 0 4px 5px 0;
color: #222222;
font-size: 12px;
font-style: normal;
}
span {
height: 22px;
line-height: 22px;
margin: 0 4px 5px 0;
padding: 0 8px;
font-size: 12px;
color: #222222;
background: #F3F4F7;
border-radius: 2px;
border: 1px solid #D0D4DC;
}
}
}
}
</style>

270
project/qujing/app/AppGoods/components/List.vue Normal file
View File

@@ -0,0 +1,270 @@
<template>
<ai-list class="list">
<ai-title slot="title" title="商品管理" isShowBottomBorder>
<template #sub>
<span>添加的商品即可在积分超市中下单兑换</span>
</template>
</ai-title>
<template slot="content">
<ai-search-bar bottomBorder>
<template #left>
<ai-picker
:instance="instance"
dialogTitle="选择网格"
:ops="{label: 'girdName'}"
pageTitle="网格"
action="/app/appgirdinfo/girdList"
@pick="onPick"
@change="search.current = 1, getList()">
<div class="AppAnnounceDetail-select">
<div class="userSelcet">
<span style="color: #606266;" v-if="girdList.length">{{ girdList.length ? girdList[0].girdName : '' }}</span>
<span v-else>选择网格</span>
<i class="el-icon-arrow-up" v-if="!girdList.length"></i>
<i class="el-icon-circle-close" v-if="girdList.length" @click.stop="girdList = [], search.girdId = '', search.current = 1, getList()"></i>
</div>
</div>
</ai-picker>
<el-button size="small" type="primary" icon="iconfont iconAdd" @click="toAdd('')">添加商品</el-button>
</template>
<template #right>
<el-input
v-model="search.merchandiseName"
size="small"
placeholder="请输入商品名称"
clearable
v-throttle="() => {search.current = 1, getList()}"
@clear="search.current = 1, search.merchandiseName = '', getList()"
suffix-icon="iconfont iconSearch">
</el-input>
</template>
</ai-search-bar>
<ai-table
:tableData="tableData"
:col-configs="colConfigs"
:total="total"
v-loading="loading"
style="margin-top: 16px;"
:current.sync="search.current"
:size.sync="search.size"
@getList="getList">
<el-table-column slot="goods" width="280px" label="商品" align="left">
<template slot-scope="{ row }">
<div class="goods">
<ai-uploader
:instance="instance"
disabled
:value="[{url: row.imageUrl}]"
:limit="1">
</ai-uploader>
<span :title="row.merchandiseName">{{ row.merchandiseName }}</span>
</div>
</template>
</el-table-column>
<el-table-column slot="options" width="160px" fixed="right" label="操作" align="center">
<template slot-scope="{ row }">
<div class="table-options">
<el-button type="text" @click="operation(row.id, 0)" v-if="row.status === '0' || row.status === '2'">下架</el-button>
<el-button type="text" @click="operation(row.id, 1)" v-if="row.status === '1'">上架</el-button>
<el-button type="text" @click="toAdd(row.id)">编辑</el-button>
<el-button type="text" @click="remove(row.id)">删除</el-button>
</div>
</template>
</el-table-column>
</ai-table>
</template>
</ai-list>
</template>
<script>
export default {
name: 'List',
props: {
instance: Function,
dict: Object
},
data () {
return {
search: {
current: 1,
size: 10,
merchandiseName: '',
girdId: ''
},
name: '',
info: {},
colConfigs: [
{ slot: 'goods', label: '商品' },
{ prop: 'merchandiseIntegral', align: 'center', label: '单价', sortable: true },
{ prop: 'merchandiseNumber', align: 'center', label: '库存', sortable: true },
{
prop: 'exchangeNumber',
align: 'center',
label: '兑换量',
sortable: true
},
{
prop: 'visibleRange',
align: 'center',
label: '可见范围',
format: v => v === '0' ? '不限' : '指定网格'
},
{
prop: 'launchTime',
align: 'center',
label: '上架时间'
},
{
prop: 'status',
align: 'center',
label: '状态',
format: v => this.mapStatus(v)
}
],
ids: [],
tableData: [],
total: 0,
loading: false,
girdList: []
}
},
created () {
this.getList()
},
methods: {
onPick (e) {
this.girdList = e
if (e.length) {
this.search.girdId = e[0].id
} else {
this.search.girdId = ''
this.getList()
}
},
getList () {
this.instance.post(`/app/appintegralmerchandise/list`, null, {
params: {
...this.search
}
}).then(res => {
if (res.code == 0) {
this.tableData = res.data.records
this.total = res.data.total
}
})
},
mapStatus (status) {
return {
'0': '可兑换',
'1': '已下架',
'2': '已兑完',
'3': '已删除'
}[status]
},
toAdd (id) {
this.$emit('change', {
type: 'Add',
params: {
id: id || ''
}
})
},
operation (id, status) {
this.$confirm(status === '1' ? '确定上架该商品？' : '确定下架该商品？').then(() => {
this.instance.post(`/app/appintegralmerchandise/takeOnOffById?id=${id}&opType=${status}`).then(res => {
if (res.code == 0) {
this.$message.success(status === '1' ? '上架成功' : '下架成功')
this.getList()
}
})
})
},
remove (id) {
this.$confirm('删除后，商品将不可恢复，是否继续？').then(() => {
this.instance.post(`/app/appintegralmerchandise/delete?ids=${id}`).then(res => {
if (res.code == 0) {
this.$message.success('删除成功！')
this.getList()
}
})
})
}
}
}
</script>
<style scoped lang="scss">
.list {
.goods {
display: flex;
align-items: center;
img {
width: 80px;
height: 80px;
margin-right: 20px;
}
span {
flex: 1;
display: -webkit-box;
overflow: hidden;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
}
}
.userSelcet {
display: flex;
align-items: center;
justify-content: space-between;
width: 215px;
height: 32px;
line-height: 32px;
border-radius: 4px;
border: 1px solid #d0d4dc;
overflow: hidden;
cursor: pointer;
transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
&:hover {
border-color: $placeholderColor;
}
i {
display: flex;
position: relative;
align-items: center;
justify-content: center;
width: 30px;
height: 100%;
line-height: 32px;
font-size: 14px;
text-align: center;
color: #d0d4dc;
transform: rotateZ(180deg);
}
.el-icon-circle-close:hover {
opacity: 0.6;
}
span {
flex: 1;
padding: 0 15px;
font-size: 12px;
color: $placeholderColor;
}
}
}
</style>