楼层
This commit is contained in:
tangzh
parent
a47b0047ee
commit
9131a17369
63
src/api/home.js
Normal file
63
src/api/home.js
Normal file
@ -0,0 +1,63 @@
|
||||
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 新增EbHome
|
||||
* @param pram
|
||||
*/
|
||||
export function homeCreateApi(data) {
|
||||
return request({
|
||||
url: '/admin/floor/save',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome更新
|
||||
* @param pram
|
||||
*/
|
||||
export function homeUpdateApi(data) {
|
||||
return request({
|
||||
url: '/admin/floor/update',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome详情
|
||||
* @param pram
|
||||
*/
|
||||
export function homeDetailApi(id) {
|
||||
return request({
|
||||
url: `/admin/floor/info/${id}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome删除
|
||||
* @param pram
|
||||
*/
|
||||
export function homeDeleteApi(params) {
|
||||
return request({
|
||||
url: `/admin/floor/delete`,
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ebhome列表
|
||||
* @param pram
|
||||
*/
|
||||
export function homeListApi(params) {
|
||||
return request({
|
||||
url: '/admin/floor/list',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
63
src/api/homeItem.js
Normal file
63
src/api/homeItem.js
Normal file
@ -0,0 +1,63 @@
|
||||
|
||||
import request from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 新增EbHome
|
||||
* @param pram
|
||||
*/
|
||||
export function createApi(data) {
|
||||
return request({
|
||||
url: '/admin/floorItem/save',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome更新
|
||||
* @param pram
|
||||
*/
|
||||
export function updateApi(data) {
|
||||
return request({
|
||||
url: '/admin/floorItem/update',
|
||||
method: 'POST',
|
||||
data
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome详情
|
||||
* @param pram
|
||||
*/
|
||||
export function detailApi(id) {
|
||||
return request({
|
||||
url: `/admin/floorItem/info/${id}`,
|
||||
method: 'GET'
|
||||
})
|
||||
}
|
||||
|
||||
/**
|
||||
* ebhome删除
|
||||
* @param pram
|
||||
*/
|
||||
export function deleteApi(params) {
|
||||
return request({
|
||||
url: `/admin/floorItem/delete`,
|
||||
method: 'post',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* ebhome列表
|
||||
* @param pram
|
||||
*/
|
||||
export function listApi(params) {
|
||||
return request({
|
||||
url: '/admin/floorItem/list',
|
||||
method: 'GET',
|
||||
params
|
||||
})
|
||||
}
|
||||
|
||||
@ -31,6 +31,22 @@ const operationRouter = {
|
||||
icon: 'clipboard'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'home',
|
||||
name: 'home',
|
||||
component: () => import('@/views/home'),
|
||||
meta: {
|
||||
title: '楼层设置',
|
||||
icon: 'clipboard'
|
||||
}
|
||||
},
|
||||
{
|
||||
path: 'homeItem/list/:id',
|
||||
component: () => import('@/views/home/item/index'),
|
||||
name: 'homeItem',
|
||||
meta: { title: '楼层项', noCache: true, activeMenu: `/home/index` },
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path:'notification',
|
||||
name:'notification',
|
||||
|
||||
@ -36,6 +36,12 @@ const storeRouter = {
|
||||
name: 'StoreComment',
|
||||
meta: { title: '商品评论', icon: '' }
|
||||
},
|
||||
// {
|
||||
// path: 'problem',
|
||||
// component: () => import('@/views/store/problem/index'),
|
||||
// name: 'Problem',
|
||||
// meta: { title: '商品常见问题', icon: '' }
|
||||
// },
|
||||
{
|
||||
path: 'list/creatProduct/:id?/:isDisabled?',
|
||||
component: () => import('@/views/store/creatStore/index'),
|
||||
|
||||
230
src/views/home/add-and-update.vue
Normal file
230
src/views/home/add-and-update.vue
Normal file
@ -0,0 +1,230 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 基于 Element UI 新增和修改弹窗 -->
|
||||
<el-dialog
|
||||
:title="!dataForm.id ? '添加' : '修改'"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
@close="dialogClose"
|
||||
>
|
||||
<!-- 新增和创建表单表单 -->
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()"
|
||||
label-width="110px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示渠道" prop="channel">
|
||||
<el-select v-model="dataForm.channel" placeholder="展示渠道" class="selWidth" style="width: 220px">
|
||||
<el-option :value="item.id" v-for="(item, index) in channelList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="楼层图：" prop="imgUrl" v-if="this.dataForm.channel === '1'">
|
||||
<div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
|
||||
<div v-if="dataForm.imgUrl" class="pictrue"><img :src="dataForm.imgUrl"></div>
|
||||
<div v-else class="upLoad">
|
||||
<i class="el-icon-camera cameraIconfont" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="导航" prop="business" v-if="this.dataForm.channel === '2'">
|
||||
<el-select v-model="dataForm.business" placeholder="展示渠道" class="selWidth" style="width: 220px">
|
||||
<el-option :value="item.id" v-for="(item, index) in categoryList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="跳转类型" prop="jumpType">
|
||||
<el-select v-model="dataForm.jumpType" placeholder="请选择" class="selWidthd" style="width: 220px" @change="jumpTypeChange()">
|
||||
<el-option :value="item.id" v-for="(item, index) in jumpTypeList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选分类" prop="jumpIds" v-if="dataForm.jumpType == 2">
|
||||
<el-select v-model="dataForm.jumpIds" placeholder="选分类" class="selWidthd" style="width: 220px" @click.native="selectCate">
|
||||
<el-option :value="item.id" v-for="(item, index) in productCateList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="选商品" prop="jumpIds" v-else-if="dataForm.jumpType == 1">
|
||||
<el-input v-model="dataForm.jumpIds" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选商品" prop="jumpIds" v-else-if="dataForm.jumpType == 3">
|
||||
<el-input v-model="dataForm.jumpIds" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<!-- <el-form-item label="选活动" prop="jumpIds" v-if="dataForm.jumpType === 4">-->
|
||||
<!-- <el-input v-model="dataForm.jumpIds" placeholder="选活动"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!-- <el-form-item label="跳转地址" prop="jumpUrl">-->
|
||||
<!-- <el-input v-model="dataForm.jumpUrl" placeholder="跳转地址"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="是否无效" prop="status">
|
||||
<el-select v-model="dataForm.delFlag" class="selWidthd" style="width: 220px">
|
||||
<el-option label="有效" :value="1"></el-option>
|
||||
<el-option label="无效" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="选择商品"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="selectProductVisible"
|
||||
@close="selectProductSwitch(0)">
|
||||
<!-- 选择商品 -->
|
||||
<selectProductWindow v-if="selectProductShow" ref="select_product_window"/>
|
||||
<el-button type="primary" @click="selectProductOk()" style="margin-left: 90%">确定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/home.js'
|
||||
import {listCategroy} from "@/api/categoryApi";
|
||||
import selectProductWindow from "@/views/home/selectProduct";
|
||||
|
||||
export default {
|
||||
components: {selectProductWindow},
|
||||
data() {
|
||||
return {
|
||||
isDisabled: false, //this.$route.params.isDisabled==='1'?true:false,
|
||||
visible: false,
|
||||
categoryList: [],
|
||||
channelList: [
|
||||
{id: '1', name: '首页楼层'},
|
||||
{id: '2', name: '随心配套餐层'},
|
||||
{id: '3', name: '首页精品推荐'},
|
||||
],
|
||||
jumpTypeList: [
|
||||
{id: 0, name: '无跳转'},
|
||||
{id: 1, name: '商品详情'},
|
||||
{id: 2, name: '分类列表'},
|
||||
{id: 3, name: '商品列表'},
|
||||
// {id: 4, name: '活动栏目'},
|
||||
],
|
||||
productCateList: [],
|
||||
selectProductVisible: false,
|
||||
selectProductShow: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
title: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
channel: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
beginTime: '',
|
||||
endTime: '',
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{required: true, message: '名称 为必填项', trigger: 'blur'}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: '标题 为必填项', trigger: 'blur'}
|
||||
],
|
||||
jumpType: [
|
||||
{required: true, message: '跳转类型 为必填项', trigger: 'blur'}
|
||||
],
|
||||
channel: [
|
||||
{required: true, message: '展示渠道 为必填项', trigger: 'blur'}
|
||||
],
|
||||
orderNo: [
|
||||
{required: true, message: '排序 为必填项', trigger: 'blur'}
|
||||
],
|
||||
delFlag: [
|
||||
{required: true, message: '是否有效 为必填项', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) { // 初始化表单验证规则
|
||||
this.dataForm.id = id || 0
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
this.dialogClose();
|
||||
if (this.dataForm.id) {
|
||||
api.homeDetailApi(id).then(res => {
|
||||
this.dataForm = res;
|
||||
})
|
||||
}
|
||||
this.getCategoryList()
|
||||
})
|
||||
},
|
||||
dialogClose() {
|
||||
this.dataForm.jumpType = '';
|
||||
this.dataForm.jumpIds = '';
|
||||
this.dataForm.delFlag = '';
|
||||
this.dataForm.business = '';
|
||||
},
|
||||
getCategoryList() {
|
||||
listCategroy({ limit: 999, page: '1', status: 1, type: 8 }).then(res => {
|
||||
this.categoryList = res.list;
|
||||
})
|
||||
},
|
||||
// 表单数据提交
|
||||
dataSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.dataForm.id ?
|
||||
api.homeUpdateApi(this.dataForm).then(res => {
|
||||
this.$message.success('修改成功');
|
||||
}) :
|
||||
api.homeCreateApi(this.dataForm).then(res => {
|
||||
this.$message.success('新增成功');
|
||||
});
|
||||
this.visible = false;
|
||||
this.$emit('refreshDataList');
|
||||
}
|
||||
})
|
||||
},
|
||||
jumpTypeChange() {
|
||||
this.dataForm.jumpIds = '';
|
||||
},
|
||||
selectProductOk() {
|
||||
let products = this.$refs['select_product_window'].dataListSelections;
|
||||
if (products.length <= 0) {
|
||||
this.$message.error('请选择商品');
|
||||
return;
|
||||
}
|
||||
let ids = products.map(item => {return item.id})
|
||||
this.dataForm.jumpIds = ids + "";
|
||||
this.selectProductSwitch(0);
|
||||
},
|
||||
selectProductSwitch(flag) {
|
||||
this.selectProductVisible = (flag === 1 ? true : false);
|
||||
this.selectProductShow = (flag === 1 ? true : false);
|
||||
},
|
||||
selectCate() {
|
||||
listCategroy({ limit: 999, page: '1', status: 1, type: 1 }).then(res => {
|
||||
this.productCateList = res.list;
|
||||
})
|
||||
},
|
||||
// 点击商品图
|
||||
modalPicTap (tit, num, i,status) {
|
||||
const _this = this;
|
||||
if(_this.isDisabled) return;
|
||||
this.$modalUpload(function(img) {
|
||||
if(tit==='1'&& !num){
|
||||
_this.dataForm.imgUrl = img[0].sattDir
|
||||
}
|
||||
},tit, 'content')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
238
src/views/home/index.vue
Normal file
238
src/views/home/index.vue
Normal file
@ -0,0 +1,238 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form ref="form" inline :model="dataForm" size="small">
|
||||
<el-form-item label="标题：">
|
||||
<el-input v-model="dataForm.name" placeholder="请输入名称/标题" class="selWidth" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleSearch" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="展示渠道：">
|
||||
<el-select v-model="dataForm.channel" placeholder="展示渠道" clearable class="selWidth" @change="handleSearch">
|
||||
<el-option label="--请选择--" value=""></el-option>
|
||||
<el-option label="首页楼层" :value="1"></el-option>
|
||||
<el-option label="随心配套餐层" :value="2"></el-option>
|
||||
<el-option label="首页精品推荐" :value="3"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="acea-row">
|
||||
<el-button v-hasPermi="['admin:home:save']" size="mini" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
|
||||
<el-button v-hasPermi="['admin:home:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="跳转参数解析： " style="width: 100%">
|
||||
<span v-for="(value, key) in props.row.jumpIdsMap" class="mr10"> {{ key }} ：{{ value }} <br/></span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="标题">
|
||||
</el-table-column>
|
||||
<el-table-column label="楼层图" min-width="80" header-align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="demo-image__preview" style="text-align: center">
|
||||
<el-image v-if="scope.row.imgUrl"
|
||||
style="width: 36px; height: 36px;"
|
||||
:src="scope.row.imgUrl"
|
||||
:preview-src-list="[scope.row.imgUrl]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jumpType"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="跳转类型">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.jumpType == 0">无</span>
|
||||
<span v-else-if="scope.row.jumpType == 1">商品详情</span>
|
||||
<span v-else-if="scope.row.jumpType == 2">分类列表</span>
|
||||
<span v-else-if="scope.row.jumpType == 3">商品列表</span>
|
||||
<!-- <span v-else-if="scope.row.jumpType == 4">活动栏目</span>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jumpIds"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="跳转参数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="channelStr"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="展示渠道">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.channel == 1">首页楼层</span>
|
||||
<span v-else-if="scope.row.channel == 2">随心配套餐层</span>
|
||||
<span v-else-if="scope.row.channel == 3">首页精品推荐</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orderNo"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="排序">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.delFlag == 0">无效</span>
|
||||
<span v-else-if="scope.row.delFlag == 1">有效</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="250"
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<router-link :to="{path: '/operation/homeItem/list/' + scope.row.id + ''}">
|
||||
<el-button type="text" size="small" class="mr10">楼层项</el-button>
|
||||
</router-link>
|
||||
<el-button type="text" size="small" @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
|
||||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
<!-- 表单弹窗, 新增数据和修改数据 -->
|
||||
<add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AddOrUpdate from './add-and-update'
|
||||
import * as api from '@/api/home.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
name: '',
|
||||
},
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
addOrUpdateVisible: false,
|
||||
addOrUpdateItemVisible: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
AddOrUpdate
|
||||
},
|
||||
created() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true
|
||||
api.homeListApi(this.dataForm).then(res => {
|
||||
this.dataList = res.list
|
||||
this.totalPage = res.total
|
||||
this.dataListLoading = false
|
||||
}).catch(res => {
|
||||
this.dataListLoading = false
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 新增 / 修改
|
||||
addOrUpdateHandle(id) {
|
||||
this.addOrUpdateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdate.init(id)
|
||||
})
|
||||
},
|
||||
// 添加/修改 子项
|
||||
addOrUpdateItem() {
|
||||
this.$nextTick(() => {
|
||||
this.$refs.addOrUpdateItem.init(id)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id ? [id] : this.dataListSelections.map(item => {
|
||||
return item.id
|
||||
})
|
||||
this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
api.homeDeleteApi({ids : ids.join(',')}).then(res => {
|
||||
this.$message.success('操作成功')
|
||||
this.getDataList()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
295
src/views/home/item/add-item.vue
Normal file
295
src/views/home/item/add-item.vue
Normal file
@ -0,0 +1,295 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 基于 Element UI 新增和修改弹窗 -->
|
||||
<el-dialog
|
||||
:title="'楼层子项调整'"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
:before-close="handleClose"
|
||||
>
|
||||
<el-form :model="itemForm" :rules="dataRule" ref="itemForm">
|
||||
<el-form-item>
|
||||
<el-button type="primary" size="mini" icon="el-icon-edit" @click="addRow()">
|
||||
添加行
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
<el-form-item prop="region">
|
||||
<el-table :data="itemForm.region" border style="width: 100%" size="mini" class="tempBox">
|
||||
<el-table-column min-width="120px" align="center" :label="'名称'" prop="name">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.name" :prop="'region.'+scope.$index+'.name'">
|
||||
<el-input v-model="scope.row.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" :label="'标题'" prop="title">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.title" :prop="'region.'+scope.$index+'.title'">
|
||||
<el-input v-model="scope.row.title" placeholder="标题"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="50px" align="center" :label="'楼层图'" prop="imgUrl">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.imgUrl" :prop="'region.'+scope.$index+'.imgUrl'">
|
||||
<div class="upLoadPicBox" @click="modalPicTap('1', scope.$index)" :disabled="isDisabled">
|
||||
<div v-if="scope.row.imgUrl" class="pictrue"><img :src="scope.row.imgUrl"></div>
|
||||
<div v-else class="upLoad"><i class="el-icon-camera cameraIconfont" /></div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" :label="'跳转类型'" prop="jumpType">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.jumpType" :prop="'region.'+scope.$index+'.jumpType'">
|
||||
<el-select v-model="scope.row.jumpType" placeholder="请选择" class="selWidthd" style="width: 220px" @change="jumpTypeChange(scope.$index)">
|
||||
<el-option :value="item.id" v-for="(item, index) in jumpTypeList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" :label="'跳转类型'" prop="jumpIds">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.jumpIds" :prop="'region.'+scope.$index+'.jumpIds'">
|
||||
<el-input v-if="scope.row.jumpType === 1" v-model="scope.row.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1, 1, scope.$index)"></el-input>
|
||||
<!-- <el-input v-if="scope.row.jumpType === 1 || scope.row.jumpType === 3" v-model="scope.row.jumpIds" type="hidden"></el-input>-->
|
||||
|
||||
<el-select v-if="scope.row.jumpType === 2" v-model="scope.row.jumpIds" placeholder="选分类" class="selWidthd" style="width: 220px" @click.native="selectCate">
|
||||
<el-option :value="item.id" v-for="(item, index) in productCateList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
|
||||
<el-input v-if="scope.row.jumpType === 3" v-model="scope.row.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1, 0, scope.$index)"></el-input>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<!-- <el-table-column min-width="120px" align="center" :label="'跳转地址'" prop="jumpIds">-->
|
||||
<!-- <template slot-scope="scope">-->
|
||||
<!-- <el-form-item :rules="dataRule.jumpUrl" :prop="'region.'+scope.$index+'.jumpUrl'">-->
|
||||
<!-- <el-input v-model="scope.row.jumpUrl" placeholder="跳转地址"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-table-column>-->
|
||||
<el-table-column align="center" :label="'排序'" prop="orderNo">
|
||||
<template slot-scope="scope">
|
||||
<el-form-item :rules="dataRule.orderNo" :prop="'region.'+scope.$index+'.orderNo'">
|
||||
<el-input-number v-model="scope.row.orderNo" placeholder="排序" controls-position="right" :min="0" style="width: 100px"/>
|
||||
</el-form-item>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column align="center" label="操作" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
type="text"
|
||||
size="small"
|
||||
@click="delRow(scope.$index)"
|
||||
>
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="选择商品"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="selectProductVisible"
|
||||
@close="selectProductSwitch(0)">
|
||||
<!-- 选择商品 -->
|
||||
<selectProductWindow v-if="selectProductShow" ref="select_product_window"/>
|
||||
<el-button type="primary" @click="selectProductOk()" style="margin-left: 90%">确定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/homeItem.js'
|
||||
import {listCategroy} from "@/api/categoryApi";
|
||||
import selectProductWindow from "@/views/home/selectProduct";
|
||||
|
||||
const defaultRole = {
|
||||
region: [{
|
||||
name: '',
|
||||
title: '',
|
||||
homeId: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
jumpIdsText: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
}],
|
||||
}
|
||||
export default {
|
||||
components: {selectProductWindow},
|
||||
data() {
|
||||
return {
|
||||
isDisabled: false,
|
||||
visible: false,
|
||||
jumpTypeList: [
|
||||
{id: 0, name: '无跳转'},
|
||||
{id: 1, name: '商品详情'},
|
||||
{id: 2, name: '分类列表'},
|
||||
{id: 3, name: '商品列表'},
|
||||
// {id: 4, name: '活动栏目'},
|
||||
],
|
||||
homeId: '',
|
||||
productCateList: [],
|
||||
itemForm: Object.assign({}, defaultRole),
|
||||
selectProductVisible: false,
|
||||
selectProductShow: false,
|
||||
selectProductNum: 0,
|
||||
selectProductIndex: 0,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
title: '',
|
||||
homeId: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
jumpIdsText: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{required: true, message: '名称 为必填项', trigger: 'blur'}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: '标题 为必填项', trigger: 'blur'}
|
||||
],
|
||||
jumpType: [
|
||||
{required: true, message: '跳转类型 为必填项', trigger: 'blur'}
|
||||
],
|
||||
orderNo: [
|
||||
{required: true, message: '排序 为必填项', trigger: 'blur'}
|
||||
],
|
||||
delFlag: [
|
||||
{required: true, message: '是否有效 为必填项', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(homeId) { // 初始化表单验证规则
|
||||
this.homeId = homeId
|
||||
this.visible = true
|
||||
document.querySelector('.el-dialog__wrapper .el-dialog').style.width = '75%'
|
||||
},
|
||||
// 添加行
|
||||
addRow() {
|
||||
this.itemForm.region.push(Object.assign({}, {
|
||||
name: '',
|
||||
title: '',
|
||||
homeId: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
jumpIdsText: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
}))
|
||||
},
|
||||
delRow(index) {
|
||||
this.itemForm.region.splice(index, 1)
|
||||
},
|
||||
// 表单数据提交
|
||||
dataSubmit() {
|
||||
this.$refs['itemForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
this.itemForm.region.forEach((el, index) => {
|
||||
el.homeId = this.homeId
|
||||
})
|
||||
const itemList = this.itemForm.region
|
||||
api.createApi(itemList).then(res => {
|
||||
this.$message.success('操作成功')
|
||||
this.handleClose()
|
||||
this.$nextTick(() => {
|
||||
this.dialogVisible = false
|
||||
})
|
||||
setTimeout(() => {
|
||||
this.$emit('refreshDataList')
|
||||
}, 600)
|
||||
this.loading = false;
|
||||
})
|
||||
} else {
|
||||
return false
|
||||
}
|
||||
})
|
||||
},
|
||||
jumpTypeChange(index) {
|
||||
this.itemForm.region[index].jumpIds = '';
|
||||
this.itemForm.region[index].jumpIdsText = '';
|
||||
},
|
||||
selectProductOk() {
|
||||
let products = this.$refs['select_product_window'].dataListSelections;
|
||||
if (products.length <= 0) {
|
||||
this.$message.error('请选择商品');
|
||||
return;
|
||||
}
|
||||
if (this.selectProductNum !== 0 && this.selectProductNum < products.length) {
|
||||
this.$message.error('只能选择' + this.selectProductNum + '件商品');
|
||||
return;
|
||||
}
|
||||
let ids = products.map(item => { return item.id })
|
||||
let storeName = products.map(item => { return item.storeName })
|
||||
this.itemForm.region[this.selectProductIndex].jumpIds = ids + "";
|
||||
this.itemForm.region[this.selectProductIndex].jumpIdsText = storeName + "";
|
||||
this.selectProductSwitch(0);
|
||||
},
|
||||
selectProductSwitch(flag, num, index) {
|
||||
this.selectProductVisible = (flag === 1 ? true : false);
|
||||
this.selectProductShow = (flag === 1 ? true : false);
|
||||
this.selectProductNum = (flag === 1 ? num : 0);
|
||||
this.selectProductIndex = (flag === 1 ? index : 0);
|
||||
},
|
||||
selectCate() {
|
||||
listCategroy({limit: 999, page: '1', status: 1, type: 1}).then(res => {
|
||||
this.productCateList = res.list;
|
||||
})
|
||||
},
|
||||
handleClose() {
|
||||
this.visible = false
|
||||
this.itemForm = {
|
||||
region: [{
|
||||
name: '',
|
||||
title: '',
|
||||
homeId: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
jumpIdsText: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
}],
|
||||
};
|
||||
},
|
||||
// 点击商品图
|
||||
modalPicTap(tit, index) {
|
||||
let _this = this.itemForm.region[index];
|
||||
this.$modalUpload(function (img) {
|
||||
if (tit === '1') {
|
||||
_this.imgUrl = img[0].sattDir
|
||||
}
|
||||
}, tit, 'content')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
232
src/views/home/item/index.vue
Normal file
232
src/views/home/item/index.vue
Normal file
@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form ref="form" inline :model="dataForm" size="small">
|
||||
<el-form-item label="标题：">
|
||||
<el-input v-model="dataForm.name" placeholder="请输入名称/标题" class="selWidth" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleSearch" />
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<div class="acea-row">
|
||||
<el-button v-hasPermi="['admin:home:save']" size="mini" type="primary" @click="addHandle()">新增数据</el-button>
|
||||
<el-button v-hasPermi="['admin:home:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column type="expand">
|
||||
<template slot-scope="props">
|
||||
<el-form label-position="left" inline class="demo-table-expand">
|
||||
<el-form-item label="跳转参数解析： " style="width: 100%">
|
||||
<span v-for="(value, key) in props.row.jumpIdsMap" class="mr10"> {{ key }} ：{{ value }} <br/></span>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="name"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="名称">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="title"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="标题">
|
||||
</el-table-column>
|
||||
<el-table-column label="封面图" min-width="80" header-align="center">
|
||||
<template slot-scope="scope">
|
||||
<div class="demo-image__preview" style="text-align: center">
|
||||
<el-image v-if="scope.row.imgUrl"
|
||||
style="width: 36px; height: 36px;"
|
||||
:src="scope.row.imgUrl"
|
||||
:preview-src-list="[scope.row.imgUrl]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jumpType"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="跳转类型">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.jumpType == 0">无</span>
|
||||
<span v-else-if="scope.row.jumpType == 1">商品详情</span>
|
||||
<span v-else-if="scope.row.jumpType == 2">分类列表</span>
|
||||
<span v-else-if="scope.row.jumpType == 3">商品列表</span>
|
||||
<!-- <span v-else-if="scope.row.jumpType == 4">活动栏目</span>-->
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="jumpIds"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="跳转参数">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="类型">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.type == 0">商品</span>
|
||||
<span v-else-if="scope.row.type == 1">轮播图</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="orderNo"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="排序">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="status"
|
||||
header-align="center"
|
||||
align="center"
|
||||
label="状态">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.row.delFlag == 0">无效</span>
|
||||
<span v-else-if="scope.row.delFlag == 1">有效</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
fixed="right"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="250"
|
||||
label="操作">
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" size="small" @click="updateHandle(scope.row.id)">修改</el-button>
|
||||
<el-button type="text" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="pageIndex"
|
||||
:page-sizes="[10, 20, 50, 100]"
|
||||
:page-size="pageSize"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
<!-- 新增数据 -->
|
||||
<save v-if="addVisible" ref="save" @refreshDataList="getDataList"></save>
|
||||
<!-- 修改数据 -->
|
||||
<update v-if="updateVisible" ref="update" @refreshDataList="getDataList"></update>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Update from './update-item'
|
||||
import Save from './add-item'
|
||||
import * as api from '@/api/homeItem.js'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
homeId: 0,
|
||||
name: '',
|
||||
},
|
||||
dataList: [],
|
||||
pageIndex: 1,
|
||||
pageSize: 10,
|
||||
totalPage: 0,
|
||||
dataListLoading: false,
|
||||
dataListSelections: [],
|
||||
updateVisible: false,
|
||||
addVisible: false,
|
||||
}
|
||||
},
|
||||
components: {
|
||||
Update, Save
|
||||
},
|
||||
mounted() {
|
||||
this.dataForm.homeId = this.$route.params.id
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true
|
||||
api.listApi(this.dataForm).then(res => {
|
||||
this.dataList = res.list
|
||||
this.totalPage = res.total
|
||||
this.dataListLoading = false
|
||||
}).catch(res => {
|
||||
this.dataListLoading = false
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.pageSize = val
|
||||
this.pageIndex = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.pageIndex = val
|
||||
this.getDataList()
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
// 修改
|
||||
updateHandle(id) {
|
||||
this.updateVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.update.init(id)
|
||||
})
|
||||
},
|
||||
// 添加
|
||||
addHandle() {
|
||||
this.addVisible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs.save.init(this.dataForm.homeId)
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteHandle(id) {
|
||||
var ids = id ? [id] : this.dataListSelections.map(item => {
|
||||
return item.id
|
||||
})
|
||||
this.$confirm(`您确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning'
|
||||
}).then(() => {
|
||||
api.deleteApi({ids : ids.join(',')}).then(res => {
|
||||
this.$message.success('操作成功')
|
||||
this.getDataList()
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
204
src/views/home/item/update-item.vue
Normal file
204
src/views/home/item/update-item.vue
Normal file
@ -0,0 +1,204 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 基于 Element UI 新增和修改弹窗 -->
|
||||
<el-dialog
|
||||
:title="'楼层子项调整'"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="visible"
|
||||
>
|
||||
<!-- 新增和创建表单表单 -->
|
||||
<el-form :model="dataForm" :rules="dataRule" ref="dataForm" @keyup.enter.native="dataSubmit()"
|
||||
label-width="110px">
|
||||
<el-form-item label="名称" prop="name">
|
||||
<el-input v-model="dataForm.name" placeholder="名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="标题" prop="title">
|
||||
<el-input v-model="dataForm.title" placeholder="标题"></el-input>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="楼层图：" prop="imgUrl">
|
||||
<div class="upLoadPicBox" @click="modalPicTap('1')" :disabled="isDisabled">
|
||||
<div v-if="dataForm.imgUrl" class="pictrue"><img :src="dataForm.imgUrl"></div>
|
||||
<div v-else class="upLoad">
|
||||
<i class="el-icon-camera cameraIconfont" />
|
||||
</div>
|
||||
</div>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="跳转类型" prop="jumpType">
|
||||
<el-select v-model="dataForm.jumpType" placeholder="请选择" class="selWidthd" style="width: 220px" @change="jumpTypeChange()">
|
||||
<el-option :value="item.id" v-for="(item, index) in jumpTypeList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item label="选商品" prop="jumpIdsText" v-if="dataForm.jumpType == 1">
|
||||
<el-input v-model="dataForm.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="选分类" prop="jumpIds" v-else-if="dataForm.jumpType == 2">
|
||||
<el-select v-model="dataForm.jumpIds" placeholder="选分类" class="selWidthd" style="width: 220px" @click.native="selectCate">
|
||||
<el-option :value="item.id.toString()" v-for="(item, index) in productCateList" :key="index" :label="item.name"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="选商品" prop="jumpIdsText" v-else-if="dataForm.jumpType == 3">
|
||||
<el-input v-model="dataForm.jumpIdsText" placeholder="选商品" @click.native="selectProductSwitch(1)"></el-input>
|
||||
</el-form-item>
|
||||
<!-- <el-form-item label="选活动" prop="jumpIds" v-if="dataForm.jumpType === 4">-->
|
||||
<!-- <el-input v-model="dataForm.jumpIds" placeholder="选活动"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
|
||||
<!-- <el-form-item label="跳转地址" prop="jumpUrl">-->
|
||||
<!-- <el-input v-model="dataForm.jumpUrl" placeholder="跳转地址"></el-input>-->
|
||||
<!-- </el-form-item>-->
|
||||
<el-form-item label="是否无效" prop="status">
|
||||
<el-select v-model="dataForm.delFlag" class="selWidthd" style="width: 220px">
|
||||
<el-option label="有效" :value="1"></el-option>
|
||||
<el-option label="无效" :value="0"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<span slot="footer" class="dialog-footer">
|
||||
<el-button @click="visible = false">取消</el-button>
|
||||
<el-button type="primary" @click="dataSubmit()">确定</el-button>
|
||||
</span>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog
|
||||
title="选择商品"
|
||||
:close-on-click-modal="false"
|
||||
:visible.sync="selectProductVisible"
|
||||
@close="selectProductSwitch(0)">
|
||||
<!-- 选择商品 -->
|
||||
<selectProductWindow v-if="selectProductShow" ref="select_product_window"/>
|
||||
<el-button type="primary" @click="selectProductOk()" style="margin-left: 90%">确定</el-button>
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as api from '@/api/homeItem.js'
|
||||
import { listCategroy } from "@/api/categoryApi";
|
||||
import selectProductWindow from "@/views/home/selectProduct";
|
||||
|
||||
export default {
|
||||
components: {selectProductWindow},
|
||||
data() {
|
||||
return {
|
||||
isDisabled: false,
|
||||
visible: false,
|
||||
jumpTypeList: [
|
||||
{id: 0, name: '无跳转'},
|
||||
{id: 1, name: '商品详情'},
|
||||
{id: 2, name: '分类列表'},
|
||||
{id: 3, name: '商品列表'},
|
||||
// {id: 4, name: '活动栏目'},
|
||||
],
|
||||
productCateList: [],
|
||||
selectProductVisible: false,
|
||||
selectProductShow: false,
|
||||
dataForm: {
|
||||
id: 0,
|
||||
name: '',
|
||||
title: '',
|
||||
homeId: '',
|
||||
imgUrl: '',
|
||||
jumpType: '',
|
||||
jumpUrl: '',
|
||||
jumpIds: '',
|
||||
jumpIdsText: '',
|
||||
business: '',
|
||||
delFlag: '',
|
||||
orderNo: '',
|
||||
},
|
||||
dataRule: {
|
||||
name: [
|
||||
{required: true, message: '名称 为必填项', trigger: 'blur'}
|
||||
],
|
||||
title: [
|
||||
{required: true, message: '标题 为必填项', trigger: 'blur'}
|
||||
],
|
||||
jumpType: [
|
||||
{required: true, message: '跳转类型 为必填项', trigger: 'blur'}
|
||||
],
|
||||
orderNo: [
|
||||
{required: true, message: '排序 为必填项', trigger: 'blur'}
|
||||
],
|
||||
delFlag: [
|
||||
{required: true, message: '是否有效 为必填项', trigger: 'blur'}
|
||||
],
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
init(id) { // 初始化表单验证规则
|
||||
document.querySelector('.el-dialog__wrapper .el-dialog').style.width = '45%'
|
||||
this.dataForm.id = id
|
||||
this.visible = true
|
||||
this.$nextTick(() => {
|
||||
this.$refs['dataForm'].resetFields()
|
||||
if (this.dataForm.id) {
|
||||
api.detailApi(id).then(res => {
|
||||
this.dataForm = res;
|
||||
})
|
||||
this.selectCate()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 表单数据提交
|
||||
dataSubmit() {
|
||||
this.$refs['dataForm'].validate((valid) => {
|
||||
if (valid) {
|
||||
this.loading = true;
|
||||
api.updateApi(this.dataForm).then(res => {
|
||||
this.$message.success('修改成功');
|
||||
})
|
||||
this.visible = false;
|
||||
setTimeout(() => {
|
||||
this.$emit('refreshDataList')
|
||||
}, 600)
|
||||
this.loading = false;
|
||||
}
|
||||
})
|
||||
},
|
||||
jumpTypeChange() {
|
||||
this.dataForm.jumpIds = '';
|
||||
this.dataForm.jumpIdsText = '';
|
||||
},
|
||||
selectProductOk() {
|
||||
let products = this.$refs['select_product_window'].dataListSelections;
|
||||
if (products.length <= 0) {
|
||||
this.$message.error('请选择商品');
|
||||
return;
|
||||
}
|
||||
if (this.selectProductNum !== 0 && this.selectProductNum < products.length) {
|
||||
this.$message.error('只能选择' + this.selectProductNum + '件商品');
|
||||
return;
|
||||
}
|
||||
let ids = products.map(item => { return item.id })
|
||||
let storeName = products.map(item => { return item.storeName })
|
||||
this.dataForm.jumpIds = ids + "";
|
||||
this.dataForm.jumpIdsText = storeName + "";
|
||||
this.selectProductSwitch(0);
|
||||
},
|
||||
selectProductSwitch(flag, num, index) {
|
||||
this.selectProductVisible = (flag === 1 ? true : false);
|
||||
this.selectProductShow = (flag === 1 ? true : false);
|
||||
this.selectProductNum = (flag === 1 ? num : 0);
|
||||
},
|
||||
selectCate() {
|
||||
listCategroy({ limit: 999, page: '1', status: 1, type: 1 }).then(res => {
|
||||
this.productCateList = res.list;
|
||||
})
|
||||
},
|
||||
// 点击商品图
|
||||
modalPicTap (tit, num, i,status) {
|
||||
const _this = this;
|
||||
if(_this.isDisabled) return;
|
||||
this.$modalUpload(function(img) {
|
||||
if(tit==='1'&& !num){
|
||||
_this.dataForm.imgUrl = img[0].sattDir
|
||||
}
|
||||
},tit, 'content')
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
120
src/views/home/selectProduct.vue
Normal file
120
src/views/home/selectProduct.vue
Normal file
@ -0,0 +1,120 @@
|
||||
<template>
|
||||
<div class="divBox">
|
||||
<el-card class="box-card">
|
||||
<div slot="header" class="clearfix">
|
||||
<div class="container">
|
||||
<el-form inline :model="dataForm" size="small">
|
||||
<el-form-item label="商品搜索：">
|
||||
<el-input v-model="dataForm.keywords" placeholder="请输入商品名称，关键字，商品ID" class="selWidth"
|
||||
size="small" clearable>
|
||||
<el-button slot="append" icon="el-icon-search" @click="handleSearch" size="small"/>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
ref="table"
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChangeHandle"
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
align="center"
|
||||
width="50">
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="id"
|
||||
label="ID"
|
||||
min-width="30%"
|
||||
/>
|
||||
<el-table-column label="商品图" min-width="30%">
|
||||
<template slot-scope="scope">
|
||||
<div class="demo-image__preview">
|
||||
<el-image
|
||||
style="width: 36px; height: 36px"
|
||||
:src="scope.row.image"
|
||||
:preview-src-list="[scope.row.image]"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="商品名称"
|
||||
prop="storeName"
|
||||
min-width="40%"
|
||||
:show-overflow-tooltip="true">
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
<el-pagination
|
||||
@size-change="sizeChangeHandle"
|
||||
@current-change="currentChangeHandle"
|
||||
:current-page="dataForm.page"
|
||||
:page-sizes="[6, 20, 50, 100]"
|
||||
:page-size="dataForm.limit"
|
||||
:total="totalPage"
|
||||
layout="total, sizes, prev, pager, next, jumper">
|
||||
</el-pagination>
|
||||
</el-card>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {productLstApi} from '@/api/store'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
dataForm: {
|
||||
keywords: '',
|
||||
page: 1,
|
||||
limit: 6,
|
||||
type: '0'
|
||||
},
|
||||
dataList: [],
|
||||
totalPage: 0,
|
||||
dataListSelections: [],
|
||||
dataListLoading: false
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getDataList()
|
||||
},
|
||||
methods: {
|
||||
// 获取数据列表
|
||||
getDataList() {
|
||||
this.dataListLoading = true
|
||||
productLstApi(this.dataForm).then(res => {
|
||||
this.dataList = res.list
|
||||
this.totalPage = res.total
|
||||
this.dataListLoading = false
|
||||
}).catch(res => {
|
||||
this.dataListLoading = false
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
},
|
||||
handleSearch() {
|
||||
this.dataForm.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 每页数
|
||||
sizeChangeHandle(val) {
|
||||
this.dataForm.limit = val
|
||||
this.dataForm.page = 1
|
||||
this.getDataList()
|
||||
},
|
||||
// 当前页
|
||||
currentChangeHandle(val) {
|
||||
this.dataForm.page = val
|
||||
this.getDataList()
|
||||
},
|
||||
// 多选
|
||||
selectionChangeHandle(val) {
|
||||
this.dataListSelections = val
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@ -70,7 +70,6 @@
|
||||
size="small"
|
||||
@click="confirmEdit(ruleForm.region,scope.$index)"
|
||||
>
|
||||
<!-- v-if="scope.$index > 0"-->
|
||||
删除
|
||||
</el-button>
|
||||
</template>
|
||||
|
||||
@ -50,7 +50,7 @@ export default {
|
||||
categoryList: [],
|
||||
dataForm: {
|
||||
id: 0,
|
||||
cid: 0,
|
||||
cid: '',
|
||||
title: '',
|
||||
content: '',
|
||||
jumpUrl: '',
|
||||
|
||||
@ -22,15 +22,20 @@
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</div>
|
||||
<el-button v-hasPermi="['admin:helpProblem:save']" size="mini" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
|
||||
<el-button v-hasPermi="['admin:helpProblem:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||||
<div class="acea-row">
|
||||
<el-button v-hasPermi="['admin:helpProblem:save']" size="mini" type="primary" @click="addOrUpdateHandle()">新增数据</el-button>
|
||||
<el-button v-hasPermi="['admin:helpProblem:delete']" size="mini" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<el-table
|
||||
:data="dataList"
|
||||
border
|
||||
ref="table"
|
||||
v-loading="dataListLoading"
|
||||
:data="dataList"
|
||||
style="width: 100%"
|
||||
size="mini"
|
||||
highlight-current-row
|
||||
@selection-change="selectionChangeHandle"
|
||||
style="width: 100%;">
|
||||
>
|
||||
<el-table-column
|
||||
type="selection"
|
||||
header-align="center"
|
||||
|
||||
@ -22,9 +22,8 @@
|
||||
<el-table v-loading="listLoading" :data="ruleForm.region" border fit highlight-current-row style="width: 100%" size="mini" class="tempBox">
|
||||
<el-table-column align="center" label="可配送区域" min-width="260">
|
||||
<template slot-scope="scope">
|
||||
<span v-if="scope.$index === 0">默认全国</span>
|
||||
<!-- <span v-if="scope.$index === 0">默认全国</span>-->
|
||||
<el-cascader
|
||||
v-else
|
||||
v-model="scope.row.city_ids"
|
||||
style="width: 98%"
|
||||
:options="cityList"
|
||||
@ -67,7 +66,6 @@
|
||||
<el-table-column align="center" label="操作" min-width="80">
|
||||
<template slot-scope="scope">
|
||||
<el-button
|
||||
v-if="scope.$index > 0"
|
||||
type="text"
|
||||
size="small"
|
||||
@click="confirmEdit(ruleForm.region,scope.$index)"
|
||||
@ -96,7 +94,7 @@
|
||||
<el-cascader
|
||||
v-model="row.city_ids"
|
||||
style="width: 95%"
|
||||
:options="cityList"
|
||||
:options="a_cityList"
|
||||
:props="props"
|
||||
collapse-tags
|
||||
clearable
|
||||
@ -108,7 +106,7 @@
|
||||
<el-input-number v-model="row.number" controls-position="right" :step-strictly="ruleForm.type===1?true:false" :min="ruleForm.type===1?1:0.1"/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column min-width="120px" align="center" label="包邮金额（元）">
|
||||
<el-table-column min-width="120px" align="center" label="包邮金额（元）" v-if="isShowPrice">
|
||||
<template slot-scope="{row}">
|
||||
<el-input-number v-model="row.price" controls-position="right" />
|
||||
</template>
|
||||
@ -263,19 +261,25 @@ export default {
|
||||
ruleForm: Object.assign({}, defaultRole),
|
||||
listLoading: false,
|
||||
cityList: [],
|
||||
a_cityList: [],
|
||||
columns: {
|
||||
title: '首件',
|
||||
title2: '续件',
|
||||
title3: '包邮件数'
|
||||
},
|
||||
isShowPrice: true,
|
||||
tempId: 0,
|
||||
type: 0 // 0添加 1编辑
|
||||
type: 0, // 0添加 1编辑
|
||||
defaultCity : {"id":0,"cityId":0,"name":"默认全国","city_ids":[[0]],"child":null}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
setTimeout(()=>{
|
||||
let cityList = JSON.parse(sessionStorage.getItem('cityList'));
|
||||
let a_cityList = JSON.parse(sessionStorage.getItem('cityList'));
|
||||
cityList.unshift(this.defaultCity);
|
||||
this.cityList = cityList;
|
||||
this.a_cityList = a_cityList;
|
||||
},1000);
|
||||
},
|
||||
methods: {
|
||||
@ -312,10 +316,14 @@ export default {
|
||||
}
|
||||
},
|
||||
changeRegion(value) {
|
||||
console.log(value)
|
||||
},
|
||||
changeRadio(num) {
|
||||
this.columns = Object.assign({}, statusMap[num - 1])
|
||||
if (num === 4) {
|
||||
this.isShowPrice = false;
|
||||
} else {
|
||||
this.isShowPrice = true;
|
||||
}
|
||||
},
|
||||
// 添加配送区域
|
||||
addRegion(region) {
|
||||
@ -396,7 +404,10 @@ export default {
|
||||
logistics.cityListTree().then(res => {
|
||||
sessionStorage.setItem('cityList',JSON.stringify(res));
|
||||
let cityList = JSON.parse(sessionStorage.getItem('cityList'));
|
||||
let a_cityList = JSON.parse(sessionStorage.getItem('cityList'));
|
||||
cityList.unshift(this.defaultCity);
|
||||
this.cityList = cityList;
|
||||
this.a_cityList = a_cityList;
|
||||
}).catch(res => {
|
||||
this.$message.error(res.message)
|
||||
})
|
||||
@ -434,31 +445,38 @@ export default {
|
||||
// // 指定包邮设置
|
||||
// shippingTemplatesFreeRequestList: []
|
||||
}
|
||||
let isAllNum = 0;
|
||||
this.ruleForm.region.forEach((el, index) => {
|
||||
el.title = el.city_ids.length > 0 ? JSON.stringify(el.city_ids) : JSON.stringify([[0, 0]])
|
||||
for (var i = 0; i < el.city_ids.length; i++) {
|
||||
el.city_ids[i].shift()
|
||||
let cityId = 'all';
|
||||
let title = JSON.stringify([[0]]);
|
||||
if (el.city_ids.length > 0 && el.city_ids[0] != '0') {
|
||||
cityId = el.city_ids.join(',');
|
||||
title = JSON.stringify(el.city_ids);
|
||||
} else {
|
||||
isAllNum = isAllNum + 1;
|
||||
}
|
||||
el.cityId = el.city_ids.length > 0 ? el.city_ids.join(',') : 'all'
|
||||
el.title = title;
|
||||
el.cityId = cityId
|
||||
})
|
||||
if (isAllNum > 1 || (isAllNum == 1 && this.ruleForm.region.length > 1)) {
|
||||
this.$message.error('配送区域已有全国选项，请移除其他区域')
|
||||
this.loading = false;
|
||||
return ;
|
||||
}
|
||||
param.shippingTemplatesRegionRequestList = this.ruleForm.region
|
||||
param.shippingTemplatesRegionRequestList.forEach((el, index) => {
|
||||
// delete el.city_ids
|
||||
// delete el.city_id
|
||||
})
|
||||
|
||||
if (this.ruleForm.appoint) {
|
||||
this.ruleForm.free.forEach((el, index) => {
|
||||
el.title = el.city_ids.length > 0 ? JSON.stringify(el.city_ids) : JSON.stringify([[0, 0]])
|
||||
for (var i = 0; i < el.city_ids.length; i++) {
|
||||
el.city_ids[i].shift()
|
||||
let cityId = 'all';
|
||||
let title = JSON.stringify([[0]]);
|
||||
if (el.city_ids.length > 0 && el.city_ids[0] != '0') {
|
||||
cityId = el.city_ids.join(',');
|
||||
title = JSON.stringify(el.city_ids);
|
||||
}
|
||||
el.cityId = el.city_ids.length > 0 ? el.city_ids.join(',') : 'all'
|
||||
el.title = title;
|
||||
el.cityId = cityId
|
||||
})
|
||||
param.shippingTemplatesFreeRequestList = this.ruleForm.free
|
||||
param.shippingTemplatesFreeRequestList.forEach((el, index) => {
|
||||
// delete el.city_ids
|
||||
// delete el.city_id
|
||||
})
|
||||
}
|
||||
if (this.type === 0) {
|
||||
logistics.shippingSave(param).then(res => {
|
||||
@ -512,4 +530,7 @@ export default {
|
||||
width: 100px !important;
|
||||
}
|
||||
}
|
||||
.el-table__row .el-form-item--mini.el-form-item {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user