pathSelection组件 调试修改;ui图标修改;分类内容编辑修改;商品列表页完善(推荐 显示 排序) ; 商品添加页开发

This commit is contained in:
szdot 2023-10-31 19:30:41 +08:00
parent a83954a494
commit 0dd252b392
16 changed files with 295 additions and 146 deletions

View File

@ -1,70 +0,0 @@
<template>
<el-select v-model="form.shop_id" filterable :placeholder="allSel === true ? '所有商铺' : '请选择,也可输入搜索'"
@input="updateShopId">
<el-option v-if="allSel === true && shopList.length > 1" label="所有商铺" value="">
<el-avatar class="vm f-s-12" shape="square" :size="25"> all </el-avatar>
<span class="rspan">所有商铺</span>
</el-option>
<el-option v-for="item in shopList" :key="item.id" :label="item.name" :value="item.shop_id">
<el-avatar v-if="item.logo != ''" class="vm" shape="square" :size="25"
:src="$store.state.settings.host + '/Data/UploadFiles/logo/' + item.logo">
</el-avatar>
<el-avatar v-else :size="25" class="vm" icon="iconfont icon-tuxiang"></el-avatar>
<span class="rspan">{{ item.name }}</span>
</el-option>
</el-select>
</template>
<script>
export default {
name: 'Selection',
props: {
value: String, // prop
allSel: Boolean //
},
data () {
return {
form: {
shop_id: this.initialShopId
}
}
},
computed: {
//
shopList () {
return this.$store.state.shopList
}
},
watch: {
shopList (val) {
this.form.shop_id = this.$store.state.user.shop_id
this.updateShopId()
}
},
created () {
if (this.shopList.length > 0) {
this.form.shop_id = this.$store.state.user.shop_id
this.updateShopId()
}
},
methods: {
updateShopId () {
this.$emit('input', this.form.shop_id) // input
}
}
}
</script>
<style lang="scss" scoped>
.centered-avatar {
display: flex;
align-items: center;
justify-content: center;
}
.rspan {
float: right;
color: #8492a6;
font-size: 13px
}
</style>

View File

@ -327,7 +327,7 @@ const routes = [
component: Layout,
redirect: '/product/index',
meta: {
title: '品管理',
title: '品管理',
icon: 'iconfont icon-chanpin',
roles: ['admin', 'editor'],
tapName: 'admin'
@ -337,7 +337,7 @@ const routes = [
path: '/product/index',
component: () => import('@/views/layout/components/main/product/index'),
meta: {
title: '品列表',
title: '品列表',
icon: 'iconfont icon-chanpinliebiao-02',
roles: ['admin', 'editor'],
tapName: 'admin'
@ -347,7 +347,7 @@ const routes = [
path: '/product/add',
component: () => import('@/views/layout/components/main/product/add'),
meta: {
title: '添加品',
title: '添加品',
icon: 'iconfont icon-huoquchanpin',
roles: ['admin', 'editor'],
tapName: 'admin'
@ -357,7 +357,7 @@ const routes = [
path: '/product/edit/:id',
component: () => import('@/views/layout/components/main/product/add'),
meta: {
title: '编辑品',
title: '编辑品',
icon: 'iconfont icon-huoquchanpin',
roles: ['admin', 'editor'],
tapName: 'admin',

View File

@ -612,6 +612,60 @@ const store = new Vuex.Store({
}
return res
},
/**
* @description: 产品排序
* @param {*} 产品信息
*/
async fetchOrderProduct ({ dispatch }, form) {
const params = new URLSearchParams()
params.append('shop_id', form.shop_id)
params.append('id', form.id)
params.append('sort', form.sort)
const res = await api.post('orderProduct', params, 'Admin')
if (res.data.status === 1) {
await dispatch('fetchProductList')// 刷新产品列表
Message.success(res.data.msg)
} else {
Message.error(res.data.msg)
}
return res
},
/**
* @description: 产品前端显示隐藏
* @param {*} 产品信息
*/
async fetchShowProduct ({ dispatch }, form) {
const params = new URLSearchParams()
params.append('shop_id', form.shop_id)
params.append('id', form.id)
params.append('show', form.show)
const res = await api.post('showProduct', params, 'Admin')
if (res.data.status === 1) {
await dispatch('fetchProductList')// 刷新产品列表
Message.success(res.data.msg)
} else {
Message.error(res.data.msg)
}
return res
},
/**
* @description: 产品前端推荐位
* @param {*} 产品信息
*/
async fetchRecommendProduct ({ dispatch }, form) {
const params = new URLSearchParams()
params.append('shop_id', form.shop_id)
params.append('id', form.id)
params.append('recommend', form.recommend)
const res = await api.post('recommendProduct', params, 'Admin')
if (res.data.status === 1) {
await dispatch('fetchProductList')// 刷新产品列表
Message.success(res.data.msg)
} else {
Message.error(res.data.msg)
}
return res
},
/**
* @description: 获取订单列表 ps:待发货及待收货 并且不是退款成功状态
* @return {*} 列表

View File

@ -1 +1 @@
@import 'https://at.alicdn.com/t/c/font_3703467_89thn6xt9aj.css'; //iconfont阿里巴巴
@import 'https://at.alicdn.com/t/c/font_3703467_8nepryze00i.css'; //iconfont阿里巴巴

View File

@ -13,7 +13,7 @@
<el-main class="border p-20">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item v-if="pageState === 'add'" label="所属商铺">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="账号">
<el-input v-model="form.name" placeholder="账号" :disabled="adminId == undefined ? false : true" />
@ -56,7 +56,7 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'AdminAdd',
@ -78,7 +78,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
/**

View File

@ -9,7 +9,7 @@
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<Selection v-model="form.shop_id" :allSel="true" />
<SelectionShopId v-model="form.shop_id" :allSel="true" />
</el-button-group>
<!-- 管理员列表 -->
<el-table class="m-t-20 w-100" ref="myTable"
@ -51,7 +51,7 @@
<script>
import { parseTime, countSelIdArr } from '@/utils'
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Admin',
@ -65,7 +65,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
adminList () {

View File

@ -13,7 +13,7 @@
<el-main class="border p-20">
<!-- 用户select选项 -->
<el-button-group class="m-b-10">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-button-group>
<!-- 分类树 -->
<div>
@ -102,7 +102,7 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Category',
@ -128,7 +128,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
shop_id () {

View File

@ -13,25 +13,41 @@
<el-main class="border p-20">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item v-if="pageState === 'add'" label="所属商铺">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="飞机名称">
<el-input v-model="form.name" placeholder="起名可以是中文" />
<el-form-item label="所属分类">
<SelectionPath v-model="form.path" :shop_id="form.shop_id" />
</el-form-item>
<el-form-item label="购买日期">
<el-date-picker v-if="pageState == 'add' ? true : false" v-model="form.date" type="date"
placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="timestamp">
</el-date-picker>
<el-date-picker v-else v-model="form.date" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日"
value-format="timestamp" disabled>
</el-date-picker>
<el-form-item label="商品名称">
<el-input v-model="form.name" placeholder="商品名称" />
</el-form-item>
<el-form-item :label="form.onoff === true ? '启用' : '停用'">
<el-form-item label="商品编号">
<el-input v-model="form.name" placeholder="商品编号,方便统筹" />
</el-form-item>
<el-form-item label="排序">
<el-input v-model="form.sort" placeholder="数值大排在前面,缺省值为0" />
</el-form-item>
<el-form-item :label="form.onoff === true ? '推荐Y' : '推荐N'">
<el-switch v-model="form.onoff" />
</el-form-item>
<el-form-item label="飞机描述">
<el-input v-model="form.desc" type="textarea" placeholder="非必填" />
<el-form-item :label="form.onoff === true ? '显示Y' : '显示N'">
<el-switch v-model="form.onoff" />
</el-form-item>
<el-form-item label="库存数量">
<el-input v-model="form.name" placeholder="小程序每消费一单库存既减1" />
</el-form-item>
<!-- 搜索标签 -->
<el-form-item label="搜索标签">
<el-tag :key="tag" v-for="tag in dynamicTags" closable :disable-transitions="false"
@close="handleClose(tag)">
{{ tag }}
</el-tag>
<el-input class="input-new-tag" v-if="inputVisible" v-model="inputValue" ref="saveTagInput" size="small"
@keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm">
</el-input>
<el-button v-else class="button-new-tag" size="small" @click="showInput">+ 点击添加</el-button>
</el-form-item>
<!-- END 搜索标签 -->
<el-form-item v-if="pageState == 'add' ? true : false">
<el-button type="primary" icon="el-icon-plus" @click="addAir">创建</el-button>
<el-button @click="setForm({})" class="iconfont icon-qingchu">
@ -50,12 +66,16 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
import SelectionPath from '@/components/SelectionPath'
export default {
name: 'RegisterAdd',
data () {
return {
dynamicTags: ['标签一', '标签二', '标签三'],
inputVisible: false,
inputValue: '',
form: {
shop_id: '',
name: '',
@ -69,7 +89,8 @@ export default {
}
},
components: {
Selection
SelectionShopId,
SelectionPath
},
computed: {
//
@ -148,4 +169,22 @@ export default {
.line {
text-align: center;
}
.el-tag+.el-tag {
margin-left: 10px;
}
.button-new-tag {
margin-left: 10px;
height: 32px;
line-height: 30px;
padding-top: 0;
padding-bottom: 0;
}
.input-new-tag {
width: 90px;
margin-left: 10px;
vertical-align: bottom;
}
</style>

View File

@ -9,22 +9,49 @@
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<Selection v-model="form.shop_id" :allSel="true" />
<SelectionShopId v-model="form.shop_id" />
</el-button-group>
<!-- 分类select选项 -->
<el-button-group class="m-l-20">
<SelectionPath v-model="form.path" :shop_id="form.shop_id" />
</el-button-group>
<!-- 飞机表格 -->
<el-table class="m-t-20 w-100" ref="myTable"
:data="productListArr.slice((currentPage - 1) * pageSize, currentPage * pageSize)" border tooltip-effect="dark">
<el-table-column align="center" type="selection" width="40">
</el-table-column>
<el-table-column align="center" label="排序" width="70">
<template slot-scope="scope">
<el-input v-model="scope.row.sort" @focus="tempSort = scope.row.sort"
@blur="blurOrder(scope.row.id, scope.row.sort)"></el-input>
</template>
</el-table-column>
<el-table-column align="center" prop="id" label="id" width="50">
</el-table-column>
<el-table-column prop="name" label="名称" width="150" min-width="150">
</el-table-column>
<el-table-column prop="controler" label="操作" width="200" min-width="200">
<el-table-column prop="pro_number" label="产品编号" min-width="120">
</el-table-column>
<el-table-column label="产品缩率图" width="120" min-width="120">
<template v-if="scope.row.photo_min != ''" slot-scope="scope">
<el-image :src="$store.state.settings.host + '/Data/UploadFiles/product/' + scope.row.photo_min"
:preview-src-list="[$store.state.settings.host + '/Data/UploadFiles/product/' + scope.row.photo_min]">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline"></i>
</div>
</el-image>
</template>
</el-table-column>
<el-table-column prop="controler" label="操作" width="380" min-width="380">
<template slot-scope="scope">
<el-button-group>
<el-button type="primary" icon="el-icon-search"
@click="$router.replace(`/planes/index/${scope.row.id}/${scope.row.name}`)">查看</el-button>
<el-button :type="scope.row.recommend == '1' ? 'success' : 'info'" class="iconfont icon-tuijian"
@click="handeleRecommend(scope.row.id, scope.row.recommend)"><span class="m-l-5">推荐</span></el-button>
<el-button :type="scope.row.show == '1' ? 'primary' : 'info'"
:class="scope.row.show == '1' ? 'iconfont icon-yanjing' : 'iconfont icon-biyanjing'"
@click="handeleShow(scope.row.id, scope.row.show)"><span class="m-l-5">显示</span></el-button>
<el-button type="warning" icon="el-icon-edit"
@click="$router.replace(`/admin/edit/${scope.row.id}`)">编辑</el-button>
<el-button type="danger" icon="el-icon-delete" @click="deleteAir([scope.row.id])">删除</el-button>
</el-button-group>
</template>
@ -38,42 +65,99 @@
</template>
<script>
import { parseTime, countSelIdArr } from '@/utils'
import Selection from '@/components/Selection'
import { countSelIdArr } from '@/utils'
import SelectionShopId from '@/components/SelectionShopId'
import SelectionPath from '@/components/SelectionPath'
export default {
name: 'Register',
data () {
return {
pageSize: 8, //
pageSize: 30, //
currentPage: 1, //
form: {
shop_id: ''
}
shop_id: '',
path: ''
},
tempSort: ''//
}
},
components: {
Selection
SelectionShopId,
SelectionPath
},
computed: {
//
productList () {
return this.$store.state.productList
},
//
categoryList () {
return this.$store.state.categoryList
},
/**
* @description: 过滤掉 不对应客户的 产品列表
* @return: 产品列表
*/
productListArr () {
if (this.form.shop_id !== '') {
return this.productList.filter((item) => item.shop_id === this.form.shop_id)
if (this.form.path === 'none') { //
const list = this.productList.filter((item) => {
let t = true
for (let index = 0; index < this.categoryList.length; index++) {
if (this.categoryList[index].path === item.path) {
t = false
break
}
}
return t
})
return list
} else if (this.form.path !== '') {
var pattern = this.form.path // selection path
//
var escapedPattern = pattern.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')
//
var regexPattern = new RegExp('^' + escapedPattern + '(-|$)')
const list = this.productList.filter((item) => {
let t = false
for (let index = 0; index < this.categoryList.length; index++) { // path path
if (this.categoryList[index].path === item.path) {
t = true
break
}
}
if (t) {
return regexPattern.test(item.path)
} else {
return this.productList
return false
}
})
return list
} else {
return this.productList //
}
}
},
methods: {
countSelIdArr,
//
handleClose (tag) {
this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
},
showInput () {
this.inputVisible = true
this.$nextTick(_ => {
this.$refs.saveTagInput.$refs.input.focus()
})
},
handleInputConfirm () {
const inputValue = this.inputValue
if (inputValue) {
this.dynamicTags.push(inputValue)
}
this.inputVisible = false
this.inputValue = ''
},
/**
* @description: 跳转到编辑页面
*/
@ -95,20 +179,62 @@ export default {
*/
deleteAir (idArr) {
this.$store.dispatch('fetchDelAir', idArr)
},
/**
* @description: 排序input失焦 更新数据库的排序
* @param {*} id 产品id
* @param {*} sort 排序序号
*/
async blurOrder (id, sort) {
if (this.tempSort !== sort) { // api
this.form.id = id
this.form.sort = sort
const res = await this.$store.dispatch('fetchOrderProduct', this.form)
if (res.data.status === 1) {
this.$router.push({ path: '/product/index', query: { refresh: Date.now() } })
}
}
},
/**
* @description: 设置前端是否显示 产品
* @param {*} id 产品id
* @param {*} show 0隐藏 1显示
*/
async handeleShow (id, show) {
this.form.id = id
if (show === '0') {
this.form.show = '1'
} else {
this.form.show = '0'
}
const res = await this.$store.dispatch('fetchShowProduct', this.form)
if (res.data.status === 1) {
this.$router.push({ path: '/product/index', query: { refresh: Date.now() } })
}
},
/**
* @description: 设置前端是否推荐 产品
* @param {*} id 产品id
* @param {*} recommend 0推荐 1不推荐
*/
async handeleRecommend (id, recommend) {
this.form.id = id
if (recommend === '0') {
this.form.recommend = '1'
} else {
this.form.recommend = '0'
}
const res = await this.$store.dispatch('fetchRecommendProduct', this.form)
if (res.data.status === 1) {
this.$router.push({ path: '/product/index', query: { refresh: Date.now() } })
}
}
},
watch: {
productList (val) {
console.log(val)
}
},
created () {
if (this.productList.length > 0) {
console.log(this.productList)
}
},
filters: {
parseTime,
countSelIdArr
}
}
@ -117,9 +243,9 @@ export default {
<style lang="scss" scoped>
@import "@/styles/theme.scss";
.el-tag {
i {
vertical-align: middle
}
font-size: 18px !important;
margin-right: 12px;
vertical-align: middle;
}
</style>

View File

@ -13,7 +13,7 @@
<el-main class="border p-20">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item v-if="pageState === 'add'" label="所属商铺">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="飞机名称">
<el-input v-model="form.name" placeholder="起名可以是中文" />
@ -50,7 +50,7 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'RegisterAdd',
@ -69,7 +69,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
//

View File

@ -9,7 +9,7 @@
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<Selection v-model="form.shop_id" :allSel="true" />
<SelectionShopId v-model="form.shop_id" :allSel="true" />
</el-button-group>
<!-- 飞机表格 -->
<el-table class="m-t-20 w-100" ref="myTable"
@ -62,7 +62,7 @@
<script>
import { parseTime, countSelIdArr } from '@/utils'
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Register',
@ -76,7 +76,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
//

View File

@ -15,7 +15,7 @@
<el-main class="border p-20 mainBox bg-white">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item v-if="pageState === 'add'" label="所属商铺">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="航线标题">
<el-input v-model="form.name" placeholder="航线标题" />
@ -49,7 +49,7 @@
<script>
import MapBox from '@/components/MapBox'
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'RouteAdd',
@ -72,7 +72,7 @@ export default {
},
components: {
MapBox,
Selection
SelectionShopId
},
computed: {
/**

View File

@ -9,7 +9,7 @@
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<Selection v-model="form.shop_id" :allSel="true" />
<SelectionShopId v-model="form.shop_id" :allSel="true" />
</el-button-group>
<!-- 航线表格 -->
<el-table class="m-t-20 w-100" ref="myTable"
@ -39,7 +39,7 @@
<script>
import { countSelIdArr } from '@/utils'
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Route',
@ -53,7 +53,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
/**

View File

@ -14,7 +14,7 @@
<el-form ref="form" :model="form" label-width="120px">
<!-- 用户select选项 -->
<el-form-item v-if="pageState === 'edit'" label="商铺选择">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="店铺名称">
<el-input v-model="form.name" placeholder="推荐使用景区名称" />
@ -81,7 +81,7 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'ShopEdit',
@ -108,7 +108,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
/**
@ -205,7 +205,7 @@ export default {
this.form.closeing_time = this.formatDateToString(this.form.intervalTime[1])
const res = await this.$store.dispatch('fetchAddShop', this.form)
if (res.data.status === 1) {
this.$router.go(0)//
this.$router.push({ path: '/shop/add', query: { refresh: Date.now() } })
}
},
/**
@ -216,7 +216,7 @@ export default {
this.form.closeing_time = this.formatDateToString(this.form.intervalTime[1])
const res = await this.$store.dispatch('fetchSaveShop', this.form)
if (res.data.status === 1) {
this.$router.go(0)//
this.$router.push({ path: '/shop/edit', query: { refresh: Date.now() } })
}
}
},

View File

@ -13,7 +13,7 @@
<el-main class="border p-20">
<el-form ref="form" :model="form" label-width="120px">
<el-form-item v-if="pageState === 'add'" label="所属商铺">
<Selection v-model="form.shop_id" :allSel="false" />
<SelectionShopId v-model="form.shop_id" :allSel="false" />
</el-form-item>
<el-form-item label="站点名称">
<el-input v-model="form.sitename" placeholder="取餐站点的名字" />
@ -56,7 +56,7 @@
</template>
<script>
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'SiteAdd',
@ -79,7 +79,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
/**

View File

@ -9,7 +9,7 @@
</el-button-group>
<!-- 用户select选项 -->
<el-button-group class="m-l-20">
<Selection v-model="form.shop_id" :allSel="true" />
<SelectionShopId v-model="form.shop_id" :allSel="true" />
</el-button-group>
<!-- 站点表格 -->
<el-table class="m-t-20 w-100" ref="myTable"
@ -55,7 +55,7 @@
<script>
import { countSelIdArr } from '@/utils'
import Selection from '@/components/Selection'
import SelectionShopId from '@/components/SelectionShopId'
export default {
name: 'Site',
@ -69,7 +69,7 @@ export default {
}
},
components: {
Selection
SelectionShopId
},
computed: {
/**